I have a settings page in my Chrome extension and I am wondering what is the recommended ("best") way of obtaining user input. In my particular case, I need to present a set of combo choices along with a button. When the button is clicked, a javascript function should be executed. My understanding is that if I use a , this will post a request which I don't want (it causes the page to flash & reload). I want all of this to be client-side. Here is what I have so far (below). How can this be changed? Thanks in advance.
<form>
<input type="radio" name="format" value="format1"/>(xxx) xxx-xxxx<br/>
<input type="radio" name="format" value="format2"/>xxx-xxx-xxxx<br/>
<input type="radio" name="format" value="format3"/>xxx.xxx.xxxx<br/>
<input type="submit" value="Convert"/>
</form>
Bob, well, you can do everything in JavaScript. And since this is a Chrome Extension, feel free to use just HTML5.
<section>
<input type="radio" name="format" value="format1"/>(xxx) xxx-xxxx<br/>
<input type="radio" name="format" value="format2"/>xxx-xxx-xxxx<br/>
<input type="radio" name="format" value="format3"/>xxx.xxx.xxxx<br/>
<button id="btnConvert">Convert</button>
<script>
document.querySelector('#btnConvert').addEventListener('click', function(e) {
var format = document.querySelector('input[type="radio"]:checked');
alert( format.value);
}, false);
</script>
</section>
Hope that helps!
Related
I'm trying to enable a submit/go-to site button when only one of my checkboxes(any single box) has been checked - can anyone help?
this is the checkbox I'm using
<input type="checkbox" id="number2" name="number2" value="2">
<label for="number2">02 </label>
hope that helps
if you could give me help using HTML and CSS as I don't know how to use scripts that would be great thanks
try it:
<input type="checkbox" id="number2" name="number2" checked />
the checked attribute is for Checkbox Input element, when you use it and open your page, it have to check your checkbox automatic!
You have to use JS, sample:
<input type="checkbox" id="number2" name="number2" value="2" onclick="
if (this.checked)
document.getElementById('SomeSubmitButton').enable = true;
">
I told:
When user clicked on this Checkbox, enable #SomeSubmitButton if that's checked.
I am working on this little project with an online order service for pizzas.
(using Spring Web MVC, Thymeleaf, ...)
Yesterday, someone helped me out adding inputs for selecting an specific amount and size.
<div>
<form th:action="#{/saveOrderAndReload(name=${pizza.name})}" method="post">
<div class="input-group">
<span class="input-group-addon">Bestellmenge (min. 1, max. 10):</span>
<input type="number" name="amount" class="form-control" min="1" max="10" placeholder="1"/>
</div>
<div class="input-group">
<input type="radio" name="size" value="1"> Klein</input>
<input type="radio" name="size" value="2"> Mittel</input>
<input type="radio" name="size" value="3"> Gross</input>
</div>
<div class="form-group">
<div class="form-group">
<input type="submit" class="btn btn-primary btn-success" value="zur Bestellung hinzufuegen"/>
</div>
</div>
</form>
The "amount" field protects the application itself from false input because it only allows integers from 1-10, otherwise the User gets a notification asking for an numeric input.
The radio input where you can select between 3 sizes has 2 problems:
1) The buttons arent among themselfes, they are next to each other.
2) I dont know how to prevent the user from doing no input.
I looked around for quite some time finding the standart html version for this:
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
And something like this:
<ul>
<li th:each="ty : ${allTypes}">
<input type="radio" th:field="*{type}" th:value="${ty}" />
<label th:for="${#ids.prev('type')}" th:text="#{${'seedstarter.type.' + ty}}">Wireframe</label>
</li>
</ul>
We didnt learn anything about the second one so I decided to use the standart html. But I does not want to work like that example: It gets errors that this "checked" expression is not allowed, " tag is not closed" and whatnot.
So my questions are:
1) What can I do to make the input look better?
2) How can I set like a placeholder or standart value so the application always gets this input and does not crash?
As you might have realized I am a complete beginner with this type of stuff so be lenient ;)
Answer 1
If you want the change the way the radio buttons are looking, this might help: http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/.
Some notes and Answer 2
It gets errors that this "checked" expression is not allowed, " tag is
not closed" and whatnot.
Thymeleaf dies not allow attribute minimization. That means that you need to provide a value for each attribute. You just have to use checked="checked" instead of checked.
<form method="post">
<!-- Make sure to always set a value for attributes when using thymeleaf (use checked="checked" instead of checked) -->
<div><input type="radio" name="gender" value="male" checked="checked" />Male</div>
<div><input type="radio" name="gender" value="female" />Female</div>
<div><input type="radio" name="gender" value="other" />Other</div>
</form>
This is actually wrong:
The "amount" field protects the application itself from false input
because it only allows integers from 1-10, otherwise the User gets a
notification asking for an numeric input.
You are only validating on the client side. Clientside validation is okay if you want to give your users feedback even before they submit your form but it is not enough to protect yourself from bad input.
Nathan Long does explain why client side validation is not enough pretty well (JavaScript: client-side vs. server-side validation):
It is very dangerous to trust your UI. Not only can they abuse your
UI, but they may not be using your UI at all, or even a browser. What
if the user manually edits the URL, or runs their own Javascript, or
tweaks their HTTP requests with another tool? What if they send custom
HTTP requests from curl or from a script, for example?
As you are using spring-mvc you should take adventage of it and take a look at the following tutorial: https://spring.io/guides/gs/validating-form-input/.
To provide default values when working with spring-mvc you can just give the field a value:
public class PersonForm {
// this field will have a default value (foo)
// NotNull will ensure that a value is set for this field when validated by spring (however it can be an empty string... take a look at hibernates #NotBlank annotation if you want to prevent empty string or use a regex)
#NotNull
private String gender = "foo";
}
However default values often dont make sense for input[type="text"]. If you want to prodive a placeholder for any input you could just use the html attribute placeholder="the placeholder":
<input type="text" name="name" value="" placeholder="Enter your name" />
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.
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>
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.