Sending data via Ajax from form

Question

I need to update row in database by id using Ajax.

My Form:

<form id="update_ajax">
     <input type="text" name="name" class="test_hide">
     <input type="hidden" name="id" value="<?php echo $row['id']; ?>">
     <input type="submit" value="<?php echo $row['id']; ?>" class="pure-button">
</form>

My Ajax function:

$("#update_ajax").on("submit", function () {
        var id = $(this).attr('id');
        var name = $(this).attr('name');
        var dataall={'id' : id, 'name' : name};
        $.ajax({
            type: "post",
            url: "update.php",
            data: dataall,
            success: function (data) {
                alert(data);
            }
        });
    });

And my php file is:

if ((isset($_GET['id'])) && (isset($_GET['name']))) {
    $id = $_GET['id'];
    $name = $_GET['name'];
}else{
    die("Not set");
}
$pdo = new PDO("mysql:host=localhost;dbname=test", "root", "8169x5it");
$query = $pdo->prepare("UPDATE test SET name=:name WHERE id=:id");
$query->bindParam(':name', $name);
$query->bindParam(':id', $id);
$query->execute();

And I have the error that my name value is not set in $_GET['name']. And I can't understand why it's not set. Because I send it in data.

$(this).attr('name') will be undefined, because the form doesn't have a name attribute. You want $("input[name=name]").val(). — Barmar
– Barmar, Commented Aug 25, 2016 at 21:17

Barmar · Accepted Answer · 2016-08-25 21:28:25Z

2

This is wrong:

var id = $(this).attr('id');
var name = $(this).attr('name');

$(this) is the form, so $(this).attr('id') is "update_ajax", not the value of the hidden input. And $(this).attr('name') is undefined because the form doesn't have a name=something attribute. What you really want is:

var id = $(this).find("input[name=id]").val();
var name = $(this).find("input[name=name]").val();

But you can simplify it all to:

var dataall = $(this).serialize();

serialize() will find all the inputs in the form and return a URL-encoded string containing all their values.

Finally, you either have to change the jQuery to use type: 'GET', or change the PHP to use $_POST instead of $_GET.

edited Aug 25, 2016 at 21:28

answered Aug 25, 2016 at 21:22

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

7 Comments

Denys Over a year ago

Thank you! Now I understand.

Denys Over a year ago

Why When I press update it's one time updates without reloading page and second time it not work without reloading? And I need to press F5 to update data.

Denys Over a year ago

It sometimes work and some time not. What it could be?

Barmar Over a year ago

The script should echo data that can be used to update the page, and the success: function should use it.

Barmar Over a year ago

The whole point of AJAX is that the page isn't reloaded. You have to write Javascript that makes the changes you want to the page.

|

Philip Rollins · Accepted Answer · 2016-08-25 21:26:04Z

0

What you have, http://api.jquery.com/attr/

What you wanted http://api.jquery.com/val/

Give that a shot, it should work doesn't look like any other errors in your source. If not let us know.

EDIT:

Also you change:

$(this).attr('id');
$(this).attr('name');

To

$("input[name=id]").val();
$("input[name=name]").val();

Or

$(this).serialize();

See https://api.jquery.com/serialize/ for the later

edited Aug 25, 2016 at 21:26

answered Aug 25, 2016 at 21:18

Philip Rollins

1,2899 silver badges20 bronze badges

1 Comment

Barmar Over a year ago

he also needs to change the selectors.

Collectives™ on Stack Overflow

Sending data via Ajax from form

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related