html - a form within a form?

blastman · 19 May 2011 at 16:51

hey guys,

I have a form that I have just the way I like.

form
input..
input...
submit
</form

Now I need to add an extra button to take you to a registration page that I want to put inline with the other submit button. (within the first form)

I can do this with the following code..

Code:

      <form action="checklogin.php" method="post" id="loginform">
        <ol>
          <li>
            <label for="user">Your Username*<br />
              <span> Email Address</span></label>
            <input id="user" name="user" class="text" />
          </li>
          <li>
            <label for="pass">Your Password*<br />
              <span> Your Current Password</span></label>
            <input id="pass" name="pass" class="text" />
          </li>
                    <li class="buttons">
            <input type="submit" value="Log in" id="submit" />
            <input type="submit" value="Register" id="submit" class="register" formaction="register.php" />
          </li>
        </ol>
      </form>

this works fine in chrome but when i click the register button in IE it reload the login page.

Any suggestions on how I can do this across all browsers?

I'd like to keep all the styling as it is as I'm not the best at it and it's much easier to simply ref class's already styled.

GravyMonster · 19 May 2011 at 18:13

You can only have one submit button per form, so the above is invalid anyway.

The easiest thing to do here would be to write some jQuery to change the action of the form on the click of the Register button. Something like:

HTML

Code:

<input type="submit" value="Log in" id="submit" />
<input type="button" value="Register" id="register" class="register" />

jQuery

Code:

$(function() {
    $("#register").click(function() {
        var $form = $("#loginform");
        $form.attr("action", "register.php");
        $form.submit();
    });
});

Vulcan · 19 May 2011 at 18:15

Code:

<input type="submit" value="Log in" id="submit" />
<input type="submit" value="Register" id="submit" class="register" formaction="register.php" />

There's your problem.

1) You have 2 inputs with the same ID. ID's are supposed to be unique.
2) You have formaction on an input.

You should give the 2 submit inputs different ID's, and then check which one was submitted in the PHP file.

visibleman · 19 May 2011 at 18:27

Either do as Spunkey suggested or use location.href on a form button's OnClick event -

Code:

<input type="button" value="Register" id="register" OnClick="location.href='register.php'" />

blastman · 19 May 2011 at 19:54

Cheers for the replies guys.

All good suggestions.

visibleman said:
-

Code:

<input type="button" value="Register" id="register" OnClick="location.href='register.php'" />

Winner!!

easiest solution to add quickly.

Cheers

GravyMonster · 19 May 2011 at 20:29

^ That will only redirect the browser to register.php, it won't submit the form to that page.

blastman · 19 May 2011 at 20:50

Spunkey said:
^ That will only redirect the browser to register.php, it won't submit the form to that page.

thats fine, since thats all I'm trying to do.

the original form was a login form and the extra button is a redirect to a registrations form, so all is good

Thanks for your suggestions, I've used jquery before, but kept your idea on file, just in case it's needed again.