Target correct form input values, while using multiple forms on same the page -PHP AJAX JQUERY

Question

I have a table which is generated by a php function in which, each row contains an Action Button which is actually a form containing hidden data. I want to be able so when I click on the action button, data from the hidden input values is passed to an AJAX call.

Here's what I have so far: (this current code is selecting data from the 1st form no matter if the user clicks on the 2nd form action button)

The Table containing the Forms

<table class="table">
    <thead>
        <tr>
            <th>Card Type</th>
            <th>Name on Card</th>
            <th>Number</th>
            <th>Expires</th>
            <th>CVC</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>VISA</td>
            <td>testname testlname</td>
            <td>xxxxxxxxxxxx9999</td>
            <td>12 / 15</td>
            <td>123</td>
            <td>
                <form method="post" class="scc">
                    <input type="hidden" value="VISA" name="scc_ccType1" id="scc_ccType1">
                    <input type="hidden" value="testname testlname" name="scc_ccOwner1" id="scc_ccOwner1">
                    <input type="hidden" value="4444777711119999" name="scc_ccNumber1" id="scc_ccNumber1">
                    <input type="hidden" value="12" name="scc_ccExpiresMt" id="scc_ccExpiresMt">
                    <input type="hidden" value="15" name="scc_ccExpiresYr" id="scc_ccExpiresYr">
                    <input type="hidden" value="123" name="scc_ccCVC1" id="scc_ccCVC1">
                    <input type="submit" value="Select Card" name="select_scc" id="select_scc">
                </form>
            </td>
        </tr>
        <tr>
            <td>VISA</td>
            <td>testname testlname</td>
            <td>xxxxxxxxxxxx1111</td>
            <td>12 / 15</td>
            <td>123</td>
            <td>
                <form method="post" class="scc">
                <input type="hidden" value="VISA" name="scc_ccType1" id="scc_ccType1">
                <input type="hidden" value="testname testlname" name="scc_ccOwner1" id="scc_ccOwner1">
                <input type="hidden" value="4444555566661111" name="scc_ccNumber1" id="scc_ccNumber1">
                <input type="hidden" value="12" name="scc_ccExpiresMt" id="scc_ccExpiresMt">
                <input type="hidden" value="15" name="scc_ccExpiresYr" id="scc_ccExpiresYr">
                <input type="hidden" value="123" name="scc_ccCVC1" id="scc_ccCVC1">
                <input type="submit" value="Select Card" name="select_scc" id="select_scc">
                </form>
            </td>
        </tr>
    </tbody>
</table>

The Jquery Code

<script defer="defer" type="text/javascript">
$(document).ready(function() {
    $("#select_scc").live("click", function() {

        var postData = {
        'authorize'     : 2 ,
        'cc_type'                       : $("#scc_ccType1").val(),
        'cc_number'                     : $("#scc_ccNumber1").val(),
        'cc_expdate_month'              : $("#scc_ccExpiresMt").val(),
        'cc_expdate_year'               : $("#scc_ccExpiresYr").val(),
        'cc_security_code'              : $("#scc_ccCVC1").val(),
        'owner'                         : $("#scc_ccOwner1").val(),

        };

        $.ajax({
                url: "<?php echo base_url().'admin/creditcard';?>",
                type:'POST',
                data: postData,
                dataType: 'json',
                success: function(scard){
                    alert(scard);
                }
        });

        return false;
    });
});
</script>

Not the most elegant solution, but change the ID on one of your forms, an ID must be unique, and can not be used twice in the same document. Then just add the JS needed for the second ID. Also, if using jQuery 1.7+ .live() is deprecated and should be replaced with .on() and depending on what you intend to do, you should probably .serialize() your forms instead of what you are doing now? — adeneo
– adeneo, Commented Mar 4, 2012 at 17:48
I would not put a credit card number or the CVC code in plain text anywhere on that page. That should only be queried from a database, that is hopefully encrypted, on the back end. — Nathan Loding
– Nathan Loding, Commented Mar 4, 2012 at 17:57
thanks for commenting, this for a back end, all data is encrypted, changed the IDs to classes, this was an error on my end. How can I push new array keys and values after serializing? — Daniel Adarve
– Daniel Adarve, Commented Mar 4, 2012 at 18:36

ninja · Accepted Answer · 2012-03-04 17:49:01Z

1

First off ids need to be unique, so perhaps change the php generating them to add "select_scc" as a class instead.

Then do somethinbg like this:

$('submit#select_scc').on('click', function() {
    var $this = $(this); // caches $(this), which is the select_scc element.

    // Now to get each value for the form that the user clicked on.
    var postData = {
           'cc_type' : $this.siblings('#scc_ccType1').val(),
           'cc_number' : $this.sibling('#scc_ccNumber1').val(),
           // ........ etc
        };

        // now just run the ajax function as you are doing.
});

Maybe you will have problems with this click function if "select_scc" is not generated when the user clicks, then just bind the function to an element which already is there. For example say everything that is generated is inside a pre-defined div called "#container", then write the click function like this:

$('#container').on('click', 'submit#select_scc', function () {
});

.live is deprecated and just points to the .on function, so just using .on directly will save you some load time.

answered Mar 4, 2012 at 17:49

ninja

2,2831 gold badge15 silver badges16 bronze badges

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

2 Comments

Daniel Adarve Over a year ago

Thanks for answering, im getting an error which says $this.sibilings is not a function

ninja Over a year ago

did you cache $this first? See line 2 in my code. Other than that I saw that I did a typo on 'cc_number', should be .siblings() not .sibling().

charlietfl · Accepted Answer · 2012-03-04 18:00:22Z

1

Here is a much simpler approach using the class of form as selector, ID's won't matter. Using serialize() save having to create the whole data object manually.

live() is deprecated but I don't know what version of jQuery you are using so am sticking with it for now

$(function(){

$('form.scc').live('submit',(function(){
    var postData = $(this).serialize();
    $.ajax({
            url: "<?php echo base_url().'admin/creditcard';?>",
            type:'POST',
            data: postData,
            dataType: 'json',
            success: function(scard){
                alert(scard);
            }
    });

    return false;
});

});

answered Mar 4, 2012 at 18:00

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Daniel Adarve Over a year ago

Thanks for answering, what If I want to include some hardcoded array keys and values into this postData array, how can i do that after using serialize(); ???

charlietfl Over a year ago

simple way would be urlencode them and concatenate to postData...look at result of serialize api.jquery.com/serialize

Collectives™ on Stack Overflow

Target correct form input values, while using multiple forms on same the page -PHP AJAX JQUERY

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related