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>
Related
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();
I want to add a custom validation message to my radio buttons group that I have.
It works fine in the below conditions:
If I select the second radio button "female" and click on submit.
If I select the first radio button "male" and click on submit.
If I do not select any radio button and click on submit, it shows me the validation message. On selecting the first radio button and clicking submit, the form is submitted.
It does not work in the below condition:
If I click on submit without checking any radio button, it shows me the validation message. After that if I select the second radio button "female" and click on submit, it still shows me the validation message on the first radio button "male".
Below is the code I have written
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="overlay">
</div>
<div class="container">
<form id="myForm">
<div class="row">
<input type="radio" name="gender" value="male" required
oninvalid="this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
<label for="male">Male</label>
<br>
<input type="radio" name="gender" value="female" required
oninvalid="this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
<label for="female">Female</label>
<br>
</div>
<div class="row">
<div class="col">
<input class="submit_button" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</body>
</html>
I know this custom validation issue can be fixed by writing a function in javascript/jquery. But I would like to know if there is a way to do this inline or if there is any documentation that states it cannot be done.
Note : If I do not put the custom validation code oninvalid="this.setCustomValidity('Please select your gender')" oninput="this.setCustomValidity('')". All the conditions work correctly.
You can do this.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="overlay">
</div>
<div class="container">
<form id="myForm">
<div class="row">
<input type="radio" name="gender" id="gender" value="male">
<label for="male">Male</label>
<br>
<input type="radio" name="gender" id="gender" value="female">
<label for="female">Female</label>
<br>
</div>
<div class="row">
<div class="col">
<input class="submit_button" type="submit" value="Submit" onClick="ValidateForm(this.form)">
</div>
</div>
</form>
</div>
<script type="text/javascript">
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) )
{
alert ( "Please select your gender" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
</body>
</html>
Your code:
<input type="radio" name="gender" value="male" required
oninvalid="this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
<input type="radio" name="gender" value="female" required
oninvalid="this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
try this instead (no JS technically):
<input type="radio" name="gender" value="male" required
oninvalid="if(!document.querySelector('input[name=\'gender\'][checked=true]').length >= 1)this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
<input type="radio" name="gender" value="female" required
oninvalid="if(!document.querySelector('input[name=\'gender\'][checked=true]').length >= 1)this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
Working link
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>
Please see the code below.
<!DOCTYPE html>
<html>
<body>
<form action="#" method="post" id="frmIdSave" name="frmNmSave" onsubmit="alert('Save');return false;">
<div>
<input type=submit class="greyBttn" value="Save" id="btnIdSave" name=btnNameSave/>
<input type="hidden" name="testsave" value="1" />
</form>
<form action="#" id="frmback" name="frmback" onsubmit="alert('Back');return false;">
<input type="submit" class="greyBttn" value="Back" id="btnIdBack" name="btnNameBack"/>
<input type="hidden" name="testback" value="1" />
</form>
</div>
</body>
</html>
On IE11/Edge The back button is firing the onsubmit event on both forms on the page.
This is because the first form tag is outside the Div.
How can I get round this?
Thanks
Simon
This is because the first form tag is outside the Div.
Yes
How can I get round this?
Write valid HTML. Move it inside the div.
I have resolved it with the code below.
It is worth noting though that when you submit using javascript, then the onsubmit event on the form is not called, so the complete solution for this would abstract any onsubmit code into a separate function.
<!DOCTYPE html>
<html>
<body>
<form action=# method=post id=frmIdSave name=frmNmSave onsubmit="alert('Save');return false;">
<div>
<input type=submit class="greyBttn" value="Save" id=btnIdSave name=btnNameSave/>
<input type=hidden name=testsave value='1'/>
<input type=button class="greyBttn" onclick='document.getElementById("frmback").submit();' value="Back" id=btnIdBack name=btnNameBack/>
</div>
</form>
<form action=# id=frmback name=frmback onsubmit="alert('Back');return false;">
<input type=hidden name=testback value='1'/>
<input type=submit>
</form>
</body>
</html>
I want to use an image as a submit button for a form:
<!DOCTYPE html>
<html>
<body>
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok">
<input type="image" src="/images/button.png">
</form>
</body>
</html>
The HTML above will result in a clickable image, but also a regular submit button right next to the image with the text http://127.0.0.1:80/cgi-bin/script.cgi.
I only want the image the be shown. What am I doing wrong?
EDIT:
This will work if CSS is enabled: https://stackoverflow.com/a/1193338/5185801
Close <input> tags properly like
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok" />
<input type="image" src="/images/button.png" />
</form>
I don't see any problem.
Check out this fiddle.
Here is the snippet.
<body>
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok" />
<input type="image" src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6" />
</form>
</body>