1
양식을 만들고 iframe 내부에 입력 요소를 표시하는 데 사용하는 코드가 있습니다. Ignite UI를 사용하고 있습니다. 나는 이것을 link을 전제로 사용했다.JavaScript를 사용하여 Span 입력 값을 얻는 방법
프레임 내 양식에서 span 요소를 얻으려면 어떻게해야합니까?
<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>
도와주세요 :
여기 내 HTML입니다. 내 프레임에 선택한 제품이 표시되지 않습니다.
정확히 달성하려는 것은 무엇입니까? iframe의 요소를 포함하는 페이지로 요소를 가져 오려고합니까? – mhatch
방금 선택한 내용을 드롭 다운에서 캡처하여 상위 페이지의 양식에 숨겨진 입력에 넣을 수 있습니다. 그러면 양식 제출시이 정보가 포함됩니다. – Seano666
여기에 제시된 코드에는 iFrame 내부에 양식 요소가 없습니다. 당신이 가진 코드의 유일한 문제는 선택자 안에 여분의'- '문자입니다. 그것은'$ ('. comboGroup2 span')'이어야합니다. span에 ID가 있기 때문에'$ ('# comboDistrict')'일 수도 있지만, Ignite UI가 어떻게 작동하는지 전혀 모른다. –