2012-08-23 64 views
2

基本上,我試圖顯示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> 

回答

2

有 ';'缺少在管線180

之前:

爲(I = 1,I < 10,I ++)

後:

爲(I = 1;我< 10;我++)

+0

我改變了for語句,但它仍然不起作用。 – Lanezeri

+0

仍然是錯的:對於(i = 1; I <10,;我++){ –

+0

刪除 '' 後 '10' –

0

使用這樣的事情:

function showtextareas(sel) { 
    var value = sel.options[sel.selectedIndex].value; 
    if(value==1) { 
     //show one textarea 
    } 
    else if(...) { ... } 
} 

<select onchange="showtextareas(this)"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
// ...... 
<option value="10">10</option> 
</select> 

BTW我不知道爲什麼顏色格式化很奇怪...

+0

這就是我想要避免的..我寧願有一個循環,而不是手動編寫50多行代碼,這可能更容易實現,這是多餘的和毫無意義的。 – Lanezeri

相關問題