Insert data into Database without reloading the page (PHP + Jquery)

Question

Here is my code:

<form action='insert.php' method='post' id='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button id='insert'>Insert</button>
    <p id='result'></p>
    <script src='insert.js'></script>
</form>

<form action='insert.php' method='post' id='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button id='insert'>Insert</button>
    <p id='result'></p>
    <script src='insert.js'></script>
</form>

<form action='insert.php' method='post' id='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button id='insert'>Insert</button>
    <p id='result'></p>
    <script src='insert.js'></script>
</form>

Here is: insert.js

$('#myform').submit(function(){
    return false;
});

$('#insert').click(function(){
    $.post(     
        $('#myform').attr('action'),
        $('#myform :input').serializeArray(),
        function(result){
            $('#result').html(result);
        }
    );
});

The Problem:

Only the code inside first <form></form> tag works. If i click on submit button of other<form></form> tags, then I get re-directed to insert.php file.

What is the problem? If it is related to same id thing, then I would not like to add different id's. for each new form

[ID's Must Be Unique](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme), specifically because it will cause problems in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) and CSS when you try to interact with those elements. — Jay Blanchard, Jul 18 '17 at 14:21
[Have you watched the AJAX request / response in the browser's developer tools? Have you included the jQuery library in the project? Are there any errors reported? Are you running this on a web-server?](http://jayblanchard.net/basics_of_jquery_ajax.html) — Jay Blanchard, Jul 18 '17 at 14:21
@JayBlanchard should they be only unique within a form, rather a page (as a whole)? — JustBaron, Jul 18 '17 at 14:23
This is not correct way to do this. You should use ajax, you should include insert.js only once, id should be unique in a page, And on click event of submit button, you should not do return false. Instead you should write an ajax funciton with e.preventDefault(); — Himanshu Upadhyay, Jul 18 '17 at 14:25
I tried using `class`, but it is not working. This is how I replace class in Jquery code right? `$('.myform')` any syntax error? — Toby, Jul 18 '17 at 14:27
Whoever edited changes to the OP's code, don't do that as it changes the nature of the question and leaves out key information to a solution. — Jay Blanchard, Jul 18 '17 at 14:47

Jay Blanchard · Answer 1 · 2017-07-18T14:59:30.257

0

ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements.

Assuming you load insert.js once into the page:

<form action='insert.php' method='post' class='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

<form action='insert.php' method='post' class='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

<form action='insert.php' method='post' class='myform' >
    <input type='hidden' name='tmdb_id'/>
    <button class='insert'>Insert</button>
    <p class='result'></p>
</form>

Once you have that done you can use a single jQuery function to handle all of the forms:

$(function() {
    $('.insert').click(function(e){
        e.preventDefault();
        $.post(     
            $(this).closest('.myform').attr('action'),
            $(this).closest('.myform :input').serializeArray(),
            function(result){
                $(this).closest('.myform').find('.result').html(result);
            }
        );
    });
});

You do have to do some DOM traversal to get the form elements related to the insert button.

$(this).closest('.myform') finds the parent of the insert button
$(this)closest(.myform').find('.result') finds the child element with the class of 'result' to add the results to.

edited Jul 18 '17 at 14:59

answered Jul 18 '17 at 14:35

Jay Blanchard

34,243
16
77
119

It re-directs me to insert.php (even the first form) sir – Toby Jul 18 '17 at 14:41
1

check syntax errors – charlietfl Jul 18 '17 at 14:42
everything is correct sir – Toby Jul 18 '17 at 14:43
I made a mistake on syntax @Toby, on this line `$(this).closest('.myform').find('.result').html(result);` which I have now corrected. – Jay Blanchard Jul 18 '17 at 14:45
Still same problem – Toby Jul 18 '17 at 14:47
Try adding `preventDefault()` as I have done in the updated code. `$('.insert').click(function(e){ e.preventDefault();` – Jay Blanchard Jul 18 '17 at 14:49
Same problem sir – Toby Jul 18 '17 at 14:51
Is the code enclosed in a document ready handler? – Jay Blanchard Jul 18 '17 at 14:53

score 0 · Answer 2 · answered Jul 18 '17 at 14:37

0

You don't need multiple instances of insert.js

Use common classes for all the forms and elements instead of duplication of ID's.

We can also use the submit event to post the data

HTML

<form action='insert.php' method='post' class='myform'>
  <input type='hidden' name='tmdb_id' />
  <button class='insert'>Insert</button>
  <p class='result'></p>

</form>

<form action='insert.php' method='post' class='myform'>
  <input type='hidden' name='tmdb_id' />
  <button class='insert'>Insert</button>
  <p class='result'></p>

</form>
<!-- load once per page -->
<script src='insert.js'></script>

JS

$('.myform').submit(function(){
    // `this` is the instance of myForm class the event occurred on
    var $form = $(this),
        url = $form.attr('action'),
        data = $form.serializeArray(); // or use serialize() which is more common

    $.post( url, data, function(result){
         // look inside this form instance for element to populate
         $form.find('.result').html(result);
     });

    return false;
});

answered Jul 18 '17 at 14:37

charlietfl

170,828
13
121
150

It re-directs me to insert.php (even the first form) sir – Toby Jul 18 '17 at 14:43
Make sure code is wrapped in `$(function(){ /* code here */})` and check browser console for any errors thrown – charlietfl Jul 18 '17 at 14:44
Yes, it is sir. – Toby Jul 18 '17 at 14:57
Here's a working demo https://jsfiddle.net/nd6r20wt/1 – charlietfl Jul 18 '17 at 14:57
WOW, Why it is not working with me? Make a `.html` file and copy/paste this code: https://jsfiddle.net/nd6r20wt/2/ Is it working for u? – Toby Jul 18 '17 at 15:06
Did you include jQuery.js and before `insert.js`? What errors do you see in your browser console? – charlietfl Jul 18 '17 at 15:06
Yes, i include, it just re-directs me to `/echo/html/`, no errors – Toby Jul 18 '17 at 15:08
Something else must be different. Works fine for me – charlietfl Jul 18 '17 at 15:09
It is working in fiddle, but If i copy/paste the exact same code, it do not work. Nvm, this is problem from my side, i guess – Toby Jul 18 '17 at 15:11
Try `alert($('.myform').length)` outside of the `submit()` .. should not be zero – charlietfl Jul 18 '17 at 15:13
This is the query, i should use right? `` – Toby Jul 18 '17 at 15:15
The alert box echo 2. But nothing happens when i click insert – Toby Jul 18 '17 at 15:15
*"nothing happens"* is different than "it redirects to `insert.php`" – charlietfl Jul 18 '17 at 15:18
add a `fail()` handler to `$.post` – charlietfl Jul 18 '17 at 15:19
yes, nothing happens here. let me add – Toby Jul 18 '17 at 15:36

Dhaval Bharadva · Answer 3 · 2017-07-18T14:33:06.163

-2

Try something like below using jQuery Ajax:

$(".submit-button-class").click(function() {
  var formData = $(this).closest('form').serialize();
  $.ajax({
    type: "POST",
    url: "YOUR URL",
    data: formData,
    dataType: 'json',
    beforeSend: function() {
      //show loading image while processing
    },
    success: function(resp) {
      // do something here
    },
    error: function(e) {
      alert('error: ' + JSON.stringify(e));
    }
  });
});

Note: you should use class selector instead of id selector for submit button

edited Jul 18 '17 at 14:33

answered Jul 18 '17 at 14:28

Dhaval Bharadva

3,053
2
24
35

Same error as mentioned in the question. Only first form works. – Toby Jul 18 '17 at 14:29
@Toby please check my `Note` in answer. use class selector instead of id selector – Dhaval Bharadva Jul 18 '17 at 14:34
While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Jay Blanchard Jul 18 '17 at 14:36
Same problem, if I keep this class `$(".submit-button-class")`, If i replace it with `myform` class. Even the first form redirects me to insert.php + all the forms get echo'ed again (total 6 form) before redirect – Toby Jul 18 '17 at 14:39
@Toby you should add `submit-button-class` to your `` – Dhaval Bharadva Jul 18 '17 at 14:42
Now the first form also re-directs me to insert.php page – Toby Jul 18 '17 at 14:50
Why does the OP need to add a new class? And why can't they use the `$.post` AJAX shorthand? – Jay Blanchard Jul 18 '17 at 14:55
I don't know how $.post works, but I will try to google it, thanks. @JayBlanchard – Toby Jul 18 '17 at 14:56
@Toby you're already using that function. I was asking this answerer why he wanted you to change something which works perfectly fine for your purposes. – Jay Blanchard Jul 18 '17 at 14:57

Insert data into Database without reloading the page (PHP + Jquery)

3 Answers3