How to send data from one form on a page with multiple forms through AJAX?

Question

index.php:

    <script>
$(document).ready(function(){
  $("form").submit(function(){
   var str = $(this).serialize();
  $.ajax({
     type: "POST",
     url:"do.php",
     data: $("form").serialize(), 

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

    <form action='do.php' method='post' id='toDo' name='toDo'>
        <input type='hidden' name='okok' value='one.txt'>
        <button type='submit' class='theButton'></button>
    </form>

    <form action='do.php' method='post' id='toDo' name='toDo'>
        <input type='hidden' name='okok' value='two.txt'>
        <button type='submit' class='theButton'></button>
    </form>

On the code above, there are 2 different forms - each with the same name. Each form has an input hidden tag with its own unique value relating to a specific file in the directory.

If the user clicks the submit button in any of the forms, the value of the input hidden tag that was in the form that the user clicked the submit button in will be sent to the file do.php.

As the values of the input hidden tags are names of a text file, once it is sent to do.php (which can be seen below), the contents of the file will be retrieved (the contents are all numbers). The value that is retrieved from the text file (which is a number) will increase by 1. The new value that increased by 1 will rewrite the old value and be stored in the text file.

do.php:

<?php
    $filename = $_REQUEST[okok];
    $content = file_get_contents($filename);
    preg_match("#\d+#", $content, $before_editing);
    $number_before = $before_editing[0];
    file_put_contents($filename, ++$number_before);

    $content = file_get_contents($filename);
    preg_match("#\d+#", $content, $after_editing);
    $number_after = $after_editing[0];   
?>

The code works perfectly without the AJAX script that I have included. With the AJAX script, only the value of the bottom form will be sent to do.php - so if I click submit on the first form, instead of sending the value one.txt, it'll send the value two.txt.

How would I fix the AJAX so that it works correctly?

this needs to be quoted `$_REQUEST[okok]` *for one thing* otherwise, [error reporting](http://php.net/manual/en/function.error-reporting.php) would throw an undefined okok constant warning. Plus, form does not bear the name attribute, only elements do. — Funk Forty Niner, Jun 16 '15 at 19:52
@Fred-ii- thanks for that, but how would I get the code to work? — , Jun 16 '15 at 19:54
you're welcome. Have a look at this Q&A http://stackoverflow.com/q/16638181/ it talks about using multiple forms. as does http://stackoverflow.com/q/4557628/ - Google "ajax multiple forms php" — Funk Forty Niner, Jun 16 '15 at 19:55
ids need to be unique in a page. and using the same name for elements is allowed but not really a good idea. I bet you could fix this just by changing the names and ids to be unique — Dan, Jun 16 '15 at 20:03
@Fred-ii- , thanks for the links but still can't get the thing to work. The form submits somehow but the data isn't sent through — , Jun 16 '15 at 20:06

ptkoz · Accepted Answer · 2015-06-16T20:11:48.617

Here is the problem:

data: $("form").serialize(),

This code finds and serializes all form elements in DOM, not just the one you wanted. Quick fix:

$(document).ready(function(){
    $("form").submit(function(){
        var str = $(this).serialize();
        $.ajax({
            type: "POST",
            url:"do.php",
            data: $(this).serialize(), // serialize only clicked form, not both
        });
        return false;
    });
});

Note that there are various security issues in your code, including path traversal vulnerability.

How to send data from one form on a page with multiple forms through AJAX?

1 Answers1