button(submit) didn't work - but input(submit) work

Question

I want to make Login page with PHP.

And want to use button but it didn't works.
and it looks like just refresh the page.

I tried button tag in the form.
How can I make this works??

<?php
  include "login.php";
?>

<form method="post" id="sign">

  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="email" name="user_mail" id="user_mail" value="<?php echo addslashes($_POST['user_mail'] ?? '') ?>">
    <label class="mdl-textfield__label" for="user_mail">Email</label>
  </div>

  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="password" name="passcode" id="passcode" value="<?php echo addslashes($_POST['passcode'] ?? '') ?>">
    <label class="mdl-textfield__label" for="passcode">Password</label>
  </div>
</form>

//this <input> works
<input type="submit" name="signup" form="sign"/>
//I want to use this <button>
<button type="submit" name"signup" form "sign" formmethod="post"></button>

<?php
  if ($error ?? '') {

    echo addslashes($error);

  }

login.php

if ($_POST['signup'] ?? '') {

  $error = '';

  if (!$_POST['user_mail']) $error .= "<br />Please enter email";
  else if (!filter_var($_POST['user_mail'], FILTER_VALIDATE_EMAIL)) $error .= "<br />Please enter valid email";

  if (!$_POST['passcode']) $error .= "<br />Please enter password";
  else {

    if (strlen($_POST['passcode']) < 8) $error .= "<br />Please enter a password more than eight";
    if (!preg_match('`[A-Z]`', $_POST['passcode'])) $error .= "<br />please least one capital letter";

  }

  if ($error) $error = "there were errors:" . $error;

Duplicate: http://stackoverflow.com/questions/1979363/html-button-v-s-html-submit — mikeb, May 16 '16 at 10:37
There is a typo. Check the `form "sign"`. It should be `form="sign"` — Arun, May 16 '16 at 10:37

score 0 · Accepted Answer · edited May 23 '17 at 10:28

<button> means put a button on the page and execute whatever is in the onclick method. <submit> submits a form.

If you want a button to sumbit your form, use the onclick method of the button to do it. Why can't you use submit, though?

See here, they use a link <a onclick='...' but you can do the same for your button: How to submit a form with JavaScript by clicking a link?

As @Arun says below, you can use:

<button type='submit'> inside your form, too. There are lots of ways to do things, so my only advice on top of this is to be consistent. I use input out of habit, and that way I don't have a bunch of mixed conventions throughout my code.

is same as of in functionality. – Arun May 16 '16 at 10:43 — Arun, May 16 '16 at 10:43

score 0 · Answer 2 · answered May 16 '16 at 10:41

If you want to submit a form on button click, add click event of button using jquery and submit a form like:

Html:

<button type="submit" name"signup" id="btn_submit" value="submit" >Submit</button>

Jquery:

$("#btn_submit").click(function() {
    $("#sign").submit(); // submit a form
});

hexagonNoah · Answer 3 · 2016-05-24T17:23:47.993

0

I think you need to put a action on the form element:

<form method="post" id="sign" action="login.php">

i don't know PHP so i might be wrong.

edited May 24 '16 at 17:23

answered May 16 '16 at 12:14

hexagonNoah

149
1
9

score 0 · Answer 4 · answered May 16 '16 at 12:56

You need to make 2 changes:

Add action attribute
Move your button element inside the form. You can't expect any button on the page to submit your form. It must be inside the form, to which it is associated.

<form method="post" id="sign" action="form-destination.php">

<div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="email" name="user_mail" id="user_mail" value="<?php echo addslashes($_POST['user_mail'] ?? '') ?>">
    <label class="mdl-textfield__label" for="user_mail">Email</label>
  </div>

  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="password" name="passcode" id="passcode" value="<?php echo addslashes($_POST['passcode'] ?? '') ?>">
    <label class="mdl-textfield__label" for="passcode">Password</label>
  </div>
  <button type="submit" name"signup" form "sign" formmethod="post"></button>
</form>



<?php
  if ($error ?? '') {

    echo addslashes($error);

  }
?>

button(submit) didn't work - but input(submit) work

4 Answers4