Using jquery to load external php file?

Question

Forgive me for asking such a basic question, but I have tried and failed many times trying to figure out what's wrong. I have a very simple html form consisting of one checkbox. I would then like to use jquery to load an external php file onto the same page as the form in the 'content' div, so that the form is clearly updateable. The php file is simply a check to see whether the checkbox was checked and to return the result on screen. Here is the html:

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#submitbutton").click(function(){
    $("#content").load("loadedpage.php");
    return false;
  });
});
</script>
</head>

<body>
<form id="testform" action="" method="post">

<input type="checkbox" id="checkbox1" name="checkbox1" value="testcheckbox">Check this box:</input>
<input type="submit" id="submitbutton" name="submitbutton" value="Submit">
</form>

<div id="content">

</div>

</body>
</html>

And here is the external php file:

<?php

    if(empty($_POST["checkbox1"]))
    {
        echo "box wasn't checked";
    }
    else
    {
        echo "box was checked";
    }

?>

My problem is that no matter whether the checkbox is ticked, the php will return "the box wasn't checked", however, when I have passed this form to the php file through the 'action' attribute everything works as it should, therefore I know the error is probably in the jquery. If anyone could shed some light I would be very grateful.

i mean.. you've done nothing that would result in that .load call sending over the checkbox state. — user400654
– user400654, Commented Jan 28, 2019 at 19:34
Using jQuery's .load() doesn't pass along any POST params. It sends a GET request for the resource, resulting in $_POST being empty on the server. You need to use $.ajax instead, then do something with the server's reply in the success method. — user5734311
– user5734311, Commented Jan 28, 2019 at 19:34

Yunus Aslam · Accepted Answer · 2019-01-28 19:40:22Z

1

Your approach is wrong. You can do that using Jquery.

$(document).on("click", "#submitbutton", function(e){
    e.preventDefault(); // To stop form from submitting
    if($('#checkbox1').is(":checked")){
        $("#content").html("Checkbox is checked");
        $("#testform").submit();
    }else{
        $("#content").html("Checkbox is not checked");
    }
});

answered Jan 28, 2019 at 19:40

Yunus Aslam

2,4764 gold badges28 silver badges43 bronze badges

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

Comments

Oscar Calderon · Accepted Answer · 2019-01-28 19:39:06Z

0

You need to send checkbox value in the request that is being made in .load() like this:

$(document).ready(function(){
  $("#submitbutton").click(function(){
    $("#content").load("loadedpage.php", {checkbox1: document.querySelector('#checkbox1').checked });
    return false;
  });
});

answered Jan 28, 2019 at 19:39

Oscar Calderon

1,0193 gold badges15 silver badges33 bronze badges

Comments

The Developer · Accepted Answer · 2019-01-28 20:09:41Z

0

$("#submitbutton").click(function(event){
    if ($("#checkbox1").is(':checked') === false) {
      $("#content").load("loadedpage.php");
    } else {
      $("#content").load("loadedpage.php", { checkbox1: true });
    }

    return false;
  });

or

$("#submitbutton").click(function(event){
    $("#content").load("loadedpage.php", { checkbox1: $("#checkbox1").is(':checked') ? true : null });
    return false;
  });

You're checking for empty in your loadedpage.php instead you can check for true and false.

answered Jan 28, 2019 at 20:09

The Developer

11 bronze badge

Collectives™ on Stack Overflow

Using jquery to load external php file?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related