CODEWITHSUNDEEP
javascriptphphtmlformssubmit
hitlad
hitlad

Reputation: 431

Make hyperlink a form submit button

I am trying to get a hyperlink element to act as a form submit button. This sort of question has been answered multiple times over the years but, for some reason, I am not able to get it to work even with cut-n-pasted code and I'm wondering if I'm missing something trivially simple that my eyes are too bugged out to see. The full code is here:

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function signup() {
    alert("Form is " + document.signup_form);
    document.signup_form.submit() ;
}
-->
</script>
</head>

<body>

  <?php
    echo("Submit is [" . $_POST['submit'] . "]");
  ?>

  <form method="post" name="signup_form" id="signup_form" action="" >
    <input type="text" name="from_email" placeholder="e-mail address"><br>
    <input type="submit" name="submit" value="Send Email"> 
    <a href="javascript:signup()">Sign Up!</a><br>
  </form>

</body>
</html>

The input submit element ("Send Email") works fine. The hyperlink ("Sign Up!") also works fine and calls the javascript function so that the alert() box in the function shows up.

So, it's just the submit() call that's not doing anything--I even printed out document.signup_form in an alert() box to confirm that it's defined (it is). So what am I missing here?

Thanks for any help!

Upvotes: 1

Views: 84

Answers (2)

Joshua T
Joshua T

Reputation: 2589

There is a weird thing with how forms work with Javascript - each field is accessible by using formElement.fieldName. Unfortunately, that means that if you name a field input submit, all of a sudden the built-in formElement.submit() function is replaced by your input element. So in your code, document.signup_form.submit() is failing because it is calling the element, not the method, and you can't call an element as a function. See this SO QA for details.

The fix is easy - change:

<input type="submit" name="submit" value="Send Email">

to:

<input type="submit" name="submitBtn" value="Send Email">

Also, as others have noted, you will want to give your form a valid action. Also, in general it might be preferred to access things by id (document.getElementById()) instead of by things like document.signup_form.

Upvotes: 1

Davi
Davi

Reputation: 4147

Your <form> element is missing a value in it's action attribute. Quoting the specs:

You also have to specify the URL of the service that will handle the submitted data, using the action attribute

Link here

Upvotes: 0

Related Questions