Getting param name of dynamically named <input> tag
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; }); });
To me, that seems to be able to add several tags with the same id - I think that is harmful... Den 2015-10-09 kl. 23:02, skrev Richard Reina:
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; }); });
2015-10-09 16:12 GMT-05:00 Christian Huldt <christian@solvare.se>:
To me, that seems to be able to add several tags with the same id - I think that is harmful...
Den 2015-10-09 kl. 23:02, skrev Richard Reina:
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; }); });
I don't think it adds the tags with the same name because when I test the params the first p_scnt comes through as the first value added. If the tags were being added with the same name I would think that either 1) they would be string with both values or 2) the last input would override the previous input. Since param('p_scnt') equals the first value entered neither of those outcomes are occurring.
Most browsers have functionality for web development that allows you to examine a page, view the generated markup, and so on. In FireFox, for example, it's under Tools > Web Developer > Inspector, or in Chrome, it's under View > Developer > Developer Tools. You can zero in on the form and the elements generated by this bit of javascript to find out the input names. On 9 October 2015 at 14:32, Richard Reina <gatorreina@gmail.com> wrote:
2015-10-09 16:12 GMT-05:00 Christian Huldt <christian@solvare.se>:
To me, that seems to be able to add several tags with the same id - I think that is harmful...
Den 2015-10-09 kl. 23:02, skrev Richard Reina:
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; }); });
I don't think it adds the tags with the same name because when I test the params the first p_scnt comes through as the first value added. If the tags were being added with the same name I would think that either 1) they would be string with both values or 2) the last input would override the previous input. Since param('p_scnt') equals the first value entered neither of those outcomes are occurring.
_______________________________________________ dancer-users mailing list dancer-users@dancer.pm http://lists.preshweb.co.uk/mailman/listinfo/dancer-users
Den 2015-10-09 kl. 23:32, skrev Richard Reina:
2015-10-09 16:12 GMT-05:00 Christian Huldt <christian@solvare.se <mailto:christian@solvare.se>>:
To me, that seems to be able to add several tags with the same id - I think that is harmful...
Den 2015-10-09 kl. 23:02, skrev Richard Reina: > 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; > }); > });
I don't think it adds the tags with the same name because when I test the params the first p_scnt comes through as the first value added. If the tags were being added with the same name I would think that either 1) they would be string with both values or 2) the last input would override the previous input. Since param('p_scnt') equals the first value entered neither of those outcomes are occurring.
No, you dealt with the names, but not with the ids. That's my only input so far. Isn't there a way to get param as a hash, so you could just use keys to get what you want?
On 09/10/15 22:32, Richard Reina wrote:
2015-10-09 16:12 GMT-05:00 Christian Huldt <christian@solvare.se <mailto:christian@solvare.se>>:
To me, that seems to be able to add several tags with the same id - I think that is harmful...
I don't think it adds the tags with the same name
Hi didn't say "name", he said "id". Names and IDs are different things in HTML. IDs have far stricter rules than names. Dave... -- Dave Cross :: dave@dave.org.uk http://dave.org.uk/ @davorg
2015-10-10 3:36 GMT-05:00 Dave Cross <dave@dave.org.uk>:
On 09/10/15 22:32, Richard Reina wrote:
2015-10-09 16:12 GMT-05:00 Christian Huldt <christian@solvare.se <mailto:christian@solvare.se>>:
To me, that seems to be able to add several tags with the same id - I think that is harmful...
I don't think it adds the tags with the same name
Hi didn't say "name", he said "id". Names and IDs are different things in HTML. IDs have far stricter rules than names.
Dave...
-- Dave Cross :: dave@dave.org.uk http://dave.org.uk/ @davorg
Hello all, Sorry for the tardy reply. Dave, thank you for your insightful advice. It was your observation that p_scnt jumps to 2 that helped me to capture the email addresses with the following code: my $i = 2; my @recipients = param('p_scnt'); my $recipient; my $sbj = param('sbj'); my $msg = param('edited_msg'); while (param("p_scnt_$i")) { push(@recipients, param("p_scnt_$i")); $i++; } I did not modified the JS code so that it generates multiple IDs -- I simply left it as is. This works for my needs because these email address are merely being captured, validated and then used to send an email announcement by the user -- they are not being saved or otherwise processed in any other way. As long as it works is it okay not to fix it? Thanks
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
participants (4)
-
Amelia Ireland -
Christian Huldt -
Dave Cross -
Richard Reina