I have a user registration form with a submit button and a cancel button,
Problem 1) I can't have those two buttons inside the single form, if I have the cancel button inside the form with submit button, when I click the cancel button, it execute the action of the form instead of going to home and cancelling the registration page.
Can't we have these two buttons inside a single form..?
Problem 2) Because of Problem 1, I added the cancel button outside the form and linking to the home page, it works as I expect, but, I need to have those two button in the same row on the screen.
<div id="main-content">
<div id="login-container">
<form id="user-registration-form" method="POST">
// Some other fields, like username, etc.
<fieldset class="edit" id="submit-button-fieldset">
<input type="submit" id="submit-regiser"/>
</fieldset>
</form>
<fieldset id="Cancel-field">
<button id='cancel-registration' onclick=window.location.href='link-to-home'>Cancel</button>
</fieldset>
</div>
</div>
I need to have those #submit-regiser and #cancel-registration in the same row in the screen. And this is for mobile browser, so should obey XHTML rules
Thanks in advanced.
That's the intended behavior. Cancel buttons are supposed to clear the form, not to take one back to what page ever.
Still you can do it this way using the <button> element:
<form id="user-registration-form" method="POST">
<fieldset class="edit" id="submit-button-fieldset">
<button type="submit" id="submit-regiser">submit</button>
<button id="cancel-regiser" onClick="window.location.href='http://example.com'; return false;">Back</button>
</fieldset>
</form>
Related
I created a form with many sections the user can save the form using a button at the end of the form or a button that is kept in a fixed side nav. The structure is like this (with additional CCS to keep the form blocked).
<form id="myform" action="" method="POST" role="form">
<div class="sidenav">
<a> some section links</a>
<a> some section links</a>
<button type="submit" class="btn-success">SAVE</button>
<a class="btn-danger" onclick="return confirm('Leaving the page, might cause loosing the data not saved.');" href="/">Leave the page.</a>
</div>
<div class="main">
<div>
... a lot of stuff
</div>
<div>
<button type="submit" class="btn-success">SAVE</button>
</form>
A beta tester using Chrome told me that the button on the side nav sometimes is not working, while the one on the bottom is always working, but I can't reproduce this behaviour in my browsers or understand the causes.
Is there something I am missing? Which is the correct implementation of a form with two submit button?
I have the form below ..
<form name="myForm" novalidate>
<label for="test_element">Test</label>
<input required id="test_element" type="text" ng-model="ctrl.test">
<button ng-click="ctrl.save(myForm.$valid)">
Submit
</button>
</form>
I'm using the Dynamic Assessment Plugin from here:
https://chrome.google.com/webstore/detail/dynamic-assessment-plugin/aahpafpbmmgednbflpalchnlbicaeppi
The tool doesn't give a great example of how to fix the error:
Submit buttons and image buttons allow users to explicitly request submission of the form and to control the change of context. Forms that are submitted by other mechanisms might change the user's context before they are ready, causing frustration or confusion.
What would be the best way?
I dont want to change <button> -> <input type="submit"> since there's angularjs code behind the scenes handling the submit
I have read a little bit about ng-submit, here's the link.
I think for that we can make it something like this:
<form ng-submit="ctrl.save()">
<input type="text" ng-model="ctrl.test">
<input type="submit" value="Submit">
</form>
I hope that documentation can help you :D
There's no obligation of having one submit button inside a form.
You can view an example in the documentation stating:
Finally, to make the form submittable we use the button element
with no input[type=submit] button.
You can also perfectly have no button at all, for instance a form consisting only in checkboxes.
<button type="submit" ng-click="ctrl.save(myForm.$valid)">
Submit
</button>
I have an <a> link which will only open if I right click it and click on "open in a new tab. If i just click it normally it just puts a "?" after the rest of the link, like this: "http://localhost:8011/login.html?".
Code:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button class="login">login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
If i put target="_self" it still doesn't work. The two files are definitely in the same folder.
Your HTML is invalid. It is forbidden to put a <button> inside an <a>. Use a validator.
The effect you see is due to error recovery reacting badly and your clicks being handled by different elements.
will only open if I right click it and click on "open in a new tab
This is what happens when you right click on the <a> element.
If i just click it normally it just puts a "?" after the rest of the link
This is what happens when you submit a form using a submit button (and the form has no successful controls in it, which is the case here because none of your controls have names).
If you want a link, then use a link and only a link. Get rid of the <button> element.
If you want something that looks like a button then first think about what message you are sending to the user. Buttons do things. Links go places. Giving the user a visual signal that they are doing something is likely to be wrong.
If you still want a link that looks like a button, then style it with CSS.
That said, having a link marked Login which doesn't submit the form is just confusing. You should probably:
Keep the <button>
Get rid of the <a>
Give your form controls name attributes
Make the form use method="POST"
… and then write server side code to process the data so the login form can be used to login to the site.
You can change your HTML form to be as follows so that the form is submitted when login is clicked:
<div class="form">
<form class="login-form" method="POST" action="index.html">
<!-- user inputs -->
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<!-- your submit button -->
<input type="submit" name="submit" value="login">
<!-- your other link -->
<p class="message">Not registered? Create an account</p>
</form>
</div>
This approach will be better than the current one for creating a login form.
This way you still have your button that will redirect to index.html without having to use a messy approach with <a> and <button>.
It's because you've a button, and it's trying to submit the form.
Try using bootstrap and give the <a> tag some classes, like this:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
login
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
Or just give style to your <a> by css, but if you use the button, then you're submitting the form instead clicking the link.
EDIT: you could also wrap the <a> inside the button, so the link on the <a> will execute first instead of submitting the form
<button class="login">login</button>
I have the following type of form
<form method="post" action="genTable.php" target="myIframe">
<select id="leftValues" name="cols[ ]" size="5" multiple>
<option>paper</option>
<option>authors</option>
</select>
<div class="submitbutton">
<input type="submit" name="submit" value="Refresh Table" onclick="selectAll();">
</div>
</form>
Fiddle
In that way the select form is always grouped together with the submit button. I want the button to be in a separate div with other buttons which is positioned separately from the form. However, if I separate them the button is not associated with the action of the form anymore. How can I do this?
You can give the form an id:
<form id="MyForm" method="post" action="genTable.php" target="myIframe">
</form>
And then you can position your inputs anywhere on the page and just add the form attribute to attach them to the form:
<input type="submit" name="submit" value="Refresh Table" onclick="selectAll();" form="MyForm">
Note though, that this is not supported in Internet Explorer, but since you also have a selectAll() event handler, you can also submit the form through JavaScript:
function selectAll()
{
// submit the form
document.getElementById('MyForm').submit();
// Prevent the default submit in non-IE browsers, otherwise you'll have two submits.
return false;
}
This way, it will work everywhere, except in IE browsers where JavaScript is disables. That audience is probably small enough to be acceptable.
When you focus on a form element in a mobile browser, they come up with previous and next icons for easier navigation. However for some reason if I click next to what should be the end of that particular forms' input, if there is another form on the page, pressing next again will make it jump to the second form.
For example I have a log in form on the body of my page like so:
<form name="customer_login" id="customer_login" method="post" action="/login">
Email: <input type="email" name="customer[email]" id="customer_email" />
Passwird: <input type="password" name="customer[password]" id="customer_password" />
<button type="submit">Log In</button>
</form>
Then further down my page, in the footer I have a separate form for my newsletter:
<form name="newsletter" id="newsletter" method="post" action="/newsletter">
Subscribe: <input type="email" name="email" />
<button type="submit" name="submit" title="Sign Up">Go</button>
</form>
But once I'm focused on the password field in the log in form, the next button to me should become disabled or at least not jump to an entirely different form. Is this normal behavior for mobile browsers and forms? Or am I missing a form attribute which is not differentiating the two forms?
Try adding tabindex=1 to your input fields...see if that helps. By mobile, you using an iPhone? If so, those < and > arrows are essentially the TAB button on a keyboard, etc.
tabindex=1 value should increment in the order you want to "tab", etc.