The first radio button's value is always being sent

The first radio button's value is always being sent - javascript

I have (4) radio buttons and submit button:
<form class="addrecipe-form" method="GET">
<div class="addrecipe-form-header-row">
<div>
<input type="radio" class="recipe-type-button" id="breakfast" name="recipe-type" value="breakfast" />
<label for="breakfast" class="recipe-type-label">breakfast</label>
</div>
<div>
<input type="radio" class="recipe-type-button" id="appetizer" name="recipe-type" value="appetizer" />
<label for="appetizer" class="recipe-type-label">appetizer</label>
</div>
<div>
<input type="radio" class="recipe-type-button" id="entree" name="recipe-type" value="entree" />
<label for="entree" class="recipe-type-label">entree</label>
</div>
<div>
<input type="radio" class="recipe-type-button" id="dessert" name="recipe-type" value="dessert" />
<label for="dessert" class="recipe-type-label">dessert</label>
</div>
</div>
<button class="addrecipe-button" type="submit" name="recipe-submit"></button>
</form>
Here's the javascript:
var addRecipeForm = document.querySelector(".addrecipe-form");
var recipe_entry;
addRecipeForm.addEventListener('submit', function(e) {
e.preventDefault();
recipe_entry = {
type : document.querySelector(".recipe-type-button").value)
}
console.log(recipe_entry.type)
I just can't figure out why I keep getting the first radio button's value instead of the one I'm clicking on. Can someone enlighten me, pls?

The "document.querySelector()" function returns the FIRST occurrence of that matching query selector.
I would use a for loop and "document.getElementsByClassName()" to check each radio button's value, and only save the state if it is selected.
Like this:
addRecipeForm.addEventListener('submit', function(e) {
e.preventDefault();
for(var i=0;i<document.getElementsByClassName("recipe-type-button").length){
if(document.getElementsByClassName("recipe-type-button")[i].checked){
recipe_entry = {
type : document.getElementsByClassName("recipe-type-button")[i].value
}
}
}
console.log(recipe_entry.type)
}

Try..
type: document.querySelector(".recipe-type-button:checked").value
.. to get the selected value.
Full script:
<html>
<form class="addrecipe-form" method="GET">
<div class="addrecipe-form-header-row">
<div>
<input
type="radio"
class="recipe-type-button"
id="breakfast"
name="recipe-type"
value="breakfast"
/>
<label for="breakfast" class="recipe-type-label">breakfast</label>
</div>
<div>
<input
type="radio"
class="recipe-type-button"
id="appetizer"
name="recipe-type"
value="appetizer"
/>
<label for="appetizer" class="recipe-type-label">appetizer</label>
</div>
<div>
<input
type="radio"
class="recipe-type-button"
id="entree"
name="recipe-type"
value="entree"
/>
<label for="entree" class="recipe-type-label">entree</label>
</div>
<div>
<input
type="radio"
class="recipe-type-button"
id="dessert"
name="recipe-type"
value="dessert"
/>
<label for="dessert" class="recipe-type-label">dessert</label>
</div>
</div>
<button class="addrecipe-button" type="submit" name="recipe-submit">
Magic
</button>
</form>
<script>
var addRecipeForm = document.querySelector(".addrecipe-form");
var recipe_entry;
addRecipeForm.addEventListener("submit", function (e) {
e.preventDefault();
recipe_entry = {
type: document.querySelector(".recipe-type-button:checked").value,
};
console.log(recipe_entry.type);
});
</script>
</html>

Related

Js if active then input required

I have this radio form which make active a specific input type text when the radio is checked.
I want the input that is active to be required to submit the form but i'm pretty bad in JS right now. If someone could help it would be trully appreciated thx u !
Here is my code :
<div class=" bottommargin-sm">
<label>Platforme<small class="text-danger">*</small> : </label>
<div class="btn-group btn-group-toggle nav" data-toggle="buttons">
<a href="#attending-tab-1" class="btn btn-outline-youtube px-4 t600 ls0 nott si-youtube flex-fill" data-toggle="tab">
<input type="radio" name="choice-platform" required value="0"><i class="icon-youtube"></i> Youtube
</a>
<a href="#attending-tab-2" class="btn btn-outline-soundcloud px-4 t600 ls0 nott si-soundcloud flex-fill" data-toggle="tab">
<input type="radio" name="choice-platform" id="template-wedding-attending-no" value="1" required><i class="icon-soundcloud1"></i> Soundcloud
</a>
</div>
<div class="tab-content">
<div class="tab-pane bg-light p-4 mt-2" id="attending-tab-1">
<div class="row">
<input type="text" name="platform1" class="form-control">
</div>
</div>
<div class="tab-pane bg-light p-4 mt-2" id="attending-tab-2">
<div class="row">
<input type="text" name="platform2" class="form-control">
</div>
</div>
</div>
</div>

Are you looking to make an HTML form field required based on a user select option. Then hope this will work for you.
function updateRequirement() {
var form = document.forms[0];
var radios = document.getElementsByName('option');
var selectedValue;
for( i = 0; i < radios.length; i++ ) {
if( radios[i].checked ) {
selectedValue = radios[i].value;
}
}
if(selectedValue === 'yes') {
document.getElementById('non-mandatoryfield').required = true;
} else {
document.getElementById('non-mandatoryfield').required = '';
}
}
<form>
Make optional field mandatory <br />
<div id="options">
<input type="radio" name="option" value="yes" onchange="updateRequirement()"> Yes<br>
<input type="radio" name="option" value="no" onchange="updateRequirement()"> No<br>
</div>
<br />
First name: (Required Always)<br />
<input type="text" required name="firstname" value="" />
<br />
Last name: (Optional Always)<br />
<input type="text" id="non-mandatoryfield" name="lastname" value="" />
<br /><br />
<input type="submit" value="Submit" />
</form>

This is the js code
$("#template-wedding-attending-no").on("checked", function () {
$("#attending-tab-1").prop(true);
})

My script returns the first item only

I'm coding with asp.net/ c# and i'm trying to get the id and the quantity of a product using ajax. The problem is that my code only recognize the first item otherwise if i tried to enter the quantity of the third product i get an error saying that I haven't provided any quantity.
here's my code :
<script type="text/javascript">
$(function() {
$('.Sendparams').click(function (e) {
e.preventDefault();
debugger;
// var id = $(this).attr('id');
var quant = $("#quant").val();
var id = $("#id").val();
$.ajax({
type: 'GET',
url: '/ShoppingCart/AddToCart',
data:{ "id": id , "quant": quant },
success: function (response) {
$("#mainContainerCenter").html(response); } });});
});
</script>
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
#foreach (var album in Model.Produits)
{
<div class="col-lg-3 col-xs-6">
#Html.Hidden("id", album.ProduitId, new { #id = "id" })<br/>
#album.Nom_Produit<br />
#album.Categorie.Nom_categorie<br />
#String.Format("{0:F}", album.Prix)<br />
#Html.TextBox("quant", null, new { id = "quant" })<br />
#Html.ActionLink("voila", "AddToCart", "ShoppingCart", new { id = album.ProduitId }, new { #class = "Sendparams" })<br />
</div>
}
</div>

id attribute would be the uniq value. In your case the id is not the uniq, you using the "quant" value for all items (id="quant"). If i correctly understand what you try to do this is code can help: https://jsfiddle.net/9usvg6wv/
$(".item").submit(function( event ) {
$('#clickedid').text(
$(this).find('input[name="id"]').val()
);
$('#clickedquant').text(
$(this).find('input[name="quant"]').val()
);
console.log($(this).find('input[name="quant"]').val());
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form action="" class="item" >
<input type="hidden" name="id" value="1" />
<input type="text" name="quant" value="100" />
<input type="submit" class="" >
</form>
<form action="" class="item" >
<input type="hidden" name="id" value="2" />
<input type="text" name="quant" value="200" />
<input type="submit" class="" >
</form>
<form action="" class="item" >
<input type="hidden" name="id" value="3" />
<input type="text" name="quant" value="300" />
<input type="submit" class="" >
</form>
<form action="" class="item" >
<input type="hidden" name="id" value="4" />
<input type="text" name="quant" value="400" />
<input type="submit" class="" >
</form>
</div>
<div>
Clicked id:<span id="clickedid"></span>; quant:<span id="clickedquant"></span>
</div>

Validating a Google Apps Form with Javascript

I'm using this solution to feed inputs and image submissions from a form into a Google Sheet and Folder on Google Drive.
I need to validate a few of the fields - just requiring them to be filled out. Unfortunately, the solution I'm using uses a type="button" to submit the form instead of type="submit" and I'm not quite adept enough at Javascript to change that.
However, I found this solution for validating a form with a type="button" submit - but it's not working. With that implemented my form just does nothing - doesn't validate, doesn't submit.
This specifically is the bit of Javascript I'm struggling to get working:
//Validate Form
function() {
$("#myForm").validate({
rules: {
name: "required"
},
messages: {
name: "Please specify your name"
}
})
$('#btn').click(function() {
$("#myForm").valid();
});
};
It works fine in normal HTML in my browser - but doesn't work in Google Apps, so I'm assuming there's some comma or something in the wrong place since it seems Google has different JS requirements?
The rest of my code and a link to the sheet/form/script are below:
Form.html
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
};
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}'
//Toggle Secondary Categories
$(function() {
$(".box").not("." + this.id).hide(); $("." + this.id).show();
});
//Calculate Split
function check(split)
{
var split=document.forms[0].split.value
var amount=document.forms[0].amount.value
var tip = (amount*split)
document.forms[0].manufacturer.value=tip
var tip2 = (amount-tip)
document.forms[0].pace.value=tip2
};
//Validate Form
function() {
$("#myForm").validate({
rules: {
name: "required"
},
messages: {
name: "Please specify your name"
}
})
$('#btn').click(function() {
$("#myForm").valid();
});
};
</script>
<div id="formDiv" class="form">
<!-- Form div will be hidden after form submission -->
<form id="myForm">
<div class="row">
<h1>Co-op Submission Form</h1>
<h2>Please fill out the form completely, including uploading any documentation associated with your co-op claim.</h2>
</div>
<h3>Your Information</h3>
<h4>Name:</h4> <input name="name" type="text" class="form-control mustHave"/><br/>
<h4>Email:</h4> <input name="email" type="text" class="form-control mustHave"/><br/>
<h3>Co-Op Information</h3>
<h4>Brand:</h4>
<select name="brand" class="form-control">
<option>Select Option</option>
<option>Bluebird</option>
<option>Brown</option>
<option>Ferris</option>
<option>Giant Vac</option>
<option>Honda</option>
<option>Hurricane</option>
<option>Jonsered</option>
<option>Little Wonder</option>
<option>RedMax</option>
<option>SCAG</option>
<option>Snapper Pro</option>
<option>Sno-Way</option>
<option>SnowEx</option>
<option>Wright</option>
<option>Ybravo</option>
</select><br/>
<h4>Invoice Date:</h4> <input name="date" type="text" class="form-control"/><br/>
<h4> Total Co-Op Amount</h4> <input type="text" name="amount" class="form-control"/><br />
<h4>Co-Op Split:</h4>
<input type="radio" name="split" onclick="check(this.value)" value="1">100%<br>
<input type="radio" name="split" onclick="check(this.value)" value=".5">50/50<br>
<input type="radio" name="split" onclick="check(this.value)" value=".75">75/25<br />
<input type="radio" name="split" onclick="check(this.value)" value=".25">25/75 (Dealer Pays 50%)<br />
<h4>Manufacturer Amount:</h4> <input type="text" name="manufacturer" style="border:none;font-weight:bold;"><br />
<h4>Pace Amount:</h4> <input type="text" name="pace" style="border:none;font-weight:bold;" >
<h4>Description:</h4> <input name="reason" type="text" cols="20" rows="5" class="form-control mustHave"/><br />
<h4>Co-Op Category:</h4>
<input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
<input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
<input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
<input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
<input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
<input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
Other: <input type="text" id="other" name="category" class="form-control"/><br />
<!--Dealer Advertising-->
<div class="dealer box" style="display:none;">
<h4>Dealer Advertising:</h4>
<input type="radio" name="subcategory" value="Billboards">Billboards<br />
<input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
<input type="radio" name="subcategory" value="Magazine/Newspaper">Magazine/Newspaper<br />
<input type="radio" name="subcategory" value="Open House/Trade Show">Open House & Dealer Trade Show<br />
<input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
<input type="radio" name="subcategory" value="Radio">Radio<br />
<input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
<input type="radio" name="subcategory" value="TV">TV<br />
<input type="radio" name="subcategory" value="Direct Mail">Direct Mail (post cards, flyers)<br />
<input type="radio" name="subcategory" value="Sponsorships">Sponsorships<br />
</div>
<!--Digital/Online Advertising-->
<div class="online box" style="display: none;">
<h4>Digital/Online Marketing:</h4>
<input type="radio" name="subcategory" value="CMS/Advertising">CMS/Dealer Website Advertising<br />
<input type="radio" name="subcategory" value="TRM Digital Marketing">TRM Digital Marketing (google, facebook, retargeting, demo site, youtube)
</div>
<!--Meetings and Schools-->
<div class="meetings box" style="display: none;">
</div>
<!--PACE Advertising-->
<div class="advertising box" style="display: none;">
<h4>PACE Advertising:</h4>
<input type="radio" name="subcategory" value="Billboards">Billboards<br />
<input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
<input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
<input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
</div>
<!--Program Pricing Promotions-->
<div class="pricing box" style="display: none;">
<h4>Program Pricing Promotions:</h4>
<input type="radio" name="subcategory" value="Promo Prices, Discounts, Rebates - Unassigned">Promo Prices, Discounts, Rebates - Unassigned<br />
<input type="radio" name="subcategory" value="Promo Pricing">Promo Pricing<br />
<input type="radio" name="subcategory" value="Demo">Demo<br />
<input type="radio" name="subcategory" value="Fleet">Fleet<br />
<input type="radio" name="subcategory" value="Spiffs and Rebates">Spiffs and Rebates<br />
</div>
<!--PACE-to-Dealer Correspondence-->
<div class="correspondence box" style="display: none;">
<h4>PACE-to-Dealer Correspondence:</h4>
<input type="radio" name="subcategory" value="Pacesetter Catalog">Pacesetter Catalog<br />
<input type="radio" name="subcategory" value="Dealer Programs (updates, reprints)">Dealer Programs (updates, reprints)<br />
</div>
<h4>Message:</h4> <textarea name="message" class="form-control"></textarea><br/>
<h4> Supporting Documentation:</h4>
<input name="myFile1" type="file"/>
<a onclick="document.getElementById('div1').style.display='';return false;" href="">Submit More</a><br />
<div id="div1" style="display:none;margin: 15px 0;">
<input name="myFile2" type="file"/>
<a onclick="document.getElementById('div2').style.display='';return false;" href="">Submit More</a><br />
</div>
<div id="div2" style="display:none;margin: 15px 0;">
<input name="myFile3" type="file"/>
<a onclick="document.getElementById('div3').style.display='';return false;" href="">Submit More</a><br />
</div>
<div id="div3" style="display:none;margin: 15px 0;">
<input name="myFile4" type="file"/>
<a onclick="document.getElementById('div4').style.display='';return false;" href="">Submit More</a><br />
</div>
<div id="div4" style="display:none;margin: 15px 0;">
<input name="myFile5" type="file"/><br /></div>
<br />
<input type="button" value="Validate" id="btn" class="btn" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" />
</form>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
<div class="uploading">Uploading. Please wait...</div>
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
</div>
<!--Begin Footer-->
<div class="footer">
<div class="bottomStrip">
<div class="col-lg-3 col-lg-push-1">© <script type="text/javascript"> document.write(new Date().getFullYear());</script>, PACE, Inc. All rights Reserved.</div>
<div class="col-lg-4 col-lg-push-5">PACE, Inc., 739 S. Mill St., Plymouth, MI 48170-1821</div>
</div>
</div>
<!--End Footer-->
</body>
Code.gs
var submissionSSKey = '1e56M0GL6649pVW0SUwZDR8CjuyTqEwrkAUUWYVmiOpk';
var folderId = "0B3YZCO2xGxYFdHV4Q2pvY0U4d0U";
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob1 = theForm.myFile1;
var fileBlob2 = theForm.myFile2;
var fileBlob3 = theForm.myFile3;
var fileBlob4 = theForm.myFile4;
var fileBlob5 = theForm.myFile5;
var folder = DriveApp.getFolderById(folderId);
var doc1 = folder.createFile(fileBlob1);
var doc2 = folder.createFile(fileBlob2);
var doc3 = folder.createFile(fileBlob3);
var doc4 = folder.createFile(fileBlob4);
var doc5 = folder.createFile(fileBlob5);
// Fill in response template
var template = HtmlService.createTemplateFromFile('Thanks.html');
var name = template.name = theForm.name;
var email = template.email = theForm.email;
var brand = template.brand = theForm.brand;
var date = template.date = theForm.date;
var amount = template.amount = theForm.amount;
var split = template.split = theForm.split;
var manufacturer = template.manufacturer = theForm.manufacturer;
var pace = template.pace = theForm.pace;
var reason = template.reason = theForm.reason;
var category = template.category = theForm.category;
var subcategory = template.subcategory = theForm.subcategory;
var message = template.message = theForm.message;
var fileUrl1 = template.fileUrl1 = doc1.getUrl();
var fileUrl2 = template.fileUrl2 = doc2.getUrl();
var fileUrl3 = template.fileUrl2 = doc3.getUrl();
var fileUrl4 = template.fileUrl2 = doc4.getUrl();
var fileUrl5 = template.fileUrl2 = doc5.getUrl();
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 17).setValues([[name, email,brand,date,amount,split,manufacturer,pace,reason,category,subcategory,message,fileUrl1,fileUrl2,fileUrl3,fileUrl4,fileUrl5]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
Link to Sheet

Based from this SO question, in type="button" buttons will not submit a form and they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application while type="submit" buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.
I suggest to use type="submit" instead of type="button" since it will submit the form when clicked when it's inside a form element as stated in this documentation.
Hope this helps!

Toggle view of DIVs using javascript array and radio button

I am trying to toggle the visibility to div content using javascript, not jquery. I can get it to work using a huge else if, but I am trying to use a for loop.
HTML
<fieldset >
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div >
<input id="repl_id" name="repl_name" type="radio" value="111">
<label for="repl_id" >Bill to your Account Number.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="222">
<label for="repl_id" >Bill to a paymentcard.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="333">
<label for="repl_id" >Bill to the reciever or a third party.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="444">
<label for="repl_id" >Pay with check or money order.</label>
</div>
<div >
<input id="repl_id" name="repl_name" type="radio" value="555">
<label for="repl_id" >Pay with cash.</label>
</div>
</fieldset>
<div id="111"><p>This is 111</p></div>
<div id="222"><p>This is 222</p></div>
<div id="333"><p>This is 333</p></div>
<div id="444"><p>This is 444</p></div>
<div id="555"><p>This is 555</p></div>
Javascript
$(":input[type='radio']").on("change", function () {
var choice =[111,222,333,444,555];
if ($(this).prop("checked")) {
for(i=0; i<=choice.length; i++){
if($(this).val() === choice[i]){
$("#"+i).show();
} else {
$("#"+i).hide();
}
}
}
The problem I am having is that it does not seem to recognize the index of the array I am iterating through. So it always reads false. No JQuery please.

Demo - https://jsfiddle.net/of3gm5h8/1/
HTML
<fieldset>
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div>
<input id="repl_id" name="repl_name" type="radio" value="111">
<label for="repl_id">Bill to your Account Number.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="222">
<label for="repl_id">Bill to a paymentcard.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="333">
<label for="repl_id">Bill to the reciever or a third party.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="444">
<label for="repl_id">Pay with check or money order.</label>
</div>
<div>
<input id="repl_id" name="repl_name" type="radio" value="555">
<label for="repl_id">Pay with cash.</label>
</div>
</fieldset>
<div id="111" class="hide">
<p>This is 111</p>
</div>
<div id="222" class="hide">
<p>This is 222</p>
</div>
<div id="333" class="hide">
<p>This is 333</p>
</div>
<div id="444" class="hide">
<p>This is 444</p>
</div>
<div id="555" class="hide">
<p>This is 555</p>
</div>
JS
$(function() {
$('.hide').hide();
$("input[type='radio']").on("change", function() {
// Hide all the .hide divs
$('.hide').hide();
var checked = $(this).val();
if (checked == "111") {
$("#111").show();
} else if (checked == "222") {
$("#222").show();
} else if (checked == "333") {
$("#333").show();
} else if (checked == "444") {
$("#444").show();
} else if (checked == "555") {
$("#555").show();
}
});
});

I think this is what you're looking for.
//removed the colon before input
$("input[type='radio']").on("change", function () {
var choice =[111,222,333,444,555];
if ($(this).prop("checked")) {
//get the value of the checked input
var value = $(this).val();
//match the index to the input and show it, hide the others.
$('#'+value).show().siblings().hide();
}
}
This assumes that the choice array has all the values from the the inputs.

Make sure the id's of the radio buttons are unique.(You already have the same name for the radio button to make it behave like a group.)
Then target the div using the value of the radio button.
JS
$(":input[type='radio']").on("change", function() {
// Hide all the divs
$('.div-container div').hide();
if ($(this).prop("checked")) {
$("#" + $(this).val()).show();
}
});
HTML
<fieldset>
<legend>Please indicate below how you intend to pay any pick-related charges for you shipments.</legend>
<div>
<input id="repl_id1" name="repl_name" type="radio" value="111">
<label for="repl_id1">Bill to your Account Number.</label>
</div>
<div>
<input id="repl_id2" name="repl_name" type="radio" value="222">
<label for="repl_id2">Bill to a paymentcard.</label>
</div>
<div>
<input id="repl_id3" name="repl_name" type="radio" value="333">
<label for="repl_id3">Bill to the reciever or a third party.</label>
</div>
<div>
<input id="repl_id4" name="repl_name" type="radio" value="444">
<label for="repl_id4">Pay with check or money order.</label>
</div>
<div>
<input id="repl_id5" name="repl_name" type="radio" value="555">
<label for="repl_id5">Pay with cash.</label>
</div>
</fieldset>
<div class="div-container">
<div id="111">
<p>This is 111</p>
</div>
<div id="222">
<p>This is 222</p>
</div>
<div id="333">
<p>This is 333</p>
</div>
<div id="444">
<p>This is 444</p>
</div>
<div id="555">
<p>This is 555</p>
</div>
</div>
Check Fiddle

jQuery how to get div element value from radio button and assign value to a specific div

Here I need to get the selected radio button value (123,456,789) and assign it to valueee div element? I used document.getElementsById, but couldn't get what I need.
Any help would be highly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Selection</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#radio_submit").click(function(e) {
var checked_option_radio = document.getElementsByName("deff").value;
if (checked_option_radio === undefined) {
alert('Please select options!');
} else {
alert("inside else");
$('#valueee').html(checked_option_radio);
}
});
});
</script>
</head>
<body>
<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" />
</div>
<div name="deff" id="val1">123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div name="deff" id="val2">456</div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div name="deff" id="val3">678</div>
<span>jquery</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div name="deff" id="val4">675</div>
<span>JS</span>
<br></br>
<div><button id="radio_submit" type="button">Show Selected Radio</button></div>
</form>
<div id="valueee"></div>
</body>
</html>

jQuery
$(document).ready(function() {
$("#radio_submit").click(function (e) {
var checked_option_radio = $("input[name=user_options]:checked").val();
});
});
Full Code
$(document).ready(function() {
$("#radio_submit").click(function (e) {
var checked_option_radio = $("input[name=user_options]:checked").val();
if(checked_option_radio===undefined){
alert('Please select options!');
}else{
alert("inside else");
$('#valueee').html(checked_option_radio);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" value="456"/>
</div>
<div name="deff" id="val1" x>123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options" value="456" />
</div>
<div name="deff" id="val2" >456</div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options" value="678" />
</div>
<div name="deff" id="val3" >678</div>
<span>jquery</span>
<br></br>
<div>
<input type="radio" name="user_options" value="675" />
</div>
<div name="deff" id="val4" >675</div>
<span>JS</span>
<br></br>
<div><button id="radio_submit" type="button">Show Selected Radio</button></div>
</form>
<div id="valueee"></div>
Check jsFiddle

I am adding a class for selected radio button parent div,based on the class I am getting the next div text and printing in the desired place using Jquery.
Rename the name=deff to class=deff.
$("#radio_submit").click(function (e) {
var checked_option_radio = $(this).closest('form').find('div').hasClass('selected');
if(checked_option_radio) {
var hello = $('.selected').next('.deff').text();
$('#valueee').html(hello);
} else {
alert('nothing selected');
var hello2 = "no radio button is selected"
$('#valueee').html(hello2);
}
});
$('input').on('click',function(){
if (!$("input").is(':checked')) {
$(this).parent().addClass('selected').siblings().removeClass('selected');
}
else {
$(this).parent().addClass('selected').siblings().removeClass('selected');
}
});
<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val1">123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val2">456</div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val3">678</div>
<span>jquery</span>
<br></br>
<div>
<input type="radio" name="user_options" />
</div>
<div class="deff" id="val4">675</div>
<span>JS</span>
<br></br>
<div><button id="radio_submit" type="button">Show Selected Radio</button></div>
</form>
<div id="valueee"></div>
http://jsfiddle.net/silpa/xeb9hoyr/2/
Here is the updated code to get input value
var check_div = $('.selected').next().is('div');
var check_input = $('.selected').next().is('input');
var div_value = $('.selected').next('.deff').text();
var input_value = $('.selected').next('input').val();
if(check_div){
$('#valueee').html(div_value);
}
if(check_input){
$('#valueee').html(input_value);
}
http://jsfiddle.net/silpa/xeb9hoyr/9/

since you have the jquery library implemented use
$('#divid').val(somevalue);

Develop Reference

JavaScript is the programming language of the Web.

The first radio button's value is always being sent - javascript

Related

Js if active then input required

My script returns the first item only

Validating a Google Apps Form with Javascript

Toggle view of DIVs using javascript array and radio button

jQuery how to get div element value from radio button and assign value to a specific div

Categories

Resources