So i have this code:
<html>
<head>
<title>Form</title>
<script type="text/javascript">
function showConfirmationDialog() {
var textbox = document.getElementById('textbox');
var location = document.getElementById('location');
alert('You chosen:'+'\n'+'\n'+'Name: '+textbox.value +'\n'+'Address: ' +location.value+'\n');
}
function formfocus() {
document.getElementById('textbox').focus();
}
window.onload = formfocus;
var option;
</script>
</head>
<body>
Your name:
<input type="text" name="FirstName" id="textbox" <br><br/>
Your Address:
<input type="text" name="address" id="location" <br></br><br></br>
Choose your location:
<form name="Radio" id="destination" action="">
Bristol:
<input type="radio" name="selection" value="bristol" onClick="option=0">
London:
<input type="radio" name="selection" value="london" onClick="option=1">
Birmingham:
<input type="radio" name="selection" value="birmingham" onClick="option=2" />
</form>
<br></br> Click:
<input type="button" value="Submit" onclick="showConfirmationDialog();" /><br></br>
</body>
</html>
... This code basically represents a form for a user to fill in and at the end select one of three option provided via the radio buttons. What I wanted to find out was that how do I get the selection from one radio button which the user will need to select, displayed within the alert box after they press submit.
Something like this...
function getSelRadioValue()
for(i = 0; i< document.forms['Radio'].elements['selection'].length ; i++){
if(document.forms['Radio'].elements['selection'][i].checked == true)
return document.forms['Radio'].elements['selection'][i].value;
}
return null;
}
var selectedRadioValue = getSelRadioValue(); //use this variable in your alert.
if(selectedRadioValue == null)
alert("please select a destination");
else if(confirm("You have selected " + selectedRadioValue))
//deal with success
You need to loop through the selection radios to get the checked value:
var selection = document.Radio.selection;
var selectionResult = "";
for(var i = 0; i < selection.length; i++) {
if(selection[i].checked) {
selectionResult = selection[i].value;
}
}
alert('You chosen:'+'\n'+'\n'+'Name: '+textbox.value +'\n'+'Address: ' +location.value+'\n' + 'Location: '+selectionResult);
Related
I have a simple HTML form that is used for bookings. Once completed it submits the fields via e-mail which can then be automatically uploaded into my Access database with VBA.
The process works fine if there is just text in the form but I want to include radio button choices as well. The problem is that it doesn't include an indication as to which button has been chosen.
The body of the e-mail, if "text" was entered into the text box and choice2 was selected would be:
text
Choice1
Choice2
Choice3
What I would like it to be is:
text
Choice2.
Can this be done?
A simplified version of my code so far is:
function displayRadioValue() {
var ele = document.getElementsByName('Choice');
for (j = 0; j < ele.length; j++) {
if (ele[j].checked)
document.getElementById("result").innerHTML = ele[j].value;
}
}
function btnClick() {
var link = "mailto:username#domain.com" +
"&subject=" + escape("Radio button trial") +
"&body=" + escape(buildForm());
window.location.href = link;
}
function buildForm() {
var str = "";
var elem = document.getElementById('RBT').elements;
for (var i = 1; i < elem.length; i++) {
if (elem[i].type != "button") {
str += elem[i].value + "\r\n";
}
}
return str;
}
<body>
<form id="RBT" name="RBT">
<fieldset>
<p></p>
<legend>Complete the form and\or choose an option</legend><br>
<div>
<label for "text1">Text1</label><br>
<input id="text1" name="text1"><br>
<input type="radio" id="radio1" name="Choice" value="Choice1" checked onclick="displayRadioValue()">
<label for="radio1">Choice1</label><br>
<input type="radio" id="radio2" name="Choice" value="Choice2" onclick="displayRadioValue()">
<label for="radio2">Choice2</label><br>
<input type="radio" id="radio3" name="Choice" value="Choice3" onclick="displayRadioValue()">
<label for="radio3">Choice3</label><br>
<br></div>
<div id="result" name="result" value="result"></div>
</fieldset>
</form>
<BUTTON type=submit onclick="btnClick()" />
<FONT size=5 bold>Submit choice</FONT>
</BUTTON>
You need to check if the element is checked.
And since you're adding it in the same loop as the text field you also need to make sure the element that has to be checked is actually a radio button:
if(elem[i].type != "radio" || elem[i].checked) {
str += elem[i].value + "\r\n";
}
But: In your snippet everything is added to the TO field of the mail, is that intended?
function displayRadioValue() {
var ele = document.getElementsByName('Choice');
for (j = 0; j < ele.length; j++) {
if (ele[j].checked)
document.getElementById("result").innerHTML = ele[j].value;
}
}
function btnClick() {
var link = "mailto:username#domain.com" +
"&subject=" + escape("Radio button trial") +
"&body=" + escape(buildForm());
window.location.href = link;
}
function buildForm() {
var str = "";
var elem = document.getElementById('RBT').elements;
for (var i = 1; i < elem.length; i++) {
if (elem[i].type != "button") {
if(elem[i].type != "radio" || elem[i].checked) {
str += elem[i].value + "\r\n";
}
}
}
return str;
}
<html>
<head>
<title>Radio button trial</title>
</head>
<body>
<form id="RBT" name="RBT">
<fieldset>
<p></p>
<legend>Complete the form and\or choose an option</legend><br>
<div>
<label for "text1">Text1</label><br>
<input id="text1" name="text1"><br>
<input type="radio" id="radio1" name="Choice" value="Choice1" checked onclick="displayRadioValue()">
<label for="radio1">Choice1</label><br>
<input type="radio" id="radio2" name="Choice" value="Choice2" onclick="displayRadioValue()">
<label for="radio2">Choice2</label><br>
<input type="radio" id="radio3" name="Choice" value="Choice3" onclick="displayRadioValue()">
<label for="radio3">Choice3</label><br>
<br></div>
<div id="result" name="result" value="result"></div>
</fieldset>
</form>
<BUTTON type=submit onclick="btnClick()" />
<FONT size=5 bold>Submit choice</FONT>
</BUTTON>
</body>
</html>
I have a form on my webpage that looks like this:
<form id="numberForm">
<input type="radio" name="number" value="singular"> singular <br>
<input type="radio" name="number" value="plural"> plural <br>
</form>
How do I pull the value of the currently selected radio button (without a submit action) in Javascript?
What I'd like is something along the lines of the following:
var formInput = document.getElementById("numberForm");
var numberInputValue = formInput.SELECTEDBUTTON.value;
Try this (using querySelector in JS) :
function getSel() {
var formInput = document.getElementById("numberForm");
var rb=formInput.querySelector('[type="radio"]:checked'); //get selected radio button
document.getElementById('spVl').innerHTML = 'Selected value = '+rb.value;
}
<form id="numberForm">
<input type="radio" name="number" value="singular"> singular <br>
<input type="radio" name="number" value="plural"> plural <br>
<input type="button" value="Get selected radio button value" onclick="getSel();" /><br>
<span id="spVl"></span>
</form>
var form = document.getElementById('numberForm');
var radios = form.getElementsByTagName('input');
for(var i = 0; i < radios.length; ++i) {
if(radios[i].checked) {
console.log("Radio button '" + radios[i].value + "' is checked");
}
}
What I want is to have a text area that when I enter 'Yes' on the inbound and if I click on 'Yes' it will open a textarea at the bottom or at its left so that I could input what is the name of the inbound item.
If answered 'No' then there should be no textarea shown (the default is no)
After that I still want it to show when I click on the submit button
Please take a look at my snippet so that you will have the idea.
Note: The default is 'No '
<html>
<body>
<form id="myForm">
Name: <br><input type="text" name="Name" placeholder="Name" size="40"/><br/>
Phone: <br><input type="text" name="Phone No" placeholder="Phone Number"/><br/>
INBOUND: <br><select name="INBOUND" placeholder="INBOUND"><option>No<option>Yes</select><br/>
<button type="button" onclick="ShowText();">Submit</button>
</form>
<p>Result:</p>
<p><textarea cols=40 rows=7 id="show" onClick='selectText(this);'></textarea></p>
<script>
function ShowText(){
// find each input field inside the 'myForm' form:
var inputs = myForm.querySelectorAll('input,select');
// declare 'box' variable (textarea element):
var box = document.getElementById('show');
// clear the 'box':
box.value = '';
// loop through the input elements:
for(var i=0; i<inputs.length; i++){
// append 'name' and 'value' to the 'box':
box.value += inputs[i].name + ': '+inputs[i].value+'\n';
}
}M
function selectText(textField)
{
textField.focus();
textField.select();
}
</script>
</body>
</html>
Here is the complete running example.
Hope this will helps you
<html>
<body>
<form id="myForm">
Name: <br><input type="text" name="Name" placeholder="Name" size="40"/><br/>
Phone: <br><input type="text" name="Phone No" placeholder="Phone Number"/><br/>
INBOUND: <br><select name="INBOUND" id="INBOUND" onchange="showTextArea()" placeholder="INBOUND"><option>No<option>Yes</select><br/>
<button type="button" onclick="ShowText();">Submit</button>
</form>
<p>Result:</p>
<p><textarea cols=40 rows=7 id="show" onClick='selectText(this);'></textarea></p>
<div id="location" style="display:none;"><p>Location:</p>
<p><textarea cols=40 rows=7 onClick='selectText(this);'></textarea>
</div>
</p>
<script>
function ShowText(){
// find each input field inside the 'myForm' form:
var inputs = myForm.querySelectorAll('input,select');
// declare 'box' variable (textarea element):
var box = document.getElementById('show');
// clear the 'box':
box.value = '';
// loop through the input elements:
for(var i=0; i<inputs.length; i++){
// append 'name' and 'value' to the 'box':
box.value += inputs[i].name + ': '+inputs[i].value+'\n';
}
}M
function selectText(textField)
{
textField.focus();
textField.select();
}
function showTextArea()
{
var e = document.getElementById("INBOUND");
var strUser = e.options[e.selectedIndex].value;
if(strUser == 'Yes')
{
document.getElementById('location').style.display = "block";
}
else
{
document.getElementById('location').style.display = "none";
}
}
</script>
</body></html>
As I have Basic knowledge of JavaScript I want to do operation like following :
By using Two radio button giving two option for Payment :
By Cash
By Check
If user select the radio button of Cash the Cheque Button should also disable and the Div of Cheque in which the details like cheque no and bank name is should also disable.
And visa Versa
Is there a way to do that without using JQuery? (disable a div and get all content disabled also)
Thanks in Advance For Help.
Try this:
document.getElementById("myDivId").disabled = true;
To disable all elements inside the div, try this:
var allChildNodes = document.getElementById("myDivId").getElementsByTagName('*');
for(var i = 0; i < allChildNodes.length; i++)
{
allChildNodes[i].disabled = true;
}
This code will disable all elements within the given container.
var container = document.getElementById("cashContainer");
var inputs = document.getElementsByTagName("input").concat(document.getElementsByTagName("select"));
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
Applying the same code you can re-enable the other container.
You may try this
HTML
<input type="radio" name="cashcheck" value="cash" checked />Cash<br />
<div id="cash">
<form method="post">
<input type="text" name="cashTxt1" />
<input type="text" name="cashTxt2" />
</form>
</div>
<input type="radio" name="cashcheck" value="check" />Check<br />
<div id="check">
<form method="post">
<input type="text" name="checkTxt1" disabled />
<input type="text" name="checkTxt2" disabled />
</form>
</div>
JS
window.onload=function(){
var radios = document.getElementsByName('cashcheck');
radios[0].onchange=toggle;
radios[1].onchange=toggle;
};
function toggle()
{
if(this.checked)
{
var div = document.getElementById(this.value),
inputs = div.getElementsByTagName('form')[0].getElementsByTagName('*');
for( var i=0; i<inputs.length; i++)
{
inputs[i].removeAttribute('disabled');
}
var op = this.value == 'cash' ? 'check' : 'cash',
divOp = document.getElementById(op),
divOpInputs = divOp.getElementsByTagName('form')[0].getElementsByTagName('*');
for( var i=0; i<divOpInputs.length; i++)
{
divOpInputs[i].setAttribute('disabled');
}
}
}
DEMO.
<fieldset disabled="true">
<div>
<input type="text" />
</div>
<br>
<div>
<input type="text" />
</div>
<br>
<div>
<input type="text" />
</div>
<br>
</fieldset>
I'm using http://www.somacon.com/p143.php javascript for radio buttons to change the submit onclick location.href depending on which radio button is selected. But I think I may have an issue with my syntax as the button isn't working properly (I don't think it is pulling the value from the radio buttons properly). Thanks in advanced!
Here is the code:
<head>
<script type="text/javascript">
<!--
// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}
//-->
</script>
</head>
<body>
<form name="radioExampleForm" method="get" action="" onsubmit="return false;">
<p><label for="number0"><input type="radio" value="http://www.google.com" name="number" id="number0"> Zero</label>
<label for="number1"><input type="radio" value="http://www.ebay.com" name="number" id="number1"> One</label>
<label for="number2"><input type="radio" value="http://www.gamestop.com" name="number" id="number2"> Two</label>
<label for="number3"><input type="radio" value="http://www.amazon.com" name="number" id="number3"> Three</label>
<label for="number4"><input type="radio" value="http://www.usatoday.com" name="number" id="number4"> Four</label>
<p>
<input type="button" onclick="location.href='+getCheckedValue(document.forms['radioExampleForm'].elements['number']);" value="Show Checked Value">
ORIGNAL SUBMIT CODE THAT MADE AN ALERT BOX RATHER THAN location.href = <input type="button" onclick="alert('Checked value is: '+getCheckedValue(document.forms['radioExampleForm'].elements['number']));" value="Show Checked Value">
</form>
</body>
It's just a syntax error.
Change it to:
onclick="window.location.href = (getCheckedValue(document.forms['radioExampleForm'].elements['number']));"