CODEWITHSUNDEEP
jqueryformsinput
Alsjka
Alsjka

Reputation: 55

jquery add either of two fields to form

I have worked out how to add a field to a form through JQuery but cannot figure out how to have two add field buttons so I can add one or the other fields? Could someone lead me in the right direction? 

 <html>
 <head>
 <title>jQuery add / remove textbox example</title>

 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

 <style type="text/css">
div{
    padding:8px;
}
</style>

</head>

<body>

<h1>jQuery add / remove textbox example</h1>

<script type="text/javascript">

$(document).ready(function(){

var counter = 2;

$("#addButton").click(function () {

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

var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >');

newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
 });

 $("#removeButton").click(function () {
if(counter==1){
      alert("No more textbox to remove");
      return false;
   }   

counter--;

    $("#TextBoxDiv" + counter).remove();

 });

 $("#getButtonValue").click(function () {

var msg = '';
for(i=1; i<counter; i++){
  msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
      alert(msg);
    });
    });
</script>
</head><body>

 <div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
    <label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
 </div>

--I am trying to have a use click on either of these two buttons and have the appropriate field added next.--

<input type='button' value='Add field #01' id='addButton'>
<input type='button' value='Add field #02' id='addButton'>
<input type='button' value='Remove Last Field' id='removeButton'>

</body>
</html>

Upvotes: 0

Views: 816

Answers (2)

super
super

Reputation: 2328

  • The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
  • Unlike the id selector, the class selector is most often used on several elements.

So modify your html as follows : 

<input type='button' value='Add field #01' class='addButton'>
<input type='button' value='Add field #02' class='addButton'>
<input type='button' value='Remove Last Field' id='removeButton'>

and then modify your script:

$(".addButton").click(function () {
    //code to append your data.
}

Check this Fidlle

Upvotes: 1

espnicholas
espnicholas

Reputation: 538

I would use something like this:

var $fieldexample = $('<input/>',{type:'Your Field Type',id:'fieldexample',value:'Your Value',name:'fieldexample'});

Then append it to the location you need:

$('.addButton').click(function() {
    $fieldexample.appendTo('#LOCATION');
});

Also the HTML needs to change, you should not be using two IDs for the same function and it's improper HTML in general. 

<input type='button' value='Add field #01' class='addButton'>
<input type='button' value='Add field #02' class='addButton'>
<input type='button' value='Remove Last Field' id='removeButton'>

Upvotes: 0

Related Questions