HTML Javascript輸入字段創建在單選按鈕檢查/點擊

Question

我是編程新手，這是我第一次使用JavaScript。我想實現：

1）點擊第一個單選按鈕輸入字段文本-837出現解決

2）點擊第二個單選按鈕輸入字段文本-263出現，取代了以前的場求解

3）或反之亦然。 （在第一次單擊其中一個單選按鈕輸入字段出現時，選擇其他單選按鈕將替換之前的字段）求解

4）只能有一個字段存在。求助

4.1）點擊已經選中的單選按鈕時不會出現任何內容 - 這是我的問題。它創造了另一個領域。 Roysh和上帝解決了這個問題。

5）輸入字段應爲必填字段，同時還需要選擇單選按鈕。 - 不知道如何實現這一點。它們是通過電子郵件發送的表單的一部分。填寫表單的人需要檢查其中一個單選按鈕，並需要填寫創建的字段。求助

5.1）ADDED。第一個REGNR字段文本-837應該有最多6個字符，最少爲4.第二個字段VIN text-263應該有17個字符的最大值和最小值。

6） Javascript創建的DIV應該有一個定義的ID - 不知道如何。現在新的字段出現REGNR未定義或VIN未定義他們應該有一個有效的ID，所以我可以在CSS中編輯它們。解決Roysh。

我得到了正確的第一個3分，但問題從第四個4）開始。

我從以前的stackowerflow文章中獲得了大部分代碼，但是使用了checkox，所以我改變了代碼，就像我知道如何以及現在被卡住了一樣。搜索了幾個小時的網頁，但沒有。最終這應該是一個很好地工作的形式的一部分，我只需要這部分功能。

我幾乎工作代碼：

function dynInput(rb) { 
if (document.getElementById('raadio').checked == true) { 
    var input = document.createElement("input"); 
    input.type = "text"; 
    input.value = "field1"; 
    input.name = "text-837"; 
    input.required="required"; 
    var div = document.createElement("div"); 
    div.id = rb.name.id; 
    div.innerHTML = "REGNR " + rb.name.id; 
    div.appendChild(input); 
    document.getElementById("insertinputs").appendChild(div); 
} 
if (document.getElementById('raadio2').checked == true) { 
    var input = document.createElement("input"); 
    input.type = "text"; 
    input.value = "field2"; 
    input.name = "text-263"; 
    input.required="required"; 
    var div = document.createElement("div"); 
    div.id = rb.name; 
    div.innerHTML = "VIN " + rb.name.id; 
    div.appendChild(input); 
    document.getElementById("insertinputs").appendChild(div); 
} 
if (document.getElementById('raadio').checked == false) { 
    document.getElementById(rb.name.id).remove(); 
} 
if (document.getElementById('raadio2').checked == false) { 
    document.getElementById(rb.name).remove(); 
} 
} 

謝謝你的幫助。

Answer 1

好吧，這裏是解決所有但5

記住一個更優雅的方式，有作爲「div.id」，也不是「rb.name.id」沒有這樣的事。

<script type="text/javascript"> 
    checked1=false; 
    checked2=false; 

function dynInput(rb) { 
if (document.getElementById('raadio').checked && !checked1 || document.getElementById('raadio').checked && checked2) { 
    var input = document.createElement("input"); 
    input.type = "text"; 
    input.value = "field1"; 
    input.name = "text-837"; 
    input.required = "true"; 
    var div = document.createElement("div"); 
    div.setAttribute("id","regnr"); 
    div.innerHTML = "REGNR "; 
    div.appendChild(input); 
    document.getElementById("insertinputs").appendChild(div); 
    checked1=true; 
    checked2=false; 
    document.getElementById('vin').remove(); 
} 
if (document.getElementById('raadio2').checked && !checked2 || document.getElementById('raadio2').checked && checked1) { 
    var input = document.createElement("input"); 
    input.type = "text"; 
    input.value = "field2"; 
    input.name = "text-263"; 
    var div = document.createElement("div"); 
    div.setAttribute("id","vin"); 
    div.innerHTML = "VIN "; 
    div.appendChild(input); 
    document.getElementById("insertinputs").appendChild(div); 
    checked2=true; 
    checked1=false; 
    document.getElementById('regnr').remove(); 
    } 
} 

關於5 - 你需要什麼樣的驗證？通常，服務器端使用Web表單進行驗證。 使用javaScript，您可以自行定義哪個輸入無效，並提示錯誤。

Answer 2

4。1）在點擊已經選中的單選按鈕時不應該出現 - 這是我的問題。它創造了另一個領域。

解決您的關於創建多個輸入的問題非常簡單。只需撥打您的功能onchange()而不是onclick()。該HTML應改爲如下所示：

<input type="radio" name="rb" id="raadio" onchange="dynInput(this);"> Eestis<br>

<input type="radio" name="rb" id="raadio2" onchange="dynInput(this);">Mujal

function dynInput(rb) { 
 
    if (document.getElementById('raadio').checked == true) { 
 
     var input = document.createElement("input"); 
 
     input.type = "text"; 
 
     input.value = "field1"; 
 
     input.name = "text-837"; 
 
     input.required = "true"; 
 
     var div = document.createElement("div"); 
 
     div.id = rb.name.id; 
 
     div.innerHTML = "REGNR " + rb.name.id; 
 
     div.appendChild(input); 
 
     document.getElementById("insertinputs").appendChild(div); 
 
    } 
 
    if (document.getElementById('raadio2').checked == true) { 
 
     var input = document.createElement("input"); 
 
     input.type = "text"; 
 
     input.value = "field2"; 
 
     input.name = "text-263"; 
 
     var div = document.createElement("div"); 
 
     div.id = rb.name; 
 
     div.innerHTML = "VIN " + rb.name.id; 
 
     div.appendChild(input); 
 
     document.getElementById("insertinputs").appendChild(div); 
 
    } 
 
    if (document.getElementById('raadio').checked == false) { 
 
     document.getElementById(rb.name.id).remove(); 
 
    } 
 
    if (document.getElementById('raadio2').checked == false) { 
 
     document.getElementById(rb.name).remove(); 
 
    } 
 
}

<div class="radio"> 
 
    <label for="Radios"> 
 
     <input type="radio" name="rb" id="raadio" onchange="dynInput(this);" />Eestis 
 
     <br/> 
 
     <input type="radio" name="rb" id="raadio2" onchange="dynInput(this);" />Mujal</label> 
 
</div> 
 
<p id="insertinputs"></p>

記住REGNR和VIN是在腳本underined變量。我假設你只是沒有發佈創建這些變量的代碼。