Form submitting when clicked

Question

I am having an issue with this login system, when ever I click the log in button, or the sign up button it re-directs me to a white page with writing on it, That being said it is interfering with my log in action.

Here is the code that I think is causing the issue,

  <form method="POST" action="" accept-charset="UTF-8">

on line 16 of the HTML code, I tried to take that code out and it stopped the re-directing but the text boxes went out of place, and the white background/background-box was not there either,

Link, HERE

add ````preventDefault()```` to prevent the form from posting — b_dubb, Jun 11 '15 at 15:44
That cancels out everything, like all the buttons in the form — Nick, Jun 11 '15 at 15:52
How is the `
`'s data being handled/processed? The `
` itself will just navigate to the `action` on submission (with `""`, it'll reuse the current address), sending names and values from the inputs it contains. What happens with that data is defined elsewhere in the application's server-side code. — Jonathan Lonowski, Jun 11 '15 at 15:53

score 2 · Accepted Answer · answered Jun 11 '15 at 15:59

You want to use preventDefault() if this is a purely Javascript: you should be able to pass the button press event into the listener when you create it:

$('.login').on('click', function(e) {
  e.preventDefault();
  // Will be executed on press
}

<form method="POST" class="login" accept-charset="UTF-8">

If there's no JS involved in this scenario, then you want to get rid of the action parameter entirely – leaving it as the empty string will still cause it to redirect in some cases.

score 0 · Answer 2 · answered Jun 12 '15 at 21:11

As Jonathan Lonowski explained above, when the log in / sign up button is clicked, the form will post the data to the page mentioned in the action= attribute. Since this attribute is empty in your form tags, it will re-load the same page, posting the data to itself.

The data will arrive in key=value variable pairs. The variable value will be the contents of the field, the variable name will be the value of the name="" attribute on the element.

For e.g., for this field:

<input id="fname" name="first" value="Bobby" />

The data will be received like this:

$fn = $_POST['first']; //value is Bobby, or whatever user enters

On your page containing the form, add a section at the top like this:

<?php
    if (isset($_POST['fname']) == true){
        $fn = $_POST['fname'];
        echo "Received First Name: " . $fn;
        die();

    }else{
?>
        //Your current page, in its entirety, goes here

<?php
    } //close the PHP if statement
?>

That is how you deal with a normal HTML <form> construct.

However, if you wish to use AJAX to communicate with a PHP file without changing the page, then:

(1) There is no need to use a <form> construct, just use a DIV with an input button: <input type="button" id="sub_btn" value="Submit" />

(2) Trap the button press using standard js/jQuery:

$('sub_btn').click(function(){
    var fn = $('#first').val();
    //etc.

    $.ajax(function(){
        type: 'post',
         url: 'my_php_processing_file.php',
        data: 'fname=' +fn+ '&lname=' etc
    });
});

In your PHP processor file, the data will be received thus:

<?php
    $fn = $_POST['fname'];
    $ln = $_POST['lname'];

    //Do your MySQL lookup here...

    echo 'Received ' .$fn. ' ' .$ln;

(3) IF you do use the form construct, you can still do everything as above, but you will need to suppress the default form action of navigating to the page specified in the action= attribute (an attribute setting of action="" will post data to and reload the same page you are on).

To suppress navigating to the page specified in action= (involves page refresh, even if just action=""), use event.preventDefault(), as follows:

$('#buttonID').click(function(event){
    event.preventDefault();
    //remainder of button click code goes here
});

Form submitting when clicked

2 Answers2

Linked