CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Nathan
Nathan

Reputation: 509

Dynamic Ajax Form withsubmission

i am trying to build a customer list with using mysql,php and ajax. i currently have a list of customers displayed on the page and my end goal is to be able to create a new customer and edit the other customers on the same page.

i have a form for creating a new customer and then a form for each customer listed on the page its basically the same form as the new customer but with and id on the end of the name tags to make sure each name is different from the other and one updates and one creates see below

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<form  name='frm_details' id='frm_details' action=''>
<input type='text' class='form-control' name='box1' required>
<input type='text' class='form-control' name='box2' required>   
<input type='submit' value='Save' > 
</form>

<form  name='frm_details' id='frm_details' action=''>
<input type='text' class='form-control' name='box1_2465' required>
<input type='text' class='form-control' name='box2_2465' required>  
<input type='submit' value='Save' > 
</form>                             


    <script>
        $(function() {
            $('#frm_details').on('submit', function(event) {
                event.preventDefault();
                $.ajax({
                    url: '/limitless/functions2.php',
                    type: 'post',
                    dataType: 'json',                       
                    data: $(this).serialize(),
                      success: function(data) {
                           if(data.status == '1')
                            {
                                $('#info').addClass('alert alert-danger no-border').html(data.message);
                            } 
                           if(data.status == '2')
                            {
                                $('#info').addClass('alert alert-danger no-border').html(data.message);
                            }                               
                        }  
                });
            });
        });
    </script>

this works flawlessly for the creation of a new customer however when i submit the second form to edit the customer with the id in the name tag it fails to execute the ajax is there any chance someone could point out where i am going wrong if possible i would like to keep a single ajax request just with the form id changed $('#frm_details2465')

Upvotes: 0

Views: 44

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

1st: id must be unique as I said

2nd: you can change Ids like so

in html

<form  name='frm_details' id='frm_details1' action=''>
<form  name='frm_details' id='frm_details2' action=''>

in js

$('form[id^=frm_details]')

or you can use classes

<form  name='frm_details' class='frm_details' id='frm_details1' action=''>
<form  name='frm_details' class='frm_details' id='frm_details2' action=''>

and in js

$('form.frm_details')

Upvotes: 3

Related Questions