Submit checkbox value on form without page refresh AJAX PHP

Question

I just started learning ajax and its really great and time saving i agree.

But i got stuck at this point sending form data without page reload.

Below is my html code.

<form id="form4" method="post">
  <input type="checkbox" name="test" id="agreed" value="check">
  <br>
  <br>
  <input type="submit" id="form-submit" name="submit" value="Send">
  <p class="form-message"></p>
</form>

Below is my Ajax script

<script>
    $(document).ready(function() {
        $("#form4").submit(function(event) {
            event.preventDefault();
            var action = 'another_test';
            var agreed = $("#agreed").val();
            var submit = $("#form-submit").val();
            $(".form-message").load("test3.php", {
                test: agreed,
                submit: submit,
                action: action
            });
        });
    });
</script>

Below is my php code

<?php

  if (isset($_POST['action'])) {

        if ($_POST['action'] == 'another_test') {

            $test = $_POST["test"];
            $errorEmpty = false;


            if (!empty($test)) {
                echo "<p>Click the checkbox pls</p>";
                $errorEmpty = true;
            }

            else {
                echo "<p>Checkbox clicked</p>";
            }
        } else {
            echo "Error.. cant submit";
        }
    }

?>
<script>

    var errorEmpty = "<?php echo $errorEmpty ?>";
</script>

The php file is on another page called test3.php

This particular code works if it was an input text but doesn't work for a checkbox. Please help me so i can learn well. Thanks in advance.

.load() (as per the documentation performs a GET request, not a POST. To submit data, you'd be better to use $.post() — ADyson
– ADyson, Commented Nov 2, 2020 at 19:40
That's irrelevant to my point. Your PHP script is expecting a POST and you're sending it a GET. Whether that's a different script to the one that was loaded into the browser makes no difference to that fact. api.jquery.com/jquery.post is what you need to use. — ADyson
– ADyson, Commented Nov 2, 2020 at 19:52

ADyson · Accepted Answer · 2020-11-02 20:02:05Z

1

.load() (as per the documentation) performs a GET request, not a POST, but your PHP is (as shown by the $_POST references) expecting a POST request - and it usually makes sense to submit form data using POST.

So you'd be better to use $.post() - this will send a POST request. Then you can handle the response and load it into your "form-message" element in the "done" callback triggered by that request.

N.B. You could also make the code shorter by putting the "action" variable as a hidden field in the form, and then simply serialize the form in one command instead of pulling each value out separately.

Example:

HTML:

<form id="form4" method="post">
  <input type="checkbox" name="test" id="agreed" value="check">
  <br>
  <br>
  <input type="submit" id="form-submit" name="submit" value="Send">
  <input type="hidden" action="another_test"/>
  <p class="form-message"></p>
</form>

JavaScript

$(document).ready(function() {
    $("#form4").submit(function(event) {
        event.preventDefault();

        $.post(
          "test3.php", 
          $(this).serialize()
        ).done(function(data) { 
            $(".form-message").html(data);
        });
    });
});

Documentation:

jQuery Load

jQuery Post

jQuery Serialize

answered Nov 2, 2020 at 20:02

ADyson

62.9k16 gold badges85 silver badges99 bronze badges

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

2 Comments

Everything good Over a year ago

Thanks. Have Learnt something great from you.

ADyson Over a year ago

No problem. if the answer has helped please remember to mark it as "accepted" and / or leave an upvote - thanks :-)

Collectives™ on Stack Overflow

Submit checkbox value on form without page refresh AJAX PHP

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related