-2

I have a sign-up page where I use data-steps for each step. This is working fine. However, for my own needs, I need to figure out how I am able to send the php request without refreshing the page.

To prevent refreshing in the form I have to use

<button type="button" name="register">

But how am I able to send the request to php when the button type = button. I have seen posts where people say I need to use jquery. I get that. But, how? Can anyone explain me that over here?

I want to use Jquery and this, but how do I get my form input in that data and especially how do I receive those in php?

    $('#submit').click(function() {
    $.ajax({
        url: 'register.inc.php',
        type: 'POST',
        data: {
            email: 'HOW DO I GET FORM INPUT HERE?',
            username: 'HOW DO I GET FORM INPUT HERE?'
        },
        success: function(msg) {
            alert('Register succesful!');
        }               
    });
});

Thanks for the effort, already.

EDIT: I got this now:

    <script>
  $(function () {
    $('button').bind('click', function (event) {

    event.preventDefault();

      $.ajax({
        type: 'POST',
        url: '../includes/register.inc.php',
        data: $('form').serialize(),
        success: function () {
          alert('yoope');
        }
      });
    });
  });
</script>

Above scripts work. However, it is giving me the alert always and does not use the errors I give in the php script anymore. How to fix?

DevSerge
  • 41
  • 7
  • 1
    you are looking for XMLHttpRequest, or Fetch. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch – Loïc Mar 26 '20 at 23:56
  • yes, ajax is XmlHTTPRequest ... – Loïc Mar 27 '20 at 00:05

1 Answers1

1

You can always use return false to stop the form from loading.

If you are using JQuery, something like this (submit the form and stop loading)

$('#myForm').submit(function () {
 return false;
});

or you could call another function to do the data handling from the form then stop the load

<form name="myForm" onsubmit="myFunction()">
....
....
</form>

<script>
function myFunction()
{
  //handle data

  //stop the form
  return false;
}
</script>
Lerie
  • 26
  • 6