创建可重用的 java 脚本代码

Question

Form sample , Error sample My Scenario is when clicking ADD VEHICLE button means it will generate new input boxes,i tried to reuse a same java script to generate the input text boxes,i tried using ID,

   var wrapper         = $("#vehiclegroupid"); //Fields wrapper
   var add_button      = $("#addvehicleBtnid"); //Add button ID  

it will supports only for the particular place,

if i tried to use class name

 var wrapper         = $(".summa"); //Fields wrapper
  var add_button      = $(".summa2"); //Add button ID

it will disturbs other related components..Here is sources

HTML

<!-- Two Wheeler -->
<div class="form-group" id="vehiclegroup">
<label for="vehicleid">Add Two Wheeler(s) Details</label>
<div id="vehiclegroupid" class="summa"></div>
<input type="button" id="addvehicleBtnid" value="Add Vehicle" class="form-control col-md-2 summa2"></input>
</div>

<!-- Four Wheeler -->
<div class="form-group" id="fourvehiclegroup">
<label for="vehicleid">Add Four Wheeler(s) Details</label>
<div id="vehiclegroupid2" class="summa"></div>
<input type="button" id="addvehicleBtnid2" value="Add Vehicle" class="form-control col-md-2 summa2"></input>
</div>

JavaScript

/**
 * This is especially for adding input fields for entering co-owner details
 */

$(document).ready(function() {
    var max_fields      = 5; //maximum input boxes allowed
   // var wrapper         = $("#vehiclegroupid","#vehiclegroupid2"); //Fields wrapper
  //  var add_button      = $("#addvehicleBtnid","#addvehicleBtnid2"); //Add button ID
  var wrapper         = $(".summa"); //Fields wrapper
  var add_button      = $(".summa2"); //Add button ID
    var x = 0; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment now x=1 after x++ x=2,so next code 2%2==0 is true


        $(wrapper).append('<div class="form-row">'          
                +'<!-- Vehicle Name -->'
                +'<div id="TextBoxDiv'+x+'" class="form-group col-md-4">'
                +'<label for="cowner'+x+'">Vehicle Name</label>'
                +'<input id="cowner'+x+'" type="text" value="" class="form-control" placeholder="Enter Name"></input>'
                +'</div>'

                +'<!-- Vehicle Registration Number -->'
                +'<div class="form-group col-md-4">'
                +'<label for="oph'+x+'">Vehicle Registration Number</label>'
                +'<input id="oph'+x+'" type="text" value="" class="form-control" placeholder="Ex (TN 99 AD 9999)"></input>'
                +'</div>'


                    +'<a href="#"class="remove_field col-md-1"> X </a>'
                    +'</div>');

        }
        else{
            alert("Sorry..!You Cannot Add More Than 5 Vehicles");
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

Please help me to make reusable script code...Thanks in advance

Answer 1

If I'm understanding correctly, what you have is a repeated group of elements which includes a button and you're attempting to have a single click handler which, when clicking a button, it affects only that local group and not all of the repeated groups.

You can achieve this by combining your selectors with some DOM traversal. You can still have a single handler, it just needs to more specifically identify the target based on what was clicked.

Currently your logic within your handler is:

Find all matching .summa elements. Append the new HTML.

Instead, you want this:

From this , find the nearest .summa element. Append the new HTML.

this of course is the button which was clicked. One way to find the "nearest" in this case is to traverse up to the closest common parent element and then find the target element within that.

Something like this:

$('.summa2').click(function(e){
    var wrapper = $(this).closest('div.form-group').find('.summa');

    // the rest of your click handler code
});

So starting from this (which is the button that gets clicked) the selector traverses "up" to the closest div.form-group (which is the overall repeated container) and then traverses back "down" to the target .summa (which is the target div within that group).

---

Update: And, of course, since your later click handler was relying on the wrapper variable it can now no longer do that. Just use the selector directly instead of the variable:

$('.summa').on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})