Short:
I would like to use input type radio in form as a site navigation tool without need of clicking on submit button. Is this possible?
Explanation:
I am using jQuery Mobile library for my GUI and I like how the look of radio input is automatically changed - In this look I want to classify people according to their names and to switch between pages in long output.
My current code i like this:
<form action="custmers.php" method="post">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<input type="radio" name="nav" id="a" value="customers.php?letter=a">
<label for="a">A</label>
:
:
<input type="radio" name="nav" id="z" value="customers.php?letter=z">
<label for="z">Z</label>
</fieldset>
</form>
But except of highlighting currently clicked option the page doesn't redirect.
This might work (haven't tested it)
Its still early in the morning... So there is a chance I'm still tired and not thinking properly. Haha
Change your form to
<form action="customers.php" id="navigation" method="get">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<input type="radio" name="letter" id="a" value="a">
<label for="a">A</label>
:
:
<input type="radio" name="letter" id="z" value="z">
<label for="z">Z</label>
</fieldset>
</form>
Then add some jquery to your scripts
$(function(){
var $navigation=$('#navigation');
$navigation.on('change','input[name=letter]',function(){
$navigation.submit();
// or to take a more complicated (read: unneccessary)
// window.location($navigation.attr('action')+'?letter='+$(this).val());
});
});
Do note: you should consider some validation in here. I wont bother mentioning security since you didnt post the rest of your script.
Related
I'm working on making client side validation for inputs.
I had had been using PHP to do it all.
Needless to say things got cluttered very quickly.
So I looked in to JS and HTML5 and want to move in to that system for validation.
The messages I want to show are like this:
I know that these are done with the the <input type="email"> tag.
After some help, I was pointed to this page html5rocks.
However I cant seem to get anything to popup.
I copied code straight from there site and nothing.
<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
<script>
document.getElementById('foo').validity.rangeOverflow; //false
document.getElementById('bar').validity.rangeOverflow; //true
</script>
What am I missing to make the notification appear?
That popup is a new implementation in HTML5. Just create an input field like this:
<input type="email">
The popup appears automatically when the form is submitted if the input isn't an email-address.
More about the new input fields in HTML5 is at W3Schools.
Form must be submitted before validation kicks in.
So you have to add a button with the type of submit so like so:
<input type="submit" value="blah">
And then you have to enclose all the fields/inputs in a <form> and </form> tag.
here is the working code:
<form>
<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
<input type="submit" value="blah">
</form>
<script>
document.getElementById('foo').validity.rangeOverflow; //false
document.getElementById('bar').validity.rangeOverflow; //true
</script>
As the title states, I'm trying to incorporate many searches into one search bar. More specifically, Google and Amazon. I have setup a radio option to set which site to search when one is selected.
This is the code I currently have:
<form method="get" action="http://www.google.com/search">
<div align="center" style="font-size:75%">
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Google or Amazon Search" /></br>
<input type="radio" name="sitesearch" value="" />The Web
<input type="radio" name="sitesearch" value="yoursite.com" checked />This Site
</div>
</form>
I have this form for Amazon, but I'm just unsure how to code it into the one search bar.
<form action="http://amazon.com/s/ref=nb_sb_noss" method="get" target="_blank">
<input type="text" id="twotabsearchtextbox" name="field-keywords">
<input type="submit" value="Search" class="nav-submit-input">
</form>
Use JavaScript to change the actual form action in page's DOM (and other parameters, if needed), depending on the user selection (use onclick event on radio to montior for change for example). Simple as that. You won't be able to do that in pure HTML without using some kind of proxy server to redirect the requests and return the results appropriately.
document.your-form.action = (google_selected) ? "http://www.google.com/search" : "http://amazon.com/s/ref=nb_sb_noss";
etc.
I work on a large Backbone application at work. The interface is essentially a big form. We use the name attribute to map our inputs to our model properties so we can autosave each field on change or enter, letting Backbone do its thing. I just spent two days trying to figure out why one particular section causes the page to reload with a weird URL. The answer is obvious now, but after building a big app over 9 months, you tend to overlook the small things.
Throughout the application we use <input> all over the place without a wrapping <form>. In one case, however, we have a repeating element in the form of a Handlebars template that contains radio buttons with the same name:
<div id="1">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</div>
<div id="2">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</div>
<div id="3">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</div>
The problem with this is that they get grouped together because of they all have the same name attribute. So, instead of getting 3 values (one for each group), we were getting 1 value (for one big group).
Since we know that radio button groups are "scoped" to the containing <form>, we just wrapped it:
<div id="1">
<form>
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</form>
</div>
<div id="2">
<form>
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</form>
</div>
<div id="3">
<form>
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
<input type="text">
</form>
</div>
This works just fine for the radio buttons, but now that we have a form, hitting enter on the text <input> actually submits the form, instead of autosaving (technically, in addition to autosaving). At the time, this never even occurred to me, since we somehow managed to avoid this everywhere else in the application.
I can think of a few different solutions to this problem: setting a submit handler on the form, setting a submit handler on the text input, leaving the text input outside the form. But these seem like hacks to deal with what I would say is broken behavior. If input elements work outside of forms, then grouping input elements should work outside of forms. And since we're already using the name attribute (which works for everything else), unique names isn't really an option.
So is there a best practice for situations like this? Is there an element other than <form> that will properly scope radio buttons? Am I just going to have to live with <form onsubmit="return false;">?
P.S. We support IE 8+
UPDATE
This is what I ended up with:
<div id="1">
<form onsubmit="return false;">
<input type="radio" name="choose" value="yes"> Yes
<input type="radio" name="choose" value="no"> No
</form>
<input type="text">
</div>
Best thing to do would be to change the names of each group to be unique.
Second best would be to group them by form like you have done, and add the return false.
Third best would be to block form submission using jquery 'preventdefault' (which could work for all forms given a particular id).
Last (and the most ridiculous option) would be to send each group of buttons to it's own small html file and use iframes to display them on the same page.
The Submit button on this form does nothing unless I remove style="display:none" from the template=row div. Why??
(The name of each form control is populated dynamically by javascript, however, to simplify troubleshooting, I ran the form without the javascript and the problem boils down to whether or not that display tag is there).
This is what Chrome console says:
bundleAn invalid form control with name='' is not focusable.
bundleAn invalid form control with name='label' is not focusable.
bundleAn invalid form control with name='unique' is not focusable
HTML:
<form method="POST" action="/add/bundle">
<p>
<input type="text" name="singular" placeholder="Singular Name" required>
<input type="text" name="plural" placeholder="Plural Name" required>
</p>
<h4>Asset Fields</h4>
<div class="template-view" id="template_row" style="display:none">
<input type="text" data-keyname="name" placeholder="Field Name">
<input type="text" data-keyname="hint" placeholder="Hint">
<select data-keyname="fieldtype" required>
<option value="">Field Type...</option>
</select>
<input type="checkbox" data-keyname="required" value="true"> Required
<input type="checkbox" data-keyname="search" value="true"> Searchable
<input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
<input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
<input type="radio" data-keyname="label" value="label" name="label" required> Label
<input type="radio" data-keyname="unique" value="unique" name="unique" required> Unique
<button class="add" type="button">+</button>
<button class="remove" type="button">-</button>
</div>
<div id="target_list"></div>
<p><input type="submit" name="form.submitted" value="Submit" autofocus></p>
</form>
The cause seems to be HTML 5 constraint validation - it's the require attribute. Chrome has started supporting this with it's recent versions.
Apparently it seems like this is a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for your submit button.
I assume that this is actually a security feature that prevents submitting supposed user data by submitting manipulated, hidden content, this quote points in that direction:
If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.
Your inputs are of type text, so their purpose is to let users enter data, submitting their content while hidden is something that a user probably wouldn't want.
If you still want to submit hidden inputs while using client validation, I would suggest using <input type="hidden"> instead - I could imagine that there is no error on validation there because they are intended to be invisible.
I made a JSFiddle to explore your problem here, and I managed to fix it by adding checked to your radiobutton inputs like so: <input type="radio" data-keyname="label" value="label" name="label" required checked>. In your code above, the radio buttons are not checked, but since they are marked as required the form is failing validation and Chrome refuses to submit the form.
How do I use the Tab key to navigate to a button or select element in Firefox? I've tried setting the tabindex attribute to no avail. I'm on a Mac.
If you're using a Mac, you need to open the Keyboard preference panel, switch to the Keyboard Shortcuts tab and select:
"press Tab to move the keyboard focus between: (x) All controls"
If you know of a (preferably simple) page where this works, you might want to take a look at their source.
Also, are you sure your HTML document has the keyboard focus when trying? I'm asking because I seem to recall I can navigate to such elements with TAB in plain HTML pages where I did nothing to indicate tab order or similar.
Please post your code. Here's an example from the w3c (http://www.w3.org/TR/html401/interact/forms.html#h-17.10):
<FORM action="..." method="post">
<P>
<FIELDSET>
<LEGEND>Personal Information</LEGEND>
Last Name: <INPUT name="personal_lastname" type="text" tabindex="1">
First Name: <INPUT name="personal_firstname" type="text" tabindex="2">
Address: <INPUT name="personal_address" type="text" tabindex="3">
...more personal information...
</FIELDSET>
<FIELDSET>
<LEGEND>Medical History</LEGEND>
<INPUT name="history_illness"
type="checkbox"
value="Smallpox" tabindex="20"> Smallpox
<INPUT name="history_illness"
type="checkbox"
value="Mumps" tabindex="21"> Mumps
<INPUT name="history_illness"
type="checkbox"
value="Dizziness" tabindex="22"> Dizziness
<INPUT name="history_illness"
type="checkbox"
value="Sneezing" tabindex="23"> Sneezing
...more medical history...
</FIELDSET>
<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now"
type="radio"
value="Yes" tabindex="35">Yes
<INPUT name="medication_now"
type="radio"
value="No" tabindex="35">No
If you are currently taking medication, please indicate
it in the space below:
<TEXTAREA name="current_medication"
rows="20" cols="50"
tabindex="40">
</TEXTAREA>
</FIELDSET>
</FORM>