CODEWITHSUNDEEP
phpjquery
dakota
dakota

Reputation: 75

jQuery to PHP submit and post not returning any results

I have looked at similar questions, but still cannot get my code to work. Any help would be greatly appreciated.

My html page looks like this: 

<!DOCTYPE html>
<html>
  <head>
    <script src='jquery-3.3.1.min.js'></script>
  </head>
  <body>
    <h1 id="output"></h1>
    <form id="form">
      <input type="text" id="input">
      <input type="submit">
    </form>
    <script type="text/javascript">
    $("#form").submit(function(){

      let input = $('#input').val();

      $.post('new.php', {value : input, function(data){
        $("#output").html(data)}
      })
    })
    </script>
  </body>
</html>

My PHP page looks like this:

<?php 
if(isset($_POST['value'])){
  $value = $_POST['value'];
  echo $value;
};
?>

Upvotes: 2

Views: 32

Answers (1)

Victor Anuebunwa
Victor Anuebunwa

Reputation: 2903

Update your script to prevent the default HTML form submit event from reloading the page. You can use preventDefault() like in the example below or simply return false.

$("#form").submit(function(e){
    e.preventDefault();
    let input = $('#input').val();

    $.post('new.php', {value : input, function(data){
         $("#output").html(data)}
    })
 })

UPDATE

Curly braces misplaced too.

$.post('new.php', {value : input}, function(data){
    $("#output").html(data)
})

Thanks to Louys Patrice Bessette

Upvotes: 1

Related Questions