I have javascript code below, it's working but within Firebug it says
document.form1.element[i] is not defined
and then it works fine
function set_action(){
for (var i=0;i<=3;i++)
{
if (document.form1.PayType[i].checked == true)
{
var billerid = document.form1.billerid[i].value;
document.form1.action = billerid +"_mypag.htm";
}
}
and my html markup is as below
<form name="form1" action="...">
<input name="PayType" type="radio" value="0" id="ultipay" class="radiobtn" checked/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input name="PayType" type="radio" value="1" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>
</select>
<input name="PayType" type="radio" value="2" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input name="PayType" type="radio" value="3" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input type="button" onclick="set_action()" value="submit">
</form>
I don't know why I am getting this error.
If you have only one radio button named PayType, then you need to address it with document.form1.PayType. It is addressed as an array document.form1.PayType[i] iff there are multiple radio buttons with the same name. For instance:
<input name="PayType" type="radio" value="0" id="ultipay0" class="radiobtn" checked="checked" />
<input name="PayType" type="radio" value="1" id="ultipay1" class="radiobtn" />
Related
I have a problem i dont know how can i read the value stored in <select><option> </option></select> and from radio buttons here i have my code with js and html
function inport(){
var name = document.getElementById("name").value;
var index = document.getElementById("index").value;
var phone = document.getElementById("phone").value;
var grade = document.getElementById("grade").value;
var session = document.getElementById("session").value;
console.log(name);
console.log(index);
console.log(phone);
console.log(grade);
console.log(session);
}
<form>
<div>
<h1>Details</h1>
<div>
<label>Name</label>
<input type="text" id="name">
</div>
<div>
<label>Index</label>
<input type="text" id="index">
</div>
<div>
<label>Phone</label>
<input type="text" id="phone">
</div>
<div id="grade">
<label><input type="radio" name="groupName" value="5"> 5</label>
<label><input type="radio" name="groupName" value="6"> 6</label>
<label><input type="radio" name="groupName" value="7"> 7</label>
<label><input type="radio" name="groupName" value="8"> 8</label>
<label><input type="radio" name="groupName" value="9"> 9</label>
<label><input type="radio" name="groupName" value="10"> 10</label>
<div>
</div>
<div>
<label>Session</label>
<select id="session">
<option value="checkbox">Decembar</option>
<option value="checkbox">November</option>
<option value="checkbox">Octomber</option>
<option value="checkbox">September</option>
<option value="checkbox">August</option>
<option value="checkbox">July</option>
<option value="checkbox">June</option>
<option value="checkbox">May</option>
<option value="checkbox">April</option>
<option value="checkbox">March</option>
<option value="checkbox">February</option>
<option value="checkbox">January</option>
</select>
</div>
<div>
<input type="button" value="Input student"id="import" onclick="inport();">
</div>
</div>
</form>
When i try to console.log my values of grade and session i want to get the number or month selected how can get the value should i change something in my html ? It works fine with first 3 because i just read from <input type="text"> but in other 2 i tried getting the value from radio button and select options. I think you can run this code snipped and see the output if you need more info let me know :).
Add name attribute in input.
JS Code
document.getElementById("show_radio").onclick = function () {
var radio = document.getElementsByName("gender");
var radio_selected;
for (var a = 0; a < radio.length; a++) {
if (radio[a].checked) {
radio_selected = radio[a].value;
}
}
document.getElementById("selected_radio").innerHTML = radio_selected;
}
<form>
<input type="radio" name="gender" value="Male" checked=""> Male<br>
<input type="radio" name="gender" value="Female"> Female<br>
<input type="radio" name="gender" value="I'd rather not inform"> I'd rather not inform
</form>
<button id="show_radio">Show</button>
<p id="selected_radio"></p>
I would like to transfer radio button data from the first html to the second with Pure JavaScript Its ok if you use some jQuery.
jQuery used
1st HTML
<body>
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<button onclick="saveSession()">save</button>
<script type="text/javascript">
function saveSession(){
// I want to save the value of the radio button to sessionStorage here
}
</script>
</body>
In my second HTML I would like to retrieve this data and set the value of the radio buttons to the same.
2nd HTML
<body onload="type()">
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<script type="text/javascript">
function type(){
//I want to get the data with sessionStorage.getItem()
}
</script>
</body>
It would be better if you can also tell me how to disable the form
Thanks in advance for your time and effort!!
Adding my comments as an answer. To access the radio button value, since you're using jQuery, try this:
$('input[name="num"]:checked').val();
On the first HTML page,
sessionStorage.setItem("num", $('input[name="num"]:checked').val());
And then on the second page,
sessionStorage.getItem("num");
or, to set the value of the radio on the 2nd page with the stored value:
$('input[name="num"]').val([sessionStorage.getItem("num")]);
Here is a fiddle: https://jsfiddle.net/8or3chye/
You can add a change event handler to your radios and save a new value to the local storage on that event. Afterwards on page load you need to read the saved value of the radio from the local storage and if it exists - you find an element by id and set checked to true
<label for="1">
<input type="radio" name="num" id="1" value="1" onclick="handleClick(this);" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" onclick="handleClick(this);" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" onclick="handleClick(this);" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" onclick="handleClick(this);" >4
</label>
<script type="text/javascript">
function handleClick(radio) {
localStorage.setItem('numRadio', radio.value)
}
(function() {
const radioValue = localStorage.getItem('numRadio')
if(radioValue) {
const targetRadio = document.getElementById(radioValue)
targetRadio.checked = true
}
})()
</script>
I am having difficulty to show a value of selected radio button. When I click on question 1 then result 1 should be display on console but I am getting all the values of radio button.Can anyone help me please? Thanks
html
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1">
<label>Question 2</label>
<input type="radio" class="question" value="2">
<label>Question 3</label>
<input type="radio" class="question" value="3">
<button type="submit">Submit</button>
</form>
JavaScript
<script>
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
</script>
You could check to see if it is checked with question.checked.
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
if(question.checked){
console.log(question.value);
}
});
event.preventDefault();
}
You might also want to add names to all the radios, because the idea of radios is that only one of them can be ticked at a time. name does that for you:
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Instead of checking the checked property inside a loop. You could use the :checked pseudo-class to only select checked radios.
function answers(event)
{
var q = document.querySelectorAll('.question:checked');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Also be aware to use the name property to group radio buttons.
I have a set of radio inputs with an option "other" that has a text field. My question is how I make the text field required when the other option is selected.
The code I came up with so far::
<form method="POST" action="testPage.php">
<input type="radio" name="option" value="1">Option 1<br>
<input type="radio" name="option" value="2">Option 2<br>
<input type="radio" name="option" value="3">Option 3<br>
<input type="radio" name="option" value="">Other
<input type="text" name="othertext" onchange="changeradioother()">
<input type="submit" value="Submit">
</form>
<script>
function changeradioother(){
var other= document.getElementById("other");
other.value=document.getElementById("inputother").value;
}
</script>
try calling a function when other radio button is clicked to set input field to required :
<script>
function changeradioother(){
var other= document.getElementById("other");
other.value=document.getElementById("inputother").value;
}
function setRequired(){
document.getElementById("inputother").required=true;
}
function removeRequired(){
if(document.getElementById("inputother").required == true){
document.getElementById("inputother").required=false;
}
}
</script>
<form method="POST" action="testPage.php">
<input type="radio" name="option" value="1" onclick="removeRequired();">Option 1<br>
<input type="radio" name="option" value="2" onclick="removeRequired();">Option 2<br>
<input type="radio" name="option" value="3" onclick="removeRequired();">Option 3<br>
<input type="radio" name="option" value="" onclick="setRequired();" id="other">Other
<input id="inputother" type="text" name="othertext" onchange="changeradioother()">
<input type="submit" value="Submit">
</form>
There are many diff ways to this one is here
give id to your radio box which is other and give id to text box.
function changeradioother(){
if(document.getElementById("Other").checked ) {
if(document.getElementById("inputtext").value == ''){
alert('input required');
}
}
return false
}
<form method="POST" action="testPage.php" onsubmit="return changeradioother()">
<input type="radio" name="option" value="1">Option 1<br>
<input type="radio" name="option" value="2">Option 2<br>
<input type="radio" name="option" value="3">Option 3<br>
<input type="radio" name="option" value="" id="Other">Other
<input type="text" name="othertext" id="inputtext" >
<input type="submit" value="Submit">
</form>
You can do something like that.
Going through all radio button to check which was clicked.
By the way, you did not put an id to the radio button Other.
var radio = document.querySelectorAll("input[name='option']");
for(var i = 0;i< radio.length;i++){
radio[i].onclick = function(){
if(this.id == "other"){
document.getElementById('otherText').setAttribute("required", true);
}else{
document.getElementById('otherText').removeAttribute("required");
}
}
}
<form method="POST" action="testPage.php">
<input type="radio" name="option" value="1">Option 1<br>
<input type="radio" name="option" value="2">Option 2<br>
<input type="radio" name="option" value="3">Option 3<br>
<input type="radio" name="option" id="other">Other
<input type="text" name="othertext" id="otherText">
<input type="submit" value="Submit">
</form>
I am trying to open drop down and other fields on the basis of others. I am trying to create a form for clients to fill their form with specific requirement.
The DIV will hide and show on the basis of dropdown selected using jquery.
Here is how my html code looks like.
<div class="website-type">
<label class=""><b>Website Type</b>
<select>
<option>--------Select--------</option>
<option value="static-website">Static Website</option>
<option value="dynamic-website">Dynamic Website</option>
<option value="ecommerce-website">eCommerce Website</option>
<option value="seo">Search Engine Optimization</option>
<option value="graphic-design">Graphic Design</option>
</select>
</label>
</div>
<div class="static-website" id="static-website">
<label class=""><b>Design Level</b>
<select>
<option>--------Select--------</option>
<option value="basic-design">Basic Design</option>
<option value="business-design">Business Design</option>
<option value="creative-design">Creative Design</option>
</select>
</label>
<br/>
<div class="static-website-basic">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="5" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="5" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of Basic Static Box -->
<div class="static-website-business">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="10" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="10" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of BUSINESS Static Box -->
<div class="static-website-creative">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="5" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="5" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of Creative Static Box -->
</div> <!-- End of Static Box -->
This is just a regular jquery i am using. Here is how i am using my jquery
$("select").change(function()
{
$( "select option:selected").each(function()
{
if($(this).attr("value")=="static-website"){
$(".dynamic-website").hide();
$(".ecommerce-website").hide();
$(".seo").hide();
$(".graphic-design").hide();
$(".static-website").show();
}
if($(this).attr("value")=="basic-design"){
$(".static-website-business")..hide();
$(".static-website-creative").hide();
$(".static-website-basic").show();
}
if($(this).attr("value")=="business-design"){
$(".static-website-basic").hide();
$(".static-website-creative").hide();
$(".static-website-business").show();
}
if($(this).attr("value")=="creative-design"){
$(".static-website-basic").hide();
$(".static-website-business").hide();
$(".static-website-creative").show();
}
}
});
}).change();
});
I dont want so many .hide and .show property for every div. My one drop down is based on another and after selection of 2nd dropdown selection.
this is just of Static Website. Then i have several other fields. I dont know how can i do this. I dont want to make it very complicated i just want to make things simple and reusable so i dont have to use so many .hide and .show
If any suggestions. please help.
Thank you!
better hiding and showing as required.
var oldselected;
$("select").on('change',this,function(e){
if(oldselected){$('.'+oldselected).hide();}
var selectedopt=$(this).val();
$('.'+selectedopt).show();
oldselected=selectedopt;
});
div:not(.website-type){display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="website-type">
<label class=""><b>Website Type</b>
<select>
<option>--------Select--------</option>
<option value="static-website">Static Website</option>
<option value="dynamic-website">Dynamic Website</option>
<option value="ecommerce-website">eCommerce Website</option>
<option value="seo">Search Engine Optimization</option>
<option value="graphic-design">Graphic Design</option>
</select>
</label>
</div>
<div class="static-website" id="static-website">
<label class=""><b>Design Level</b>
<select>
<option>--------Select--------</option>
<option value="basic-design">Basic Design</option>
<option value="business-design">Business Design</option>
<option value="creative-design">Creative Design</option>
</select>
</label>
<br/>
<div class="static-website-basic">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="5" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="5" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of Basic Static Box -->
<div class="static-website-business">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="10" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="10" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of BUSINESS Static Box -->
<div class="static-website-creative">
<label class="no-pages-static"><b>Number Of Pages</b>
<input type="text" name="no-pages-static" value="5" />
</label>
<br/>
<label class="no-form-static"><b>Number Of Simple Form</b>
<input type="text" name="no-form-static" value="5" />
</label>
<br/>
<label class="seo-static"><b>SEO (On Page)</b>
<input type="radio" name="seo-static" group="seo-static"> Yes
<input type="radio" name="seo-static" group="seo-static"> No
</label>
<br/>
<label class="content-writting-static"><b>Content Writing</b>
<input type="radio" name="content-static" group="content-writting-static"> Yes
<input type="radio" name="content-static" group="content-writting-static"> No
</label>
</div><!-- End of Creative Static Box -->
</div> <!-- End of Static Box -->
I built a quick utility to do this, it accepts a few data attributes...
http://jsfiddle.net/buxbajvd/
<form class="progressiveDisclosure">
<select name="selectNode" class="associatedHandler">
<option>foobar</option>
<option>something</option>
</select>
</form>
<div class="associatedListener" style="display: none;" data-for="selectNode" data-value="something" data-props="matchAll">selectNode is something</div>
The data-for must match the handlers name attribute and the data-value must match its value for this node to show. It can also accept multiple arguments data-for="someSelect,someSelect2" data-value="someValue,someValue2"
It is also possible to use reverse conditioning and setting data-value="!someValue"
var progressiveDisclosure = $('.progressiveDisclosure'),
associatedHandlers = $('.associatedHandler'),
associatedListeners = $('.associatedListener'),
toggleAssociatedListeners = function(e){
var name = $(e.target).attr('name');
$.each(associatedListeners, function(index, node){
var names = node.associationFor,
values = node.associationValue,
valid = false,
matchAll = false;
if(node.associationOpts && node.associationOpts.indexOf('matchAll') > -1){
matchAll = true;
}
var inputIsAssociation = false;
for(var i=0;i<names.length;i++){
if(names[i] == name){
inputIsAssociation = true;
}
var value = progressiveDisclosure.serializeArray().filter(function(input){
return input.name == names[i];
})[0].value;
if(values[i].indexOf('!') > -1 && values[i].replace('!','') !== value){
valid = true;
} else if(values[i].indexOf('!') > -1 && values[i].replace('!','') == value){
valid = false;
if(!matchAll){
break;
}
} else if(values[i] == value){
valid = true;
if(!matchAll){
break;
}
} else if(matchAll){
valid = false;
break;
}
}
if(!inputIsAssociation){
return;
}
if(valid){
$(node).show();
} else if(inputIsAssociation) {
$(node).hide();
}
});
}
$.each(associatedListeners, function(index, node){
var $node = $(node),
opts = $node.data('props');
node.associationFor = $node.data('for').split(',');
node.associationValue = $node.data('value').split(',');
if(opts){
node.associationOpts = opts.split(',');
}
});
associatedHandlers.on('change', this, function(e){
toggleAssociatedListeners(e);
});
I would go with the hide all show what you want but with a plus try making up names from the original selectors therefore:
$('select').change(){
$('.divclass').hide();//which youll have to add
var id = $(this).val(); //or
$(this).find('selected').val()
//not sure which works for selects
id=id.replace('design','')
//obviously you need a replace for this specific example('design','');
$('#static-website-'+id).show();
}
In a few words the ids you want to show and the options or values ae related to the ids
You can hide all , and show what you want.
function showD(whatYouWantShow){
//hide all $(".mydiv").hide();
//show whatYouWantShow $("#d1").show();
}
<div class=mydiv id="d1"></div>
<div class=mydiv id="d2"></div>
<div class=mydiv id="d3"></div>