1
Ich habe einen Code, den ich verwende, um ein Formular zu erstellen und Eingabeelemente innerhalb eines iframe anzuzeigen. Ich verwende Ignite UI. Ich habe diese link als Voraussetzung verwendet.So erhalten Sie den Wert der Span-Eingabe mit Javascript
Wie bekomme ich die Span Elemente von meinem Formular innerhalb des Rahmens.
Hier ist mein 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(); \t */
document.getElementById("after").innerHTML = "Your Product is " + text1 + " " + "! How are you today?"; /* text2 + */
return true
}
</script>
</body>
</html>bitte helfen. Mein Rahmen zeigt das ausgewählte Produkt nicht an.
Was genau möchten Sie erreichen? Versuchen Sie Elemente aus dem iframe in die umgebende Seite zu bekommen? – mhatch
Klingt, als könnten Sie die Auswahl einfach in der Dropdownliste erfassen und sie in eine verborgene Eingabe im Formular auf der übergeordneten Seite einfügen. Dann würde die Formularübermittlung diese Information enthalten. – Seano666
Es gibt keine Formularelemente in einem iFrame in dem Code, den Sie hier vorgestellt haben. Das einzige Problem mit dem Code, den Sie haben, ist ein zusätzliches '-Zeichen in Ihrem Selektor. Es sollte '$ ('. ComboGroup2 span')' sein. Es könnte auch einfach '$ ('# comboDistrict')' sein, da der Bereich eine ID hat, aber ich habe keine Ahnung, wie Ignite UI funktioniert. –