Following is a sample code of which I’m working of. When navigating through ENTER button form submit invokes “Cancel” action though it’s tab index is after the “Next” button.
E.g.
Field01 <ENTER> Field02 <ENTER> Field03 <ENTER> >>>>> Form submits with Cancel action
Field01 <TAB> Field02 <TAB> Field03 <TAB> >>>>> Next button is focused
Changing the order of “submit” buttons in HTML mark-up would help to prevent the invocation of “Cancel” button by default. But I need to keep “Cancel” button in left side & “Next” button in right side.
<form method="post" action="/SVRWeb/ActionController" name="frmMain">
<div>
<h1>Some information</h1>
<label>Field 01</label>
<input type="text" tabindex="0" name="field01" value"" size="15" />
<label>Field 02</label>
<input type="text" tabindex="1" name="field02" value"" size="15" />
<label>Field 03</label>
<input type="text" tabindex="2" name="field03" value"" size="15" />
</div>
<input type="submit" tabindex="4" name="Action.User.Init" value="Cancel" />
<input type="submit" tabindex="3" name="Action.User.Form2" value="Next"/>
</form>
The enter key fires the firstnext type="submit" element in the form, regardless of the tabindex. There are two ways to go around this:
Use JS to click the particular button when enter key is pressed:
<form onkeypress="if (event.keyCode == 13) document.getElementById('next').click();">
This however get nasty when you've a <textarea> in the form for which you of course want to keep its default behaviour with enter key.
Put buttons in same container element with the Next button first and use CSS to swap them.
.next { float: right; }
.cancel { float: left; }
I think it is because it see's the Cancel and Next button as the same thing. They are both of type Submit. So when you press enter it finds the first submit button. I would change the cancel type to maybe reset? Then use javascript/jQuery to do a redirect when you click the cancel button.
There may be a better way.
Related
I am currently writing some script in HTML that creates a search bar. The page seems to redirect to https://schedule.nylas.com/?, but I want it to redirect to the input in the search box.
i.e the input in the search box is icecreamshop and it goes to https://schedule.nylas.com/icecreamshop
<form autocomplete="off" action="https://schedule.nylas.com" + input>
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="" placeholder="store">
</div>
<input type="submit">
</form>
You can do this using javascript. If you just use the onclick attribute on the button then you don't even need to put it in a form. This just send the user to 'https://schedule.nylas.com/' + (input with id="myInput") when they click on the button.
<input id="myInput" placeholder="Search">
<button onclick="window.location.href='https://schedule.nylas.com/'+document.getElementById('myInput').value;">Search</button>
If there are multiple submit buttons on a form,which submit button is triggered when user hits enter key in a input type="text"
HTML Standard (inplicit submission):
A form element's default button is the first submit button in tree
order whose form owner is that form element.
https://html.spec.whatwg.org/multipage/forms.html#implicit-submission
Give it a try:
<form>
<input type='text'>
<input onclick="alert('FIRST')" type="submit" value="FIRST" />
<input onclick="alert('SECOND')" type="submit" value="SECOND" />
</form>
It should be first type="submit" input.
Fiddle: http://jsfiddle.net/ddan/5tmwjdad/
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.
I have a radiobutton and the value gets submitted with a submitbutton. I only want a submitbutton that submits the value when clicked. So instead of a radiobutton and a submitbutton separate I want a radiobutton and submit button rolled into 1.
This is my code:
{foreach item=item key=key from=$memberships}
<input type="radio" type="hidden" name="membership" value="{$key}" checked="checked"/>
{$item}
{/foreach}
<input class="button" type="submit" value="{lang mkey='continue'} -->"/>
What I am trying to achieve is something like this:
replace the radiobutton and submit button with just a submit button.
<button type="submit" name="membership" value="{$key}">{$item}</button>
Would it be possible and how to do it?
You can have
<input type="radio" type="hidden" name="membership" value="{$key}" checked="checked" onclick="this.form.submit();"/>
or
<input type="hidden" type="hidden" name="membership" id="membership" value="{$key}">
<button type="submit" name="membership" onclick="document.formname.membership.value={$key}; return true;">{lang mkey='continue'}</button>
You could create a small image that looks like a radio button and map that as your submit button. This would give the illusion of having a radio button but when a user clicks it your form would submit.
If you really want to jazz it up, have a second image like a selected radio button and show that with something like an onClick() event.
Just don't have a submit button, and then use an onclick event for the radio button that submits the form.
While using IE9, every link (when clicked) the search form is being submitted. Every link seems as if it is redirecting to the action value of the search form.
There is no java script attached to the form element.
<form action="/my-search-url" method="post">
<input type="submit" value="search" />
<input type="text" value="" />
</form>
The issue was with the order of the form elements. Apparently the original developer decided to place the submit button before any input elements. By putting the submit input last (or removing it) fixed this issue.
<form action="/my-search-url" method="post">
<input type="text" value="" />
<input type="submit" value="search" />
</form>