How Submit Form Without Refreshing A page which doesnt have any input?

Question

I already have everything pre-defined in the script. What I want to do is when I click on SUBMIT it will do the work without refreshing the page. Currently it refreshes the page and shows "Working". What I am trying to do is something like this:

Here is my code:

    <?php
$url="http://google.com";

if(isset($_POST["submit"])){

    $ch = curl_init("$url");
    curl_setopt($ch, CURLOPT_NOBODY, true);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_exec($ch);
    $retcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);
    if (200==$retcode) {
        echo "working";
    } else {
       echo "failed";
    }
}
?>

<form action='ping.php'  method='post'><input type="submit"   name="submit"></form>



<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>



       <script type="text/javascript">
            var $url =  '<?php echo $url ?>';
            $('#submit').click(function(e){

        e.preventDefault();

        var $this = $(this);
        $.get($url,function(data){
            $this.text('Success');
        });
    });
                </script>

EDIT:

The script in the above example shows an error:

[The request] has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

so I was going to do it with PHP cURL. If anyone knows any solution, please help.

Answer 1

I am no PHP expert, but I think this line

var $url =  '<?php echo $url ?>';

will render to html as

var $url = 'http://google.com';

This means you're trying to do an XHR call to google's website from your own domain. This is why you're getting CORS errors.

I think you're actually trying to use PHP as a proxy to communicate with Google (which should work fine).

If the code you pasted above is named ping.php, then the action on the <form> looks like it's wired up to POST to itself.

The only change you should need to make then is the following...

<form action='ping.php' method='post'>
  <button>PING</button>
</form>


<script type="text/javascript">

  // Use the `submit` event on the form instead of the click event on the button. 
  // It's good practice for this sort of thing.

  $('form').on('submit', function(e){

    e.preventDefault();



    var form = $(this);
    var button = form.find('button');

    // Set the button text to 'working'
    button.text('Working...');

    var url = form.attr('action');
    $.get(url, function(data) {
      button.text('Success');
    });
  });
</script>

Answer 2

I'm no javascript expert but when you try to make cross-domain calls, you should set the dataType to jsonp and crossDomain to true. Like this:

$.ajax({
    url: 'HTTP://THE_URL',
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    success: function() { alert("Success"); },
});

I could be wrong tough :)

Answer 3

As others have mentioned, the Access Control Allow Origin error is a CORS issue. That is happening because the AJAX request is pointed to the url in $url (i.e. http://google.com). Instead, use the curl request at the top of the code (i.e. if(isset($_POST["submit"])){...) by using $.post() instead of $.get(). The URL of the post should be the PHP page (i.e. pong.php?). In the code sample below and demo (see end of this answer) it uses PHP_SELF (i.e $_SERVER['PHP_SELF']) for the url to send the POST request to. And it passes $url in the POST data (second parameter of .post(). Plus we need to use .val() to update the text of the button (see notes below).

var $url =  '<?php echo $_SERVER['PHP_SELF']; ?>';
$('#submit').click(function(e){
    e.preventDefault();
    var $this = $(this);
    $.post($url,{url: "<?php echo $url;?>"}, function(data){
        //see note below about using .text()
        //$this.text('Success');
        $this.val('Success');
     });
});

Also, as I mentioned in a comment, there is no element with id attribute submit so the click handler is never getting executed. And in order to update the text on the submit button, give it a value and update the value using .val().

• Add the id and value attributes:

  <input type="submit" id="submit"  name="submit" value="Submit"> 
  

• Use .val() in the success callback:

   $this.val('Success');
  

See a demonstration in this PHPFiddle.

One other possible function that could be used is .load() - it would still be prone to the CORS issue but at least the callback function can be called.