I want to auto submit when all radio selected, here is my code.
<form name="quiz" ng-submit="quiz.answer(selected)">
<label>
<input type="radio" ng-model="selected" ng-value="red">
Red
</label><br/>
<label>
<input type="radio" ng-model="selected" ng-value="green">
Green
</label><br/>
<input type="submit" id="submit" value="Submit" />
</form>
You should add a java-script function and trigger it every time the user clicks on one of the radio buttons.
Here, as there are only two radio buttons, I have used && but in a case that the number of them is more than two you can have a counter value for all of them as well.
Here's the code that you can use:
function check() {
if (document.getElementById("first").checked && document.getElementById("second").checked) {
alert("triggered");
document.getElementById('myForm').submit();
}
}
<!DOCTYPE html>
<html>
<body>
<form name="quiz" id="myForm" action="https://www.google.com">
<label>
<input type="radio" ng-model="selected" ng-value="red" id="first" onClick="check();">
Red
</label><br/>
<label>
<input type="radio" ng-model="selected" ng-value="green" id="second" onClick="check();">
Green
</label><br/>
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
Add an onClick() event ...
Give your form an ID
<form id="quiz" name="quiz" ng-submit="quiz.answer(selected)">
Then call that ID and submit
<input type="radio" ng-model="selected" ng-value="green"
onClick="document.getElementById('quiz').submit();">
You can give check whether the radio is selected or not using JS. Later you can click the submit button using JS if the condition meets your use case.
To click button:
document.getElementById('submit').click();
Related
The web page I am working on requires a few html radio buttons at the bottom of a large picture. I included the id the type the name. But when I load the page, none of the radios will select.
<fieldset>
<form id="radio" action="" method="GET">
<input id="pic-1" type="radio" name="jumbotron-radio" value="1">
<input id="pic-2" type="radio" name="jumbotron-radio" value="2">
<input id="pic-3" type="radio" name="jumbotron-radio" value="3">
</form>
</fieldset>
Why won't an html5 required on radio button group reset with form reset button if it was selected. for example you have a radio button group in a form with the html5 required set if you select one of the radio buttons then click the reset form button it doesn't reset the radio button group required validation so even though the form was reset. So basically you click submit button without selecting anything the radio buttons are given an outline in red then you select one and click reset you are then able to submit the form without selecting a radio button? any help on why it does this would be greatly appreciated. I may misunderstand how its supposed to work.
Simple test
<html>
<form>
<input type="radio" name="test" required>
<input type="radio" name="test" required>
<input type="submit" value="submit">
<input type="reset" value="cancel">
</form>
</html>
It is because you are using same name for the radio buttons.If you give the same name only one radio button of the can be checked.And so it passes the Validation
Example : Different name for radio buttons.
<form>
<input type="radio" name="test" required>
<input type="radio" name="test2" required>
<input type="submit" value="submit">
<input type="reset" value="cancel">
</form>
Example : Same name for radio buttons.
<form>
<input type="radio" name="test" required>
<input type="radio" name="test" required>
<input type="submit" value="submit">
<input type="reset" value="cancel">
</form>
You need to give them different value attributes (but the same name so it's clear that those are two different options for the same "question" and only one of them should be selectable):
<html>
<form>
<input type="radio" name="test" value="1" required>1
<input type="radio" name="test" value="2" required>2<br>
<input type="submit" value="submit">
<input type="reset" value="cancel">
</form>
</html>
I am programming a webpage that uses a series of radio buttons and drop down menus to change the data that is displayed on the screen. Each radio corresponds to one of the drop down menus and I want to line them up but I can't figure out how to get the third one to appear to the right of the other two instead of below them. Can anyone help?
Here's my code:
<form action="" style="float: left">
<input type="radio" name="yearLessGreaterOption" value="<" onchange="setYearLessGreaterFilter(this.value)"><
<input type="radio" name="yearLessGreaterOption" value="=" onchange="setYearLessGreaterFilter(this.value)" checked>=
<input type="radio" name="yearLessGreaterOption" value=">" onchange="setYearLessGreaterFilter(this.value)">>
</form>
<form action="">
<input type="radio" name="roundLessGreaterOption" value="<" onchange="setRoundLessGreaterFilter(this.value)"><
<input type="radio" name="roundLessGreaterOption" value="=" onchange="setRoundLessGreaterFilter(this.value)" checked>=
<input type="radio" name="roundLessGreaterOption" value=">" onchange="setRoundLessGreaterFilter(this.value)">>
</form>
<form action="">
<input type="radio" name="goalsH1LessGreaterOption" value="<" onchange="setGoalsH1LessGreaterFilter(this.value)"><
<input type="radio" name="goalsH1LessGreaterOption" value="=" onchange="setGoalsH1LessGreaterFilter(this.value)" checked>=
<input type="radio" name="goalsH1LessGreaterOption" value=">" onchange="setGoalsH1LessGreaterFilter(this.value)">>
</form>
Here's a picture of the page in question:
Is there a reason you want them in form tags? If you remove the tags, they will appear aligned. Otherwise, adding style="float:left;" to the other form tags will do the trick.
In your case, adding the style="float: left" on the other forms should do what you want.
My code is
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" onclick='this.form.action="p1.php";'>
<input type="submit" name="s2" id="s2" value="Submit2" onclick='this.form.action="p2.php";'>
</form>
Now I want, if I click on submit1 p1.php should open and I can only access value of text1 and not text2.
Similarly, if I click on submit2 p2.php should open and I can only access value of text2 and not text1.
The pages are openning but I can access both the values ie t1 and t2
I only want to do it with html no js and jquery and I need to make only one form.
NO separate forms allowed.
You can use the attribute formaction on the submit button to change the current action of your form, without using JS. See formaction spec. In case you need to support older browsers like IE9- you can simply use webshim to polyfill it:
<script>
if(!('formAction' in document.createElement('input')){
webshim.polyfill('forms');
}
</script>
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" formaction="p2.php">
<input type="submit" name="s2" id="s2" value="Submit2" formaction="p2.php">
</form>
hy sam,
Your question look like wrong may be you are asking to submit all form values in different action using two submit button in a single form.
may be this code will help you to submit values in different form action
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" formaction="p1.php">
<input type="submit" name="s2" id="s2" value="Submit2" formaction="p2.php">
</form>
If you do not want to use javascript, the only solution that I can think of is to use two HTML forms.
<form method="post">
<input type="text" name="t1" id="t1">
<input type="submit" name="s1" id="s1" value="Submit1" onclick='this.form.action="p1.php";'>
</form>
<form method="post">
<input type="text" name="t2" id="t2">
<input type="submit" name="s2" id="s2" value="Submit2" onclick='this.form.action="p2.php";'>
</form>
i have a html form to develope. but form is not getting submitted until i don't press Submit button. i want, when we select any radio button or checkbox and press Enter it should be submitted
my html is like:
<html>
<head>
<title>select preferences</title>
</head>
<body>
<input type="radio" name="sex" value="male" /> Male<br/>
<input type="radio" name="sex" value="female" /> Female<br/>
<button type="submit">Click Me!</button>
</body>
</html>
please help me resolve this. and give some links for related tutorial.
You're missing the <form> tag.
Have a look here.
On change of your radio buttons, submit the form using:
$('#form-id').submit();
So, your HTML should be:
<form id='form-id' method='post' action=''>
<input type="radio" name="sex" value="male" /> Male<br/>
<input type="radio" name="sex" value="female" /> Female<br/>
<button type="submit">Click Me!</button>
</form>
and your script should be:
$(function(){
$('input[type=radio]').change(function(){
$('#form-id').submit();
});
});
Add form tag
<form method="post" action="somepage">
//add you inputs here
<form>