Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I associate button events with a unique control?

I have this form http://jsfiddle.net/thiswolf/XDsSt/ with four identical inputs and buttons.The problem is,each section is updates its own unique data in the database so when updating,its important the submit button i click updates the database with the input from that section only.

My function is

$(document).ready(function() {
          $(".xx").live('click', function(){
         alert('clicked');
         });
        });

How do i make sure the button click is unique to that section?.

like image 965
Gandalf Avatar asked Feb 02 '26 12:02

Gandalf


2 Answers

Use an ID value instead for each input button. This way, jQuery can identify it like so:

$('#button_tag');

HTML:

<html>
    <head></head>
    <body>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn1" type="submit" class="xx" value="Submit">
        </section>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn2" type="submit" class="xx" value="Submit">
        </section>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn3" type="submit" class="xx" value="Submit">
        </section>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn4" type="submit" class="xx" value="Submit">
        </section>
    </body>

</html>

Javascript:

$(document).ready(function () {
    $(".xx").live('click', function () {
        alert('clicked ' + $(this).attr('id'));
    });
});

JsFiddle:

http://jsfiddle.net/XDsSt/7/

like image 92
Daniel Li Avatar answered Feb 05 '26 00:02

Daniel Li


Get the corresponding section that button belongs to . Then access the elements inside that. You may use the jQuery closest()/parent()(if only one layer of hierarchy of controls) function for that.

$(document).ready(function() {
     $(".xx").live('click', function(e){
       e.preventDefault();  //if you want to prevent normal form submit
       var item=$(this);
       var sectionClicked=item.closest("section");
       //Let's alert the first text box   
       alert(sectionClicked.find("input").first().val());
       //do whatever with the items belongs the current section

     });
});

Sample : http://jsfiddle.net/XDsSt/8/

I recommend you to switch to jQuery on instead of live as it is deprecated.

like image 42
Shyju Avatar answered Feb 05 '26 00:02

Shyju



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!