How to avoid the PHP redirect to the "action" url, if my JQuery form-filled-control is false?

Question

I made a little script, which checks if a HTML form is filled. If not, it opens a alert message. But right after that message, it's still opening the php-file named in the action-attribute.. how to solve that?

<script>
$(document).ready(function() {

  $("#landinglog").click(function() {
    ValidateForm();
  });

});

function ValidateForm() {

  var formInvalid = false;
  $('#loginForm input').each(function() {
    if ($(this).val() === '') {
      formInvalid = true;
    }
  });

  if (formInvalid)
    alert('One or Two fields are empty. Please fill up all fields');
    location.reload();
}

The "location.reload" didn't solved it.

[Event.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) — CD001, Feb 27 '19 at 15:03
`$("#landinglog").submit(function() { ValidateForm(); });` with `Event.preventDefault()` (otherwise you're attempting to prevent the click event rather than the submit event). — CD001, Feb 27 '19 at 15:29
Possible duplicate of [How to prevent form from being submitted?](https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) — Nico Haase, Feb 27 '19 at 15:43

Vidal · Answer 1 · 2019-02-27T15:19:08.147

0

Change my answer to the method I always use.

I do a:

<button onClick="ValidateForm();"> Submit</button> or
// I use botstrap this way.
<a href="#" onClick="ValidateForm();" class="btn btn-primary"> Submit</a>

If the check is fine I will submit the form via jquery. I don't use the <input type="submit" value="submit">

Hope it helps.

function ValidateForm() {

  var formInvalid = false;
  $('#loginForm input').each(function() {
    if ($(this).val() === '') {
      formInvalid = true;
    }
  });

  if (formInvalid)
    alert('One or Two fields are empty. Please fill up all fields');
    return false;
  }else{
   $("#loginForm").submit();
  }
}

edited Feb 27 '19 at 15:19

answered Feb 27 '19 at 15:04

Vidal

2,605
2
16
32

For some reason, it still redirects me to the .php. Sometimes (probably every 3rd) even without the alert. But also, if the alert message appears, it redirects me after clicking "okay". – Jimmy Feb 27 '19 at 15:08
I use PHP and I use it that way. in the other hand this is a js issue, not php – Vidal Feb 27 '19 at 15:32
I am curious why you need it that way because of php ? – Vidal Feb 27 '19 at 15:33
For what I know, PHP queries can just be submitted via form submit. Like I need to get the $_POST variables, to give them a variable name.. how could I get a $_POST variable, if I wouldn't submit via a form but with a anchor tag or button? – Jimmy Feb 28 '19 at 09:13
You can submit a form dynamically with javascript... here is the ref. https://api.jquery.com/submit/ did you try the code? – Vidal Feb 28 '19 at 12:33

score 0 · Answer 2 · answered Feb 27 '19 at 15:11

First of all it is not linked to PHP, but it's a normal behaviour of your browser.

That beeing said, you can achieve it by telling jquery to change the normal behaviour of the form.

BUT, I strongly advice your to handle your form on the submit action, not on the button's clic action.

It would be something like that :

$(document).ready(function() {

    // Her you can use your form ide or your form name : form[name=your-form-name]
    $('#your-form-id').on('submit', function(event) {
        event.preventDefault();
        ValidateForm();
        return false; // Just in case
    });

});

For some reason.. this made nothing but a redirect to the php file, without even displayin the alert message.. I'm braindead for now. — Jimmy, Feb 28 '19 at 09:12

How to avoid the PHP redirect to the "action" url, if my JQuery form-filled-control is false?

2 Answers2