I have two radio buttons. Each one has one associated text box. If I click one radio button and then submit an alert box should be shown if the associated text box is empty. How can I achieve this?
<form action="#" name="form1" id="form1" method="post" onsubmit="return check_workorder()">
<input type="radio" name="click" id="click1" checked="checked" value="date"/>
<strong>Start Date
<input type="text" id="my_date_field" name="my_date_field" class="datepicker" style="width:80px;"/>
</strong>
<script language="JavaScript" type="text/javascript">
new Control.DatePicker('my_date_field', { icon: 'images/calendar.png' });
</script>
</br><br />
<input type="radio" name="click" id="click2" value="order" />
<strong>Work order no
<input type="text" name="workno" id="workno" style="width:100px;"/>
</strong><span class="submit">
<input type="submit" name="submit" value="submit" onclick="return check_workorder()"/>
the javascript is
function check_workorder() {
if (document.forms.form1.elements.click.value == "date") {
var dat = (form1.my_date_field.value);
if (dat == "") {
alert("please select date");
return false;
}
} else if (document.forms.form1.elements.click.value == "order") {
var wor = (form1.workno.value);
if (wor == "") {
alert("please enter work order no");
return false;
}
}
}
if (document.forms.form1.elements.click.value == "date") {
if (document.forms.form1.elements.click.checked) {
//the radio button is checked
}
}
Related
How to get an Alert on Submit when I left a TextBox empty And It Should Turn To the Next page on submit.
Must Reply,
Thank You.
You can try this :
HTML :
<form action="" method="POST" id="myForm">
<input id="myInput" type="text" />
<input type="submit" />
</form>
(Replace the action attribute by the url of your destination page, the one you call the "next page").
JS (without jQuery):
var myForm = document.querySelector('#myForm');
var myInput = document.querySelector('#myInput');
myForm.addEventListener('submit', function(pEvent) {
if(myInput.value === '') {
pEvent.preventDefault(); //Prevents the form to be sent
alert('Ho! Stop!');
//Do whatever you want
}
});
JS (with jQuery) :
var myForm = $('#myForm');
var myInput = $('#myInput');
myForm.on('submit', function(pEvent) {
if(myInput.val() === '') {
pEvent.preventDefault(); //Prevents the form to be sent
alert('Ho! Stop!');
}
});
Demo : http://jsfiddle.net/af9qvkmp/9/
Here is the demo, based on jQuery!
HTML
<form action="" method="POST" id="form">
<input id="input1" type="text" />
<input id="input2" type="text" />
<input id="input3" type="text" />
<input id="input4" type="text" />
<input id="input5" type="text" />
<input type="submit" />
</form>
JS
$(function() {
$('#form').on('submit', function(event) {
var isError = false;
$(this).find('input[type="text"]').each(function() {
if($(this).val() == '') {
console.log($(this));
isError = true;
return false;
}
});
if(isError) {
event.preventDefault();
alert("Got Error");
} else {
// Submit the form
}
});
});
In form tag write
<form action="" method="post" enctype="multipart/form-data" onsubmit="return checkform(this);">
This is your input field
<input type="text" name="reviewValue" value="" id='starRate2' required>
Javascript Code:
<script language="JavaScript" type="text/javascript">
function checkform ( form ){
if (form.reviewValue.value == "") {
alert( "Please choice your Rating." );
form.reviewValue.focus();
return false ;
}
return true ;
}
</script>
I have a code with button Click. When i click text appears in textbox. It woks. But i have a problem to write anoter type of code. I want to fill the textbox using radio buttons but without button Click. So when I click in a radio I want to show text in textbox. Here is my code.
<script type="text/javascript">
function testResults (form) {
var TestVar1 = form.input[0].checked;
var TestVar2 = form.input[1].checked;
var TestVar3 = form.input[2].checked;
var TestVar4 = form.input[3].checked;
if (TestVar1 == true) {
form.textbox.value = "Earth is...";
} else if (TestVar2 == true){
form.textbox.value = "Mars is...";
} else if (TestVar3 == true){
form.textbox.value = "Jupiter is...";
} else if (TestVar4 == true){
form.textbox.value = "Saturn is...";
}
}
</script>
</head>
<body>
<center>
<h1>Our Universe</h1>
</center>
<form>
Select Planet<br />
<input type="radio" name="input" onclick='check_value(0)'/>Earth<p>
<input type="radio" name="input" onclick='check_value(1)'/>Mars<p>
<input type="radio" name="input" onclick='check_value(2)'/>Jupiter<p>
<input type="radio" name="input" onclick='check_value(3)'/>Saturn<p>
<input type="button" name="button" value="Click" onClick="testResults(this.form)"><p>
<textarea name="comments" id="textbox" rows="5" cols="50"></textarea>
</form>
</body>
To do that on clicking radio butttons a way could be this:
<input type="radio" name="input" onclick="check_value(this.value)" value="Earth" />Earth<p>
<input type="radio" name="input" onclick="check_value(this.value)" value="Mars"/>Mars<p>
<input type="radio" name="input" onclick="check_value(this.value)" value="Jupiter"/>Jupiter<p>
<input type="radio" name="input" onclick="check_value(this.value)" value="Saturn"/>Saturn<p>
and js:
function check_value(txt){
document.form.textbox.value = txt + " is...";
}
See if is this you want.
<script type="text/javascript">
function check_value (value,form) {
if (value == 0) {
form.textbox.value = "Earth is...";
} else if (value == 1){
form.textbox.value = "Mars is...";
} else if (value == 2){
form.textbox.value = "Jupiter is...";
} else if (value == 3){
form.textbox.value = "Saturn is...";
}
}
</script>
</head>
<body>
<center>
<h1>Our Universe</h1>
</center>
<form>
Select Planet<br />
<input type="radio" name="input" onclick='check_value(0,this.form)'/>Earth<p>
<input type="radio" name="input" onclick='check_value(1,this.form)'/>Mars<p>
<input type="radio" name="input" onclick='check_value(2,this.form)'/>Jupiter<p>
<input type="radio" name="input" onclick='check_value(3,this.form)'/>Saturn<p>
<input type="button" name="button" value="Click" onClick="testResults(this.form)"><p>
<textarea name="comments" id="textbox" rows="5" cols="50"></textarea>
</form>
</body>
Process: first line "would you like to add you children" If "Yes" then check Textbox validation if "No" then continue to Submit form. See bellow image
Problem: Validation work but when select "No" then also validation checking in backend and disable submit button automatically.
Button code
<form>
<div class="main-fre">
<label>Would you like to add your Child(ren) now?</label>
<input style="margin-left: 10px;" class="main-fre" type="radio" name="child" value="yes" />Yes
<input class="" type="radio" name="child" value="no" />No
</div>
<div class="childform">
<div class="cls-input">
<label>First name:</label>
<input id="first_name" type="text" name="fname" value="" required="required" /><span class="reg-error" id="first_name_alert" style="font-size: 13px;width: 60%;"></span><br /><br />
</div></div>
<div class="submit_file">
<a class="wpcf7-submit1" id="prev" href="javascript:void(0);">Previous</a>
<input class="wpcf7-submit1" id="submit_file" style="font-size: 15px;" type="submit" name="submit" value="Submit" />
</div>
</form>
JQuery Code
jQuery(document).ready(function(){
jQuery("input:radio").change(function(){
var $value = jQuery("form input[type='radio']:checked").val();
if($value === 'no')
{
jQuery(".childform").hide();
}
else
{
jQuery(".childform").show();
}
});
jQuery("input:radio").change();
jQuery("#submit_file").click(function(){
var $value = jQuery("form input[type='radio']:checked").val();
if($value === 'yes')
{
var $first_name = jQuery("input#first_name").val();
if($first_name == '')
{
jQuery('#confirmemailmsg').css('display','none');
document.getElementById("first_name_alert").innerHTML="Please enter first name."
return false;
}
}
});
});
Can you suggestion me.
Thank you.
As mentioned by MelanciaUK, when no is selected you must remove the required attribute to avoid validating the empty name input on submit.
jQuery(document).ready(function(){
jQuery("input:radio").change(function(){
var valueA = jQuery("form input[type='radio']:checked").val();
if(valueA === 'no'){
//remove required attribute from first_name input
$("#first_name").removeAttr("required");
jQuery(".childform").hide();
}else{
jQuery(".childform").show();
}
});
jQuery("input:radio").change();
jQuery("#submit_file").click(function(){
var valueA = jQuery("form input[type='radio']:checked").val();
if(valueA === 'yes'){
var first_name = jQuery("input#first_name").val();
if(first_name == ''){
jQuery('#confirmemailmsg').css('display','none');
document.getElementById("first_name_alert").innerHTML="Please enter firs name."
return false;
}
}
});
});
working in jsfiddle
I am trying to validate a form, to make sure that the user inputs a value into a textbox. Here's my Javascript:
var formValidation = function(a) {
if (document.getElementById(a).value == "") {
alert('Please fill out the ' + a + ' field');
return false;
}
else {
return true;
}
}
And here's the form:
<div id="cultdiv">
<form action="add.php" method="POST">
<span><input type="hidden" name="id" id="cultid"/>
<input type="text" onSubmit ="formValidation('culture')" name="name" id="culture"/>
<input type="hidden" name="type" value="culture" />
<input type="submit" value="add/update" /></span>
</form>
</div>
For some reason it doesn't stop the form from being submitted or give the alert message.
You forgot to return from your inline handler.
Also, <input>s don't have an onsubmit event; you probably meant to put that in the <form>.
slaks means something along these lines.
<script>
var formValidation = function() {
if (document.getElementById('culture').value == "") {
alert('Please fill out the culture field');
return false;
}
else {
return true;
}
}
<div id="cultdiv">
<form action="add.php" method="POST" onsubmit="return formValidation(this)">
<span><input type="hidden" name="id" id="cultid"/>
<input type="text" name="name" id="culture"/>
<input type="hidden" name="type" value="culture" />
<input type="submit" value="add/update" /></span>
</form>
</div>
my html code-
<form method="post" name="editorform" id="editorform" onsubmit="return validate_editorform(this)" action="#">
<ol><li>
<label for="qtitle"><b>Title</b></label>
<input id="qtitle" name="qtitle" class="text"></textarea>
</li><li>
<label for="tag"><b>Tag</b></label>
<table border="0">
<tr>
<td><input type="radio" name="tag" value="art"/>Art & Living</td>
<td><input type="radio" name="tag" value="travel" class="rdbtn"/>Travel</td>
<td><input type="radio" name="tag" value="religion" class="rdbtn"/>religion</td>
</tr>
.....
my javascript-
function validate_editorform(editorform)
{
var qtitle = editorform.qtitle.value;
var tag = editorform.tag.value;
var question = editorform.question.value;
var nameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
if(qtitle == "") {
inlineMsg('qtitle','You must enter a Question title.',5);
return false;
}
if(editorform.tag.checked == "") {
inlineMsg('tag','You must Tag your question.',5);
return false;
}
if(question == "") {
inlineMsg('question','You must enter a your Question.',5);
return false;
}
}
For qtitle and question JavaScript is working fine but for radio button (tag) it isn't. Can anyone identify the problem?
Change
if(editorform.tag.checked == "") {
to
if(tag == "") {
if(editorform.tag[0].checked == False... and so on for tag[1]...)
<html>
<head>
<title>Validating Radio Button</title>
<script>
select = ""
len = document.myform.radioname.length
for (i = 0; i <len; i++) {
if (document.myform.radioname[i].checked) {
select = document.myform.radioname[i].value
}
}
if (select == "") {
alert("No Option selected");
return false;
}
else {
alert("option selected");
return true;
}
</script>
</head>
<body>
<form name="myform" action="thankyou.html" onsubmit="return validateForm()" method="post">
Choose your favourite Car Brand
<input type="radio" name="radioname" value="maruti">Maruti<br>
<input type="radio" name="radioname" value="fiat">Fiat<br>
<input type="radio" name="radioname" value="BMW">BMW<br>
<input type="radio" name="radioname" value="jaguar">Jaguar<br>
</form>
</body>
</html>