Unable to submit form without reloading page using php and ajax call

Question

I have many forms on a page. I want to submit each form without reloading page. I tried many methods but could not do. I have a form similar to this. I tried using ajax as well but could't do. Please help me. Now, I'm unable to insert in database also.

   <form id="a" onsubmit="return func();">
       <input type="text" name="fname">
       <input type="text" name="lname">
       <input type="text" name="email">
       <input type="submit">
      </form>

Jquery

     function func(){   
    $.ajax({
          url:'registration_detail.php?id=' +reg_id,// in this you got serialize form data via post request
        type    : 'POST',
        data    : $('#a').serialize(),
        success: function(response){
            console.log(response);            
        }
    });
     return false;
}

you need to add `e.preventDefault();` at the top of your click event. It will solve your issue. — Mayank Dudakiya, Jul 12 '19 at 06:33
`
` should just be `
` then make sure your `type` in AJAX is `method`, instead. Also, you should change those input names to ids. It will make your life easier. — StackSlave, Jul 12 '19 at 06:45

Jatin Kumar · Answer 1 · 2019-07-12T07:39:46.500

1

Don't use " action " attribute not even with " # "

And if using AJAX, use " Return False "

    $.ajax({
        url     : "example.php",
        type    : 'POST',
        data    : $(this).serialize();
        success: function(result){
        }
    });
    return false;

edited Jul 12 '19 at 07:39

answered Jul 12 '19 at 06:13

Jatin Kumar

41
5

I changed the question .I tried like this but couldnot succed – Prabina Shrestha Jul 12 '19 at 06:22
you have a typo in your answer: `serailize()` should be `serialize()` – Cornel Raiu Jul 12 '19 at 06:28
I couldnot get succed. I updated the question.@cornel.raiu – Prabina Shrestha Jul 12 '19 at 07:03
Sorry for typo, and for multiple forms please check my latest answer – Jatin Kumar Jul 12 '19 at 07:41

ManiMuthuPandi · Accepted Answer · 2019-07-12T07:22:17.213

0

Make sure you are having a unique id for all the forms remove action="#" and onsubmit="" from the form as you are handling the submit event in jquery

        function func(id){ 
             alert($('#'+id).serialize())  
      $.ajax({
            url:'registration_detail.php',// in this you got serialize form data via post request
          type    : 'POST',
          data    : $('#'+id).serialize(),
          success: function(response){
              console.log(response);            
          }
      });
       return false;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="a" onsubmit="return func('a');">
       <input type="text" name="fname">
       <input type="text" name="lname">
       <input type="text" name="email">
       <input type="submit">
      </form>

        <form id="b" onsubmit="return func('b');">
       <input type="text" name="fname">
       <input type="text" name="lname">
       <input type="text" name="email">
       <input type="submit">
      </form>
        <form id="c" onsubmit="return func('c');">
       <input type="text" name="fname">
       <input type="text" name="lname">
       <input type="text" name="email">
       <input type="submit">
      </form>

id="a" should be unique for all the forms

in your code new variable reg_id will give undefined variable error, that might be the cause to reload the page.

edited Jul 12 '19 at 07:22

answered Jul 12 '19 at 06:15

ManiMuthuPandi

1,594
2
26
46

why use `action="#"` or `onsubmit=""` when the submit handler is being added using the JS code? – Cornel Raiu Jul 12 '19 at 06:18
1

You are right, i didn't noticed the jquery code, updated my answer too – ManiMuthuPandi Jul 12 '19 at 06:27
I could not get succed.@ ManiMuthuPandi – Prabina Shrestha Jul 12 '19 at 06:53
where do you get issues – ManiMuthuPandi Jul 12 '19 at 06:57
I''m unable to insert data in database and the page get reloaded@ManiMuthuPandi – Prabina Shrestha Jul 12 '19 at 07:02
@PrabinaShrestha I have added the code snippet, check it, it will help you – ManiMuthuPandi Jul 12 '19 at 07:23
@PrabinaShrestha upvote and accept the answer if it helps – ManiMuthuPandi Jul 12 '19 at 07:26
@ ManiMuthuPandi I couldnot fixed the answer. Can you check my answer?I'm so frusted . I tried many examples. – Prabina Shrestha Jul 12 '19 at 07:32
@PrabinaShrestha just copy the html/js code from my ans its running – ManiMuthuPandi Jul 12 '19 at 07:43
Can I use same form saving and editing ?ManiMuthuPandi – Prabina Shrestha Jul 12 '19 at 08:05
@PrabinaShrestha Yes you can, Please have a look `CRUD in php using Ajax` – ManiMuthuPandi Jul 12 '19 at 10:13
I looked CRUD in php using Ajax .It uses different forms. How can I write like – Prabina Shrestha Jul 13 '19 at 01:31
I looked CRUD in php using Ajax .It uses different forms for edit and create. How can I use same form for create and update?@ManiMuthuPandi – Prabina Shrestha Jul 13 '19 at 03:08
I tried but couldnot succed . Please help me@ManiMuthuPandi – Prabina Shrestha Jul 13 '19 at 06:35

score 0 · Answer 3 · answered Jul 12 '19 at 06:43

0

Use below code :

<html>
    <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    </head>
    <body>
        <form  onsubmit="return func();">
        <input type="text" name="fname">
        <input type="text" name="lname">
        <input type="text" name="email">
        <input type="submit">
        </form>
    </body>
    <script>
function func(){   
    $.ajax({
        url     : "example.php", // in this you got serialize form data via post request
        type    : 'POST',
        data    : $('form').serialize(),
        success: function(response){
            console.log(response);            
        }
    });
     return false;
}
</script>
</html>

answered Jul 12 '19 at 06:43

Pankaj Chauhan

1,623
14
12

Just a note on your placement of the ` – Cornel Raiu Jul 12 '19 at 06:47
I updated the question. I couldnot fixed it.@ cornel.raiu – Prabina Shrestha Jul 12 '19 at 07:05
@Prabina, if you have more than one form, then access the serialize value via form id. – Pankaj Chauhan Jul 12 '19 at 07:09
@PankajChauhan I put form id like this $('#a').serialize(), but still couldnot fixed it – Prabina Shrestha Jul 12 '19 at 07:10
@PrabinaShrestha, I have tried and its working with id "a" – Pankaj Chauhan Jul 12 '19 at 07:21

StackSlave · Answer 4 · 2019-07-12T07:35:55.973

I'm pretty sure that you want that GET url to be POST as well. Obviously the code below won't work on this site here, but it shows concept of proper AJAX post.

//<![CDATA[
/* js/external.js */
$(function(){
var regId = 'someId';
$('#form').submit(function(e){
  $.post('registration_detail.php', 'id='+encodeURIComponent(regId)+'&'+$(this).serialize(), function(jsonObjResp){
    console.log(jsonObjResp);
  }, 'json');
  e.preventDefault();
});
}); // load end
//]]>

/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#content{
  padding:7px;
}
label{
  display:inline-block; width:80px; padding-right:4px; text-align:right;
}
input[type=text]{
  width:calc(100% - 80px);
}
input{
  padding:5px 7px;
}
input[type=submit]{
  display:block; margin:0 auto;
}
#form>*{
  margin-bottom:5px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <div id='content'>
    <form id='form'>
      <label for='fname'>First Name</label><input type='text' id='fname' value='' />
      <label for='lname'>Last Name</label><input type='text' id='lname' value='' />
      <label for='email'>Email</label><input type='text' id='email' value='' />
      <input type='submit' id='submit' value='submit' />
    </form>
  </div>
</body>
</html>

Explain does not work. Do you have CORS access to site you are sending to? — StackSlave, Jul 12 '19 at 07:31

score 0 · Answer 5 · answered Jul 12 '19 at 07:42

  $(document).ready(function(){
    $("form").on("submit", function(){
    var form_id = $(this).attr("id");
    $.ajax({
       url     : "example.php",
       type    : 'POST',
       data    : $("#"+form_id).serialize(),
       success: function(result){
       }
    });
    return false;
    })
  })

Unable to submit form without reloading page using php and ajax call

5 Answers5