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>
Related
how to change this so that you can choose not through a checkbox but through select
$("input[name=koleso]:first").prop("checked", true);
$('body').on('click', '.koleso label', function (e) {
koleso = $('.koleso input#'+$(this).attr('for')).data('koleso');
calc();
});
html
<div class="radiosBl koleso clearfix">
<input type="radio" checked name="koleso" id="kol_4" value="4" data-koleso="0">
<label for="kol_4"><span>ALL</span></label>
<input type="radio" name="koleso" id="kol_3" value="3" data-koleso="1">
<label for="kol_3"><span>3</span></label>
<input type="radio" name="koleso" id="kol_2" value="2" data-koleso="2">
<label for="kol_2"><span>2</span></label>
<input type="radio" name="koleso" id="kol_1" value="1" data-koleso="3">
<label for="kol_1"><span>1</span></label>
<input type="radio" name="koleso" id="kol_0" value="0" data-koleso="4">
<label for="kol_0"><span>NO</span></label>
</div>
I assume that you want to convert group checkbox to select
<div class="radiosBl koleso clearfix">
<select>
<option value="4" data-koleso="0">ALL</option>
<option value="3" data-koleso="1">3</option>
<option value="2" data-koleso="2">2</option>
<option value="1" data-koleso="3">1</option>
<option value="0" data-koleso="4">NO</option>
</select>
</div>
$("input[name=koleso]:first").prop("checked", true);
$('body').on('change', '.koleso select', function (e) {
koleso = $(this).children("option:selected").data("koleso");
calc();
});
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 have a working code where i output the price using value="" but i need a way to get data from data-price="" so that i can use value="" to store SKUs.
Working demo here http://jsfiddle.net/pe2gpp01/21/
What does this code do? It returns fixed price for female for all products. Price changes for Male only.
<div>
<label class="product">Product</label>
<span>
<input name="category" type="radio" value="10" >
<label>Product A</label>
<input name="category" type="radio" value="20" checked>
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40" >
<label>Product D</label>
</span></div>
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="male" checked>
<label>Male</label>
<input name="gender" type="radio" value="female">
<label>Female</label>
</span></div>
<span>Show Price: <span id="price"></span></span>
<script>
$(function() {
$('[type="radio"]').on('change', function() {
var price = $('[value="female"]')[0].checked
? 10
: $('[name="category"]:checked').val();
$('#price').text(price);
}).change();
});
</script>
I need data from this
<input name="category" type="radio" value="SKU001" data-price="10">
<label>Product A</label>
<input name="category" type="radio" value="SKU002" data-price="20" checked>
<label>Product B</label>
<input name="category" type="radio" value="SKU003" data-price="30">
<label>Product C</label>
<input name="category" type="radio" value="SKU004" data-price="40">
<label>Product D</label>
You have to use data method to get data-price attribute
$('[name="category"]:checked').data('price')
This code is saying if you have a value female element checked, then set the price to 10, otherwise price is the value in named category.
var price = $('[value="female"]')[0].checked
? 10
: $('[name="category"]:checked').val();
... so, this ...
var price = $('[value="female"]')[0].checked
? 10 + parseInt($('[name="category"]:checked').val(),10)
: $('[name="category"]:checked').val();
... will add 10 to the category value (note the user of the parseInt function for proper addition.
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>
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" />