PHP Form - on Submit Stay on Same Page

PHP form stay on same page

Use this, it's working already.

index.php

<form method="post">
    <input type="text" id="name">
    <input type="submit" id="submit">
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script> 
$(document).ready(function() {
    $("#submit").click(function(e) {
        e.preventDefault();
        var nameInput = $("#name").val();
        var name = {
            'name' : nameInput
        }
        if (nameInput == '') {
            alert("Insertion Failed Some Fields are Blank....!!");
        } else {
            // Returns successful data submission message when the entered information is stored in database.
            $.post("config/profilecomplete.php", {value: name}, function(data) {
                alert(data);
                //$('#form')[0].reset(); // To reset form fields
            });
        }
    });
});
</script>

profilecomplete.php

<?php

$_POST = array_shift($_POST); // array_shift is very important, it lets you use the posted data.

echo $_POST['name'];

?>

if you want a more simple way.

try to use $.ajax()

jquery submit form and stay on same page not working

@DankyiAnnoKwaku - kudos to Dankyi for getting me on the right track, but his solution didn't work for me, I had to adapt it a bit more:

 <script type="text/javascript">

        function submitForm() {
            console.log("SUBMIT BUTTON CLICKED");
            var subForm = $('#signupForm')[0] ;
            if (!subForm.checkValidity()) {
                console.log("INVALID FORM SUBMISSION");
                $('#signupForm').find(':submit').click() ;
                return ;
            }
            $("#signupForm").submit();
        }

        // Had to wrap the `submit(function(event)` in the root `$(document).ready ....`
        $(document).ready(function(event) {
          $("#signupForm").submit(function(event){
              console.log("FORM SUBMITTED AND PAGE DOES NOT REDIRECT");
              event.preventDefault(); // now working 
              $.post($(this).attr('action'), $(this).serialize(), function(response){
                  // do something here on success
                  console.log(response) ;
            },'json');
              return false;  // not working here
          });
        }) ;
    </script>

How to stay in same page after submit form

You can use event.preventDefault to prevent the form submission but you also need to send the data to the server so for this you can use jQuery ajax ( see below code )

    $(".subcribe-form").submit(function(event){
    event.preventDefault()
    var validEmail = true;

    $("input.form-control").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("has-error");
            validEmail = false;
        }
        else{
            $(this).removeClass("has-error");
        }
    });

    if (!validEmail) { alert("Please enter your email to subscribe");
    }else {
//for valid emails sent data to the server
     $.ajax({
            url: 'some-url',
            type: 'post',
            dataType: 'json',
            data: $('.subcribe-form').serialize(),
            success: function(serverResponse) {
                       //... do something with the server Response...
                     }
        });
    }
    return validEmail;
    });

Submit form and stay on same page?

The easiest answer: jQuery. Do something like this:

$(document).ready(function(){
   var $form = $('form');
   $form.submit(function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
});

If you want to add content dynamically and still need it to work, and also with more than one form, you can do this:

   $('form').live('submit', function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });

---

Related Topics