自動重新啓動一個新的輸入

Question

我想如果你在第一個id =「benodigheden」中做了一些事情，那就是有一些特定的事情，那麼第二個規則是id =「benodigheden」，我也找不到任何東西互聯網。我認爲你需要擁有java，但這是我的知識，但仍然太少。 我希望有人能幫助我。

這是我的HTML：

<form action="" method="post"> 
<legend>Neem contact op</legend> 
<table> 
    <tr> 
     <td> 
      <label for="Naam">Naam: </label> 
     </td> 
     <td> 
      <input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label for="Email">Email :</label> 
     </td> 
     <td> 
      <input type="email" id="Email"name="Email" placeholder="Email" required="required" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label for="Seizoen">Seizoen: </label> 
     </td> 
     <td>                 
      <select name="Seizoen" id="Seizoen" required> 
      <option value="">Kies hier je seizoen</option> 
       <option value="Lente">Lente</option> 
       <option value="Zomer">Zomer</option> 
       <option value="Herfst">Herfst</option> 
       <option value="Winter">Winter</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <hr /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label for="benodigheden1">Benodigheden:</label> 
     </td> 
     <td> 
      <input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label for="ingrediënten1">Ingrediënten:</label> 
     </td> 
     <td> 
      <input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label for="stappenplan">Stappenplanm:</label> 
     </td> 
     <td> 
      <textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <hr /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label for="Opmerking">Opmerking:</label> 
      </td> 
     <td> 
      <textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea> 
      </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
     <td> 
      <div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div> 
     </td> 
    </tr> 
</table> 

這裏是JSFiddle的鏈接。

Answer 1

如果我理解正確，您希望在其中輸入文本時出現額外的一行（規則？），並且這將發生在那些序號爲id的輸入中。

爲此，我建議你包括jQuery，並添加檢測輸入的變化，並在必要時增加了一個新的輸入，下一個可用序列號的腳本：

$(document).on('keyup change input', 'input, textarea', function() { 
    if (!$(this).val().replace(/\s/g, '').length) { 
     // no text entered, so don't add line 
     return; 
    } 
    var id = $(this).attr('id'); 
    // Extract name and linenumber from id 
    var res = id.split(/(\d+$)/); 
    if (res.length < 2) { 
     // No line number, so don't add line 
     return; 
    } 
    var newId = res[0] + (parseInt(res[1]) + 1); 
    if ($('#' + newId).length) { 
     // Not the last line, so don't add line 
     return; 
    } 
    // Add a line, and make it non-mandatory 
    $(this).clone() 
     .attr('id', newId).removeAttr('required') 
     .val('') 
     .insertAfter(this) 
     .before($('<br>')); 
}); 

雖然上面可以純做javascript它更麻煩，而且更難處理跨瀏覽器問題。

你可以看到它在這個fiddle的工作。