Re: [dancer-users] Getting param name of dynamically named <input> tag

10 Oct 2015

      On 09/10/15 22:02, Richard Reina wrote:
...
I have a input tag in a form:
<div class="col-xs-4 col-md-4">
    <div id="p_scents">
      <p>
               <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="email address" /></label>
      </p>
    </div>
  </div>
Which gets it's name from the JS function below. However, that name I can't figure out. I have tried
p_scnt_1 but it comes back undefined. Any ideas what the param name would be for each sequentially added item?
Here's a working example of the form:http://jsfiddle.net/jaredwilli/tzpg4/4/
$(function() {
         var scntDiv = $('#p_scents');
         var i = $('#p_scents p').size() + 1;
$('#addScnt').live('click', function() {
                 $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                 i++;
                 return false;
         });
$('#remScnt').live('click', function() {
                 if( i > 2 ) {
                         $(this).parents('p').remove();
                         i--;
                 }
                 return false;
         });
});
This code generates multiple input elements with the same id (p_scnt) - 
this is invalid HTML. There should only ever be one instance of any 
given id on any page. I suggest that you generate the id using similar 
logic to that which you use to generate the name.

Here's what I did to investigate what the names of your generated 
elements are:

* Opened http://jsfiddle.net/jaredwilli/tzpg4/4/ in Firefox
* Clicked 'Add another input Box' a couple of time.
* Selected all of the output frame from 'Add' to the last 'Remove'
* Right-clicked and selected 'View Selection Source'

I then got a new window containing the generated HTML. The important 
parts look like this (when lightly cleaned up:

<p>
<label for="p_scnts"><input id="p_scnt" size="20" name="p_scnt"
     value="" placeholder="Input Value" type="text"></label>
</p>
<p>
<label for="p_scnts"><input id="p_scnt" size="20" name="p_scnt_2"
     value="" placeholder="Input Value" type="text"></label>
<a href="#" id="remScnt">Remove</a>
</p>
<p>
<label for="p_scnts"><input id="p_scnt" size="20" name="p_scnt_3"
     value="" placeholder="Input Value" type="text"></label>
<a href="#" id="remScnt">Remove</a>
</p>

So you can see that the first input element has a name of "p_scnt", the 
second one has a name of "p_scnt_2" and the third one is "p_scnt_3".

Which is why you couldn't find one called "p_scnt_1". You never create 
one with that name.

Hope that helps,

Dave...

-- 
Dave Cross :: dave@dave.org.uk
http://dave.org.uk/
@davorg