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>
Related
i'm creating forms and needed to use "enter key press as tab key" to focus next text fields and after completion of the form, button should be pressed.
my code works except for the button press part, it does nothing to the button.
thanks in advance...
$(window).load(function(){
document.getElementById("Editbox1").focus();
function tab(e) {
if (e.which == 13) {
e.target.nextSibling.nextSibling.focus();
e.preventDefault();
}
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++)
{
var input = inputs[x];
input.onkeypress = tab;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wb_Form1" style="position:absolute;background-color:#F7F9FC;left:307px;top:153px;width:377px;height:256px;z-index:5">
<form name="Form1" method="post" action="#" enctype="text/plain" id="Form1">
<input type="text" id="Editbox1" style="position:absolute;left:195px;top:65px;width:170px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:0" name="Editbox1" value="">
<input type="text" id="Editbox2" style="position:absolute;left:196px;top:98px;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
<input type="submit" id="Button1" name="" value="Submit" style="position:absolute;left:198px;top:134px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:2">
<img src="images/img0001.gif" id="Text1" alt="" border="0" style="position:absolute;left:65px;top:72px;width:113px;height:16px;z-index:3">
<img src="images/img0002.gif" id="Text2" alt="" border="0" style="position:absolute;left:65px;top:102px;width:113px;height:16px;z-index:4">
</form>
</div>
You need to differentiate the button click by its id, you have two approaches
1st you can bind the enter function by using the length of the inputs, get last id and differentiate it.
$(window).load(function() {
document.getElementById("Editbox1").focus();
function tab(e) {
if (e.which == 13) {
console.log('test');
e.target.nextSibling.nextSibling.focus();
e.preventDefault();
}
}
function submitForm(e) {
if (e.which == 13) {
document.getElementByName("Form1").submit();
}
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++) {
var input = inputs[x];
if (x === (inputs.length - 1)) {
input.onkeypress = submitForm;
} else {
input.onkeypress = tab;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wb_Form1" style="position:absolute;background-color:#F7F9FC;left:307px;top:153px;width:377px;height:256px;z-index:5">
<form name="Form1" method="post" action="#" enctype="text/plain" id="Form1">
<input type="text" id="Editbox1" style="position:absolute;left:195px;top:65px;width:170px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:0" name="Editbox1" value="">
<input type="text" id="Editbox2" style="position:absolute;left:196px;top:98px;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
<input type="text" id="Editbox3" style="position:absolute;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
<input type="submit" id="Button1" name="" value="Submit" style="position:absolute;left:198px;top:134px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:2">
<img src="images/img0001.gif" id="Text1" alt="" border="0" style="position:absolute;left:65px;top:72px;width:113px;height:16px;z-index:3">
<img src="images/img0002.gif" id="Text2" alt="" border="0" style="position:absolute;left:65px;top:102px;width:113px;height:16px;z-index:4">
</form>
</div>
2nd one you can differentiate it using button id when enter is pressed.
if (e.which == 13 && e.target.id !== "Button1") {
$(window).load(function() {
document.getElementById("Editbox1").focus();
function tab(e) {
if (e.which == 13 && e.target.id !== "Button1") {
console.log('test');
e.target.nextSibling.nextSibling.focus();
e.preventDefault();
}else{
alert('submit')
}
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++) {
var input = inputs[x];
input.onkeypress = tab;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wb_Form1" style="position:absolute;background-color:#F7F9FC;left:307px;top:153px;width:377px;height:256px;z-index:5">
<form name="Form1" method="post" action="#" enctype="text/plain" id="Form1">
<input type="text" id="Editbox1" style="position:absolute;left:195px;top:65px;width:170px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:0" name="Editbox1" value="">
<input type="text" id="Editbox2" style="position:absolute;left:196px;top:98px;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
<input type="text" id="Editbox3" style="position:absolute;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
<input type="submit" id="Button1" name="" value="Submit" style="position:absolute;left:198px;top:134px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:2">
<img src="images/img0001.gif" id="Text1" alt="" border="0" style="position:absolute;left:65px;top:72px;width:113px;height:16px;z-index:3">
<img src="images/img0002.gif" id="Text2" alt="" border="0" style="position:absolute;left:65px;top:102px;width:113px;height:16px;z-index:4">
</form>
</div>
I have these blocks:
function generateEmail(){
if
(document.getElementById('emailOpt1').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt1.value
}
else if
(document.getElementById('emailOpt2').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt2.value
}
else if
(document.getElementById('emailOpt3').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt3.value
}
else if
(document.getElementById('emailOpt4').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt4.value
}
}
and this:
<div class="radioEmailType" id="emailClass">
<input type="radio" id="emailOpt1" name=emailType value="email_c1">
<label for="emailOpt1">class-one</label>
<input type="radio" id="emailOpt2" name=emailType value="email_c2">
<label for="emailOpt2">class-two</label>
<input type="radio" id="emailOpt3" name=emailType value="email_c3">
<label for="emailOpt3">class-three</label>
<input type="radio" id="emailOpt4" name=emailType value="email_c4">
<label for="emailOpt4">class-four</label>
</div>
<button type="button" class="gButton" onclick=generateEmail()">GENERATE EMAIL</button>
<textarea id=generatedEmail></textarea></td></tr>
when I hit the 'generate email' button after selecting one of the 'radios', the code seems to revert the selection back to the first option as I keep on getting the first option on the textarea.
any ideas and a possibly a simpler way to do this will be appreciated.
note: I had to go this route since the user wants the radios to be buttons.
I fix it :
Change :
.checked = "true"
to :
.checked == true
Final code :
<html>
<head>
</head>
<body>
<div class="radioEmailType" id="emailClass">
<input type="radio" id="emailOpt1" name=emailType value="email_c1">
<label for="emailOpt1">class-one</label>
<input type="radio" id="emailOpt2" name=emailType value="email_c2">
<label for="emailOpt2">class-two</label>
<input type="radio" id="emailOpt3" name=emailType value="email_c3">
<label for="emailOpt3">class-three</label>
<input type="radio" id="emailOpt4" name=emailType value="email_c4">
<label for="emailOpt4">class-four</label>
</div>
<button type="button" class="gButton" onclick="generateEmail()">GENERATE EMAIL</button>
<textarea id=generatedEmail></textarea>
<script>
function generateEmail(){
if (document.getElementById('emailOpt1').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt1.value
}
else if (document.getElementById('emailOpt2').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt2.value
}
else if (document.getElementById('emailOpt3').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt3.value
}
else if (document.getElementById('emailOpt4').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt4.value
}
}
</script>
</body>
</html>
On button press the following code will display a message with values collected from all checkboxes. But I want to pass these values (returned by function) as hidden input on submit.
<form action="script.php" method="post">
<input type="checkbox" name="chb1" value="html" />HTML<br/>
<input type="checkbox" name="chb2" value="css" />CSS<br/>
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/>
<input type="checkbox" name="chb4" value="php" />php<br/>
<input type="checkbox" name="chb5" value="python" />Python<br/>
<input type="checkbox" name="chb6" value="net" />Net<br/>
<input type="button" value="Click" id="btntest" />
</form>
<script type="text/javascript"><!--
function getSelectedChbox(frm) {
var selchbox = [];
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('btntest').onclick = function(){
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
//-->
</script>
I've seen guys like you trying to code my router interface, so I'll help out.
give your form an id cause you'll need it later
<form action="script.php" method="post" id="the_form">
add the hidden input in the form
<input type="hidden" name="values" id="values" value="" />
the button in the form matures to a real submit (amazing)
<input type="submit" ...
your "getSelectedChbox()" function is amazing; don't change anything there, just wanted to give you congratulations for it, it's a great function
now, where it says document.getElementById('btntest').onclick - get rid of all that and add this code instead; this code will do the rest.
document.getElementById('the_form').onsubmit = function(){
var selchb = getSelectedChbox(this);
var values = selchb.join(', ');
if(!values.length){
alert('There was an error. You have to select some checkboxes. ');
return false;
}
document.getElementById('values').value = values;
if(!confirm(" Are you interested in submitting this form now? If not, click accordingly. "))
return false;
}
Or simply copy-paste this whole thing in a file called script.php:
<?php echo var_dump(isset($_POST['values']) ? $_POST['values'] : 'Submit first.'); ?>
<form action="script.php" method="post" id="the_form">
<input type="checkbox" name="chb1" value="html" />HTML<br/>
<input type="checkbox" name="chb2" value="css" />CSS<br/>
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/>
<input type="checkbox" name="chb4" value="php" />php<br/>
<input type="checkbox" name="chb5" value="python" />Python<br/>
<input type="checkbox" name="chb6" value="net" />Net<br/>
<input type="hidden" name="values" id="values" value="" />
<input type="submit" value="Click" id="btntest" />
</form>
<script type="text/javascript"><!--
function getSelectedChbox(frm) {
var selchbox = [];
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true)
selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('the_form').onsubmit = function(){
var selchb = getSelectedChbox(this);
var values = selchb.join(', ');
if(!values.length){
alert('There was an error. You have to select some checkboxes. ');
return false;
}
document.getElementById('values').value = values;
if(!confirm(" Are you interested in submitting this form now? If not, click accordingly. "))
return false;
}
//-->
</script>
Have fun.
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
}
}
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>