pass variable value in hidden text field in jquery

Question

Hey guys I want to pass variable pid value to hidden text field pid but unable to do so.

HTML code:

<div id="overlay_forma">
<h4>Another popup</h4>

<input id="addElement" type="button" value="Add to Form" />
<input id="removeElement" type="button" value="Remove" />
<form id="samplecode" name="samplecode" method="POST" action="<%= request.getContextPath() %>/AddProjectTaskDAO">
 <fieldset>
  <legend><b>&nbsp;&nbsp;&nbsp;Dynamically added form elements&nbsp;&nbsp;&nbsp;</b></legend>
  <div id="generatedForm">
   <div>
    <input id="processForm" type="submit" value="Submit to Process" />
   </div>  
  </div>
 </fieldset>
 </form>
 <center><a href="#" id="closea" >Close</a></center>
 </div>

jQuery code:

var counter = 1;

$("#addElement").click(function(event){

 var pid=$('#addElement').data('pid');
 var pname=$('#addElement').data('pname');

 if(counter>10){
     alert("Only 10 textboxes allow");
     return false;
}   

 var $newDiv = $(document.createElement('div'))

  .attr("id", 'TextBoxDiv' + counter);

 var $newInput = $("<label>Input Box: </label>" + "<input type='hidden' id='pid' name='pid' value='pid'>" + "<select name='uname'><c:forEach items='${ual}' var='u'><option value='<c:out value='${u.uname}'></c:out>'><c:out value='${u.uname}'></c:out></option></c:forEach></select>" + "<textarea rows='5' cols='15'></textarea>" + "<input type='text'>");
 $newInput
   .attr("name", "$('#addElement').data('pid')" + counter)
   .addClass("text")
   .attr("name", "uname" + counter)
   .addClass("text")
   .attr("name", "ptdesc_emp" + counter)
   .addClass("text")
   .attr("name", "ptestd_time_alloc" + counter)
   .addClass("text");
 $newInput.appendTo($newDiv);
 $newDiv.appendTo($("#generatedForm"));

 counter++;

 });

I have also tried adding $('#addElement').data('pid') instead of pid in val of hidden text field but still unable to show the output of pid.

Any help is appreciated.

Ehsan Sajjad updated with html code

Atiq
– Atiq

2014-06-04 07:53:56 +00:00
Commented Jun 4, 2014 at 7:53 — Atiq
– Atiq, Commented Jun 4, 2014 at 7:53

Shaunak D · Accepted Answer · 2014-06-04 08:04:43Z

1

Use '"+pid+"' - pid is variable.

<input type='hidden' id='pid' name='pid' value='"+pid+"'>

and not

<input type='hidden' id='pid' name='pid' value='pid'>

Replace with this line

var $newInput = $("<label>Input Box: </label>" + "<input type='hidden' id='pid' name='pid' value='"+pid+"'>" + "<select name='uname'><c:forEach items='${ual}' var='u'><option value='<c:out value='${u.uname}'></c:out>'><c:out value='${u.uname}'></c:out></option></c:forEach></select>" + "<textarea rows='5' cols='15'></textarea>" + "<input type='text'>");

Note :

In the code you are trying to append id='pid' stays there for every append event. This will result into duplicate IDs.

Working Fiddle.

edited Jun 4, 2014 at 8:04

answered Jun 4, 2014 at 7:32

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Atiq Over a year ago

shaunakde I replaced pid with "+pid+" it is still not working

Shaunak D Over a year ago

working in the fiddle. Inspect the hidden element in console : $('#pid').val()

Atiq Over a year ago

yup got it working thanks. I made changes over here .attr("name", "$('#addElement').data('pid')" + counter) and also "+pid+"

Collectives™ on Stack Overflow

pass variable value in hidden text field in jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related