Posting an input to PHP with Ajax

Question

I have a series of input fields and I would like them to post their values to a php page for processing then return some data without reloading the page. Here is the what I have so far, however no data appears to be passing.

HTML:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("form").submit(function(form) {
    $.ajax({
      type:"POST",
      url:"catch.php",
      data: $(this).serialize(),
      success: function(data) {
        $('#result').html(data);
        console.log(data);
      }
    });

    form.preventDefault();
  });
});
</script>
</head>
<body>
<form method="post" name="form">
<input type="submit" name="event" value="1" />
<input type="submit" name="event" value="2" />
<input type="submit" name="event" value="3" />
<input type="submit" name="event" value="4" />
</form>
<div id="result"></div>
</body>
</html>

PHP:

<?php

if(isset($_POST["event"]))
{
  echo $_POST["event"];
}

?>

what if you change `data` to `data: $('form').eq(0).serialize()` ? — jonathanGB, Oct 17 '16 at 19:30
series of submit type input? and each button with same name? — Farhan, Oct 17 '16 at 19:32
You mentioned input fields, but these are all buttons. Use input type="text" and change your name to unique for each input. — Netham, Oct 17 '16 at 19:33
You will probably want to use a radio button and one submit. — nerdlyist, Oct 17 '16 at 19:38
I had a series of radio buttons with a single submit that was working, however I was looking for a solution that would only require one click to improve the user experience. It seems like such an approach should be possible but maybe not... — user6368630, Oct 17 '16 at 19:44

score 0 · Accepted Answer · answered Oct 17 '16 at 19:51

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>


  $(document).ready(function() {

  $('.event').on('click', function(){
    $('#event').val($(this).val());
    $('#event_form').submit();
  });
  $("form").submit(function(form) {
    $.ajax({
      type:"POST",
      url:"catch.php",
      data: $(this).serialize(),
      success: function(data) {
        $('#result').html(data);
        console.log(data);
      }
    });

    form.preventDefault();
  });
});
</script>
</head>
<body>
    <form method="post" name="form" id="event_form">
<input name="event" id="event" value="" type="hidden">
    <input type="button" class="event" value="1" />
    <input type="button" class="event" value="2" />
    <input type="button" class="event" value="3" />
    <input type="button" class="event" value="4" />
    </form>
 <div id="result"></div>
</body>
</html>

No problem. I like you are keeping user experience in mind while coding. — Chris, Oct 17 '16 at 20:15

Posting an input to PHP with Ajax

1 Answers1