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 would throw an undefined okok constant warning. Plus, form does not bear the name attribute, only elements do. — Funk Forty Niner
– Funk Forty Niner, Commented Jun 16, 2015 at 19:52
@Fred-ii- thanks for that, but how would I get the code to work? — user4061223
– user4061223, Commented Jun 16, 2015 at 19:54
you're welcome. Have a look at this Q&A stackoverflow.com/q/16638181 it talks about using multiple forms. as does stackoverflow.com/q/4557628 - Google "ajax multiple forms php" — Funk Forty Niner
– Funk Forty Niner, Commented Jun 16, 2015 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
– Dan, Commented Jun 16, 2015 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 — user4061223
– user4061223, Commented Jun 16, 2015 at 20:06

ptkoz · Accepted Answer · 2015-06-16 20:11:48Z

1

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.

edited Jun 16, 2015 at 20:11

answered Jun 16, 2015 at 20:10

ptkoz

2,5372 gold badges21 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related