How to submit a form with Ajax, then display the form information with an alert?

Question

I want to send a form ,then an alert shows the information inside the form.I want to show the alert this way : your FirstName is Mickey and LastName is Mouse!

<!DOCTYPE html>
<html>
<head>
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){

        data:$("form").serialize();
        alert(data);
    });
});
</script>
</head>
<body>

<form action="">
  First name: <input type="text" name="FirstName" value="Mickey"><br>
  Last name: <input type="text" name="LastName" value="Mouse"><br>
</form>

<button>submit</button>



</body>
</html>

Possible duplicate of [jQuery AJAX submit form](https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — skobaljic, Jul 09 '17 at 10:34
Sorry, but this is not a guiding community, please do some research before you post your question in here. This website is to help with coding issues and there is no code inside your question. Maybe read [How to ask a good question first](http://www.wikihow.com/Ask-a-Question-on-Stack-Overflow). Cheers — skobaljic, Jul 09 '17 at 10:36
(In [Indo-German languages](https://en.wikipedia.org/wiki/Indo-European_languages), punctuation marks tend to immediately follow what they terminate, separated by (at least) a space from subsequent text, if any.) — greybeard, Jul 09 '17 at 10:56
Change `data: $("form").serialize();` to `var data = $("form").serialize();` — Gerrit Luimstra, Jul 09 '17 at 11:19

pavithra rox · Answer 1 · 2017-07-09T13:18:33.670

    $.ajax({
      type: "POST",
      url: "ajaxform.php", // url that the data need to go
      data: $("form").serialize(),
      success: function(data) {
          if (data) {
              alert("your first name is: " + $('input[name=FirstName]').val() + " Last name is: " + $('input[name=LastName]').val())
          }

      }
  });

try this if you want to use values in the data object then it will depend on the object. Also you need to put the submit buton inside the form as well

$(document).ready(function(){

    $("form").submit(function(){
        alert("your first name is: " + $('input[name=FirstName]').val() + " Last name is: " + $('input[name=LastName]').val())// remove this alert when ajax code is working. it will not work here in the fiddle
        $.ajax({
      type: "POST",
      url: "ajaxform.php", // url that the data need to go
      data: $("form").serialize(),
      success: function(data) {
          if (data) {
              alert("your first name is: " + $('input[name=FirstName]').val() + " Last name is: " + $('input[name=LastName]').val())
          }

      }
  });
        return false;
    });
   
});

<!DOCTYPE html>
<html>
<head>
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

</head>
<body>

<form id="form" method="post" action="">
  First name: <input type="text" name="FirstName" value="Mickey"><br>
  Last name: <input type="text" name="LastName" value="Mouse"><br>
  <input type="submit">
</form>





</body>
</html>

How to submit a form with Ajax, then display the form information with an alert?

1 Answers1