基本上,我試圖顯示1到10個文本框,具體取決於用戶選擇多少,如果用戶想將它們發送給收件人電子郵件。JS/jQuery基於收音機/選擇值顯示文本框
我有一個下拉選擇1-10選擇/值,兩個單選按鈕和十個支持div的文本框。我正在使用以前的開發人員(我所採用的地方)使用的代碼片段,我只能假設它是jQuery,但我擁有一些我熟悉的小型Javascript知識。我不確定是否允許我這樣做。 :/ Javascript/jQuery是我的剋星。
這裏是我到目前爲止(活服務器):http://www.dealraiser.net/gift
的Javascript/jQuery的使用:
<script type="text/javascript">
// SHOW HIDDEN TEXTBOXES
function updateDisplay(select) {
// ACCESS RADIO OBJECT
var radioValue = getRadioCheckedValue('sending');
// SHOW FIELD IF RADIO IS SET TO 'R'
if (radioValue == 'r') { showField(); }
}
// BORROWED FROM GOOGLE - EASIER TO USE PRE-EXISTING
function getRadioCheckedValue(radio_name) {
var oRadio = document.forms[0].elements[radio_name];
for(var i = 0; i < oRadio.length; i++) {
if(oRadio[i].checked) {
return oRadio[i].value;
}
}
return '';
}
// DISPLAY FIELD, HIDE OTHERS
function showField() {
// HIDE ALL EXTRA OPTIONS
for (i=1, i<10, i++) {
$("#re"+i).hide();;
$('#r'+i).removeClass('required');
}
if (radio.value == 'r') {
// DETERMINE NUMBER OF EMAILS TO SHOW
var giftNumber = document.getElementById('giftnumber').value;
// DISPLAY ONLY THE RIGHT AMOUNT OF EMAIL INPUTS
for (i=1, i<=giftNumber, i++) {
$("#re"+i).show();
$('#r'+i).addClass('required');
}
}
}
// TOGGLE RADIO ON/OFF
function doToggle(radio) {
// HIDE ALL EXTRA OPTIONS
for (i=1, i<10,i++) {
$("#re"+i).hide();
$('#r'+i).removeClass('required');
}
if (radio.value == 'r') {
// DETERMINE NUMBER OF EMAILS TO SHOW
var giftNumber = document.getElementById('giftnumber').value;
// DISPLAY ONLY THE RIGHT AMOUNT OF EMAIL INPUTS
for (i=1, i<=giftNumber, i++) {
$("#re"+i).show();
$('#r'+i).addClass('required');
}
}
}
</script>
下面是HTML:
<h3>1. How many subscriptions would you like to gift?
<select name="giftnumber" size="1" id="giftnumber" onChange="updateDisplay(this)" style="width: 48px">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></h3>
<h3>2. Sending options</h3>
<p>
<label>
<input type="radio" name="sending" id="sending" value="b" onChange="doToggle(this)" />
Send the pre-paid codes to my email and I will forward them.</label>
</p>
<p>
<label>
<input type="radio" name="sending" id="sending" value="r" onChange="doToggle(this)" />
Send the pre-paid codes to the recipient email address(es).</label>
</p>
<div id="re1" name="re1" style="display:none;">
<p>Recipient Email: <input name="r1" id="r1" type="text" /></p>
</div>
<div id="re2" name="re2" style="display:none;">
<p>Recipient Email: <input name="r2" id="r2" type="text" /></p>
</div>
<div id="re3" name="re3" style="display:none;">
<p>Recipient Email: <input name="r3" id="r3" type="text" /></p>
</div>
<div id="re4" name="re4" style="display:none;">
<p>Recipient Email: <input name="r4" id="r4" type="text" /></p>
</div>
<div id="re5" name="re5" style="display:none;">
<p>Recipient Email: <input name="r5" id="r5" type="text" /></p>
</div>
<div id="re6" name="re6" style="display:none;">
<p>Recipient Email: <input name="r6" id="r6" type="text" /></p>
</div>
<div id="re7" name="re7" style="display:none;">
<p>Recipient Email: <input name="r7" id="r7" type="text" /></p>
</div>
<div id="re8" name="re8" style="display:none;">
<p>Recipient Email: <input name="r8" id="r8" type="text" /></p>
</div>
<div id="re9" name="re9" style="display:none;">
<p>Recipient Email: <input name="r9" id="r9" type="text" /></p>
</div>
<div id="re10" name="re10" style="display:none;">
<p>Recipient Email: <input name="r1" id="r10" type="text" /></p>
</div>
我改變了for語句,但它仍然不起作用。 – Lanezeri
仍然是錯的:對於(i = 1; I <10,;我++){ –
刪除 '' 後 '10' –