Databases
StackOverflow2013
Postsdbo
POJavascript add textfield button doesn't work properly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript add textfield button doesn't work properly
    text
    copied!<p>I have made the following code</p> <p>HTML:</p> <pre><code>&lt;form method="post" id="myemailform" name="myemailform" action="form-to-email.php"&gt; &lt;div id="form_container"&gt; &lt;label class="description" for="pax"&gt;Number:&lt;/label&gt; &lt;div&gt; &lt;select class="select small" id="pax" name="pax"&gt; &lt;option value="" selected="selected"&gt;&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;option value="7"&gt;7&lt;/option&gt; &lt;option value="8"&gt;8&lt;/option&gt; &lt;option value="9"&gt;9&lt;/option&gt; &lt;option value="10"&gt;10&lt;/option&gt; &lt;option value="11"&gt;11&lt;/option&gt; &lt;option value="12"&gt;12&lt;/option&gt; &lt;option value="13"&gt;13&lt;/option&gt; &lt;option value="14"&gt;14&lt;/option&gt; &lt;option value="15"&gt;15&lt;/option&gt; &lt;option value="16"&gt;16&lt;/option&gt; &lt;option value="17"&gt;17&lt;/option&gt; &lt;option value="18"&gt;18&lt;/option&gt; &lt;option value="19"&gt;19&lt;/option&gt; &lt;option value="20"&gt;20&lt;/option&gt; &lt;option value="21"&gt;21&lt;/option&gt; &lt;option value="22"&gt;22&lt;/option&gt; &lt;option value="23"&gt;23&lt;/option&gt; &lt;option value="24"&gt;24&lt;/option&gt; &lt;option value="25"&gt;25&lt;/option&gt; &lt;option value="26"&gt;26&lt;/option&gt; &lt;option value="27"&gt;27&lt;/option&gt; &lt;option value="28"&gt;28&lt;/option&gt; &lt;option value="29"&gt;29&lt;/option&gt; &lt;option value="30"&gt;30&lt;/option&gt; &lt;option value="31"&gt;31&lt;/option&gt; &lt;option value="32"&gt;32&lt;/option&gt; &lt;option value="33"&gt;33&lt;/option&gt; &lt;option value="34"&gt;34&lt;/option&gt; &lt;option value="35"&gt;35&lt;/option&gt; &lt;option value="36"&gt;36&lt;/option&gt; &lt;option value="37"&gt;37&lt;/option&gt; &lt;option value="38"&gt;38&lt;/option&gt; &lt;option value="39"&gt;39&lt;/option&gt; &lt;option value="40"&gt;40&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;label class="description"&gt;ID:&lt;/label&gt; &lt;input type='text' id="idpl" class="id-text-len" name='ids1' placeholder="ID #1"&gt; &lt;input class="btn btn-primary" type='button' id='btnMore' value='Add Ids'&gt; &lt;/form&gt; </code></pre> <p>js:</p> <pre><code>jQuery(function ($) { $('#btnMore').click(function () { var form, fields, newField; var e = document.getElementById("pax"); var strUser = e.options[e.selectedIndex].text; form = $("#myemailform"); for (var i = 1; i &lt; strUser; i++) { fields = form.find("input[name^='ids']"); newField = $(fields[0]).clone(); newField.attr('name', 'ids' + (fields.length + 1)); newField.attr('placeholder', 'ID #' + (fields.length + 1)); newField.insertAfter(fields.last()); } }); }); </code></pre> <p>You can see the <a href="http://jsfiddle.net/7QUea/1/" rel="nofollow">jsfiddle</a> .</p> <p>What i want is when i click on the button to add fields, not add more on the existing but new. </p> <p>I mean e.g. first time i click 10 and then add, as a results i'll get 10 textfields. Then if i click 14 i don't want to get 10+14=24 textfields but 4 more, i want 14textfields.</p> <p>I haven't made it up to do that. Please someone help me by code, in general i know why that's happening but i don't know how to solve that.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload