CODEWITHSUNDEEP
phpjqueryajax
Devilix
Devilix

Reputation: 323

PHP Jquery Ajax POST call, not work

As the title says, i have try many times to get it working, but without success... the alert window show always the entire source of html part. Where am i wrong? Please, help me. Thanks.

PHP:

<?php
if (isset($_POST['send'])) {
$file = $_POST['fblink'];
$contents = file_get_contents($file);

echo $_POST['fblink'];
exit;
}

?>

HTML: 

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
    $("input#invia").click(function(e) {
        if( !confirm('Are you sure?')) {
        return false;
        }
        var fbvideo = $("#videolink").val();

        $.ajax({
        type: 'POST',
        data: fbvideo ,
        cache: false,
        //dataType: "html",
        success: function(test){

            alert(test);
        }
        });
    e.preventDefault();
    });
});
</script>

</head>
<div style="position:relative; margin-top:2000px;">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input id="videolink" type="text" name="fblink" style="width:500px;">
<br>
<input id="invia" type="submit" name="send" value="Get Link!">
</form>
</div>

</html>

Upvotes: 0

Views: 449

Answers (2)

Sysix
Sysix

Reputation: 1806

Your Problem is that you think, that your form fields are automatic send with ajax. But you must define each one into it.

Try this code:

<script>
$(document).ready(function() {
    $("input#invia").click(function(e) {
        if( !confirm('Are you sure?')) {
        return false;
        }
        var fbvideo = $("#videolink").val();

        $.ajax({
        type: 'POST',
        data: {
            send: 1,
            fblink: fbvideo
        },
        cache: false,
        //dataType: "html",
        success: function(test){

            alert(test);
        }
        });
    e.preventDefault();
    });
});
</script>

Instead of define each input for itself, jQuery has the method .serialize(), with this method you can easily read all input of your form. Look at the docs.

And maybe You use .submit() instead of click the submit button. Because the user have multiple ways the submit the form.

$("input#invia").closest('form').submit(function(e) {

Upvotes: 1

Sebasti&#225;n Palma
Sebasti&#225;n Palma

Reputation: 33491

You must specify the url to where you're going to send the data. It can be manual or you can get the action attribute of your form tag.

If you need some additional as the send value, that's not as input in the form you can add it to the serialized form values with formSerializedValues += "&item" + value;' where formSerializedValues is already defined previously as formSerializedValues = <form>.serialize() (<form> is your current form).

<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script>
  $(document).ready(function() {
    $("#invia").click(function(e) {
      e.preventDefault();

      if (!confirm('Are you sure?')) {
        return false;
      }
      // Now you're getting the data in the form to send as object
      let fbvideo = $("#videolink").parent().serialize();
      // Better if you give it an id or a class to identify it
      let formAction = $("#videolink").parent().attr('action');
      // If you need any additional value that's not as input in the form
      // fbvideo += '&item' + value;

      $.ajax({
        type: 'POST',
        data: fbvideo ,
        cache: false,
        // dataType: "html",
        // url optional in this case
        // url: formAction,
        success: function(test){
          alert(test);
        }
      });
    });
  });
  </script>
</head>
<body>
  <div style="position:relative; margin-top:2000px;">
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
      <input id="videolink" type="text" name="fblink" style="width:500px;">
      <br>
      <input id="invia" type="submit" name="send" value="Get Link!">
    </form>
  </div>
</body>

Upvotes: 1

Related Questions