I have some code I am using to create a form and display input elements inside of an iframe. I am using Ignite UI. I used this link as a premise.
How can I get the span elements from my form inside the frame.
Here is my HTML:
<html>
<head>
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script>
$(function() {
var dsCountry, dsCascTowns, dsCountryCascading,
dsCountryCascading, dsStatesUSCascading, dsDistrictBGCascading;
dsCountry = [{
txtCountry: "3Delta Level 3",
valCountry: "Ta"
}, {
txtCountry: "Account Updater",
valCountry: "Au"
}, {
txtCountry: "DCC",
valCountry: "Dc"
}];
dsCascDistrict = [{
keyCountry: "Ta",
txtDistrict: "ALL",
valDistrict: "AL"
}, {
keyCountry: "Ta",
txtDistrict: "3336",
valDistrict: "3336"
}, {
keyCountry: "Ta",
txtDistrict: "6064",
valDistrict: "6064"
}, {
keyCountry: "Ta",
txtDistrict: "6980",
valDistrict: "6980"
}, {
keyCountry: "Ta",
txtDistrict: "6081",
valDistrict: "6081"
}, {
keyCountry: "Au",
txtDistrict: "ALL",
valDistrict: "AL"
}, {
keyCountry: "Au",
txtDistrict: "3345",
valDistrict: "3345"
}, {
keyCountry: "Au",
txtDistrict: "3346",
valDistrict: "3346"
}, {
keyCountry: "Au",
txtDistrict: "6214",
valDistrict: "6214"
}, {
keyCountry: "Dc",
txtDistrict: "ALL",
valDistrict: "AL"
}, {
keyCountry: "Dc",
txtDistrict: "40",
valDistrict: "40"
}];
dsCascTowns = [{
keyDistrict: "NJ",
textTown: "Atlantic City",
valTown: "AtlanticCity"
}, {
keyDistrict: "NJ",
textTown: "Dover",
valTown: "Dover"
}, {
keyDistrict: "CA",
textTown: "Los Angeles",
valTown: "LosAngeles"
}, {
keyDistrict: "CA",
textTown: "San Francisco",
valTown: "San Francisco"
}, {
keyDistrict: "CA",
textTown: "San Diego",
valTown: "SanDiego"
}, {
keyDistrict: "IL",
textTown: "Chicago",
valTown: "Chicago"
}, {
keyDistrict: "NY",
textTown: "New York",
valTown: "NewYork"
}, {
keyDistrict: "NY",
textTown: "Buffalo",
valTown: "Buffalo"
}, {
keyDistrict: "FL",
textTown: "Miami",
valTown: " Miami"
}, {
keyDistrict: "FL",
textTown: "Orlando",
valTown: "Orlando"
}, {
keyDistrict: "SA",
textTown: "Sofia",
valTown: "Sofia"
}, {
keyDistrict: "SA",
textTown: "Pernik",
valTown: "Pernik"
}, {
keyDistrict: "PV",
textTown: "Plovdiv",
valTown: "Plovdiv"
}, {
keyDistrict: "PV",
textTown: "Asenovgrad",
valTown: "Asenovgrad"
}, {
keyDistrict: "V",
textTown: "Varna",
valTown: "Varna"
}, {
keyDistrict: "V",
textTown: "Kavarna",
valTown: "Kavarna"
}, {
keyDistrict: "V",
textTown: "Balchik",
valTown: "Balchik"
}, {
keyDistrict: "Y",
textTown: "Yambol",
valTown: "Yambol"
}, {
keyDistrict: "Y",
textTown: "Kermen",
valTown: "Kermen"
}, {
keyDistrict: "Y",
textTown: "Elhovo",
valTown: "Elhovo"
}, {
keyDistrict: "Y",
textTown: "Bolyarovo",
valTown: "Bolqrovo"
}, ];
$(function() {
$("#comboCountry").igCombo({
textKey: "txtCountry",
valueKey: "valCountry",
dataSource: dsCountry,
selectionChanged: function(evt, ui) {
var filteredCascDistrict = [];
if (ui.items && ui.items[0]) {
var itemData = ui.items[0].data;
if (itemData.valCountry == "US") {
$("#state").css("display", "none");
$("#district").css("display", "block");
} else {
$("#state").css("display", "none");
$("#district").css("display", "block");
}
filteredCascDistrict = dsCascDistrict.filter(function(district) {
return district.keyCountry == itemData.valCountry;
});
}
var $comboDistrict = $("#comboDistrict");
$comboDistrict.igCombo("deselectAll", {}, true);
$comboDistrict.igCombo("option", "dataSource", filteredCascDistrict);
$comboDistrict.igCombo("dataBind");
var disableChildCombo = filteredCascDistrict.length == 0;
$comboDistrict.igCombo("option", "disabled", disableChildCombo);
},
itemsRendered: function(evt, ui) {
ui.owner.deselectAll();
}
});
$("#comboDistrict").igCombo({
valueKey: "valDistrict",
textKey: "txtDistrict",
dataSource: [],
disabled: true,
filteringCondition: "startsWith",
multiSelection: {
enabled: true
},
selectionChanged: function(evt, ui) {
var filteredCascTown = [];
if (ui.items && ui.items[0]) {
var itemData = ui.items[0].data;
var filteredCascTown = dsCascTowns.filter(function(town) {
return town.keyDistrict == itemData.valDistrict;
});
}
var $comboTown = $("#comboTown");
$comboTown.igCombo("deselectAll");
$comboTown.igCombo("option", "dataSource", filteredCascTown);
$comboTown.igCombo("dataBind");
var disableChildCombo = filteredCascTown.length == 0;
$comboTown.igCombo("option", "disabled", disableChildCombo);
}
});
$("#comboTown").igCombo({
valueKey: "valTown",
textKey: "textTown",
disabled: true
});
});
});
</script>
</head>
<body>
<div class="group-container overHidden" id="before">
<IFRAME class="frame" id=iframe1 name="iframe1" style="display: none" src="about:blank"></IFRAME>
<form method="post" target="iframe1" action="SubmitToSomeFile" id="frm" accept-charset=UTF-8 name="frm">
<div class="overHidden">
<div class="comboGroup">
<div>Product</div>
<span id="comboCountry"></span>
</div>
<div class="comboGroup2">
<div id="state">
<br />
</div>
<div id="district">ChargeType</div>
<span id="comboDistrict"></span>
</div>
<!-- <div class="comboGroup">
<div>Town</div>
<span id="comboTown"></span>
</div> -->
</div>
<br>
<br>
<INPUT type="submit" class="button" name="submit" value="Run" id=button2 onClick="_submit_form();">
</form>
<!-- frame goes here -->
</div>
<div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
<!-- Some Content After the form. -->
<script language="JavaScript">
function _submit_form() {
/* document.getElementById('before').style.display = 'none'; */
document.getElementById('after').style.display = 'block';
var text1 = $('.comboGroup2 -span').text();
/* var text2 = document.getElementById('comboDistrict').text(); */
document.getElementById("after").innerHTML = "Your Product is " + text1 + " " + "! How are you today?"; /* text2 + */
return true
}
</script>
</body>
</html>please help. My frame does not display selected product.
You can get the selected value from the
igCombousing thevaluemethod:I don't however see an element in your iframe.