Hello Stackoverflow community,
I am currently trying to implement the following fiddle : http://jsfiddle.net/8D3tJ/2/ into one of my projects, the main difference though is that I am not using select options but input fields / radio buttons.
Please see my code:
<li id="fo143li1" class="notranslate focused">
<fieldset>
<div class="price-option">
<input id="radioDefault_1" name="Field1" type="hidden" value="">
<span>
<div class="price" style="float: right; margin-top: 5px;"></div>
<input id="Field1_0" name="Field1" data-price="5" type="radio" class="field radio" value="5" tabindex="1">
<label class="choice" for="Field1_0">
First Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_1" name="Field1" type="radio" class="field radio" value="Second Choice" tabindex="2">
<label class="choice" for="Field1_1">
Second Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_2" name="Field1" type="radio" class="field radio" value="Third Choice" tabindex="3">
<label class="choice" for="Field1_2">
Third Choice</label>
</span>
</div>
</fieldset>
</li>
</ul>
</form>
<p class="result" data-base-price="50">£<span>50.00</span></p>
and here my edited jquery part:
<script type="text/javascript">
$(document).ready(function () {
$('.price-option').change(function(){
var price = parseFloat($('.price').data('base-price'));
$('.price-option').each(function(i, el) {
price += parseFloat($('checked:checked', el).data('price'));
});
$('.result span').text(price.toFixed(2));
});
});
</script>
If I am to try this method based on the markup above I have a NaN value returned.
Any ideas how I can make this working? Some expert help would be greatly appreciated.
<li id="fo143li1" class="notranslate focused">
<fieldset>
<div class="price-option">
<input id="radioDefault_1" name="Field1" type="hidden" value="">
<span>
<div class="price" style="float: right; margin-top: 5px;"></div>
<input id="Field1_0" name="Field1" data-price="5" type="radio" class="field radio" value="5" tabindex="1">
<label class="choice" for="Field1_0">
First Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_1" name="Field1" type="radio" data-price="10" class="field radio" value="Second Choice" tabindex="2">
<label class="choice" for="Field1_1">
Second Choice</label>
</span>
<span>
<div class="price" style="float: right; margin-top: 5px;">300 USD</div>
<input id="Field1_2" name="Field1" type="radio" class="field radio" data-price="15" value="Third Choice" tabindex="3">
<label class="choice" for="Field1_2">
Third Choice</label>
</span>
</div>
</fieldset>
</li>
</ul>
</form>
<p class="result" data-base-price="50">£<span>50.00</span></p>
IN js
$(document).ready(function () {
$('.radio').change(function(){
var price= parseFloat($('.result').data('base-price'));
$('.radio').each(function(i, el) {
if($(this).is(":checked"))
price += parseFloat($(this).data('price'));
// console.log(parseFloat($(this).data('price')));
});
$('.result span').text(price.toFixed(2));
});
});
check fiddle
here http://jsfiddle.net/C4Lrg/
Here is a fiddle using a radio list to update a price
http://jsfiddle.net/8D3tJ/23/
HTML:
<input id="1" name="1" type="radio" value="5" tabindex="1" class="price-option">
<label for="1">Plus 5</label>
<input id="2" name="1" type="radio" value="10" tabindex="1" class="price-option">
<label for="2">Plus 10</label>
<p>£<span id="price" base-price="50">50</span></p>
JS:
$(function () {
$('.price-option').change(function(){
var price = parseFloat($('#price').attr('base-price'));
price += parseFloat($('.price-option:checked').val());
$('#price').text(price.toFixed(2));
});
});
Related
I'm using a multi-step form from this question and answer on StackOverflow
To add to this form;
1.) how can it work with conditional logic, as in, if the user's input radio first question is to choose ppc or organic, if they select organic then only certain "hidden" divs with "organic" class show, and the PPC related divs don't. But the other neutral hidden divs will show later. I think the problem is they are all hidden already so the first script seems to override the second javascript that looks for "if this... else".
2.)A second problem with the multi-step form without buttons above is you cannot tab to a second or third input text field on the last page. It just blanks out.
<script type='text/javascript'>
$(document).ready(function(){
$('#traffic').on('change', function() {
if ( this.value == 'organic' )
{
$(".org").show();
$(".ppc").hide();
}
else
{
$(".org").hide();
$(".ppc").show();
}
});
});
</script>
<script type="text/javascript">
document.querySelector("form").onchange = function(e) {
var currentFormPage = e.target.parentElement.parentElement;
console.log(e.target.name + ": " + e.target.value);
if(currentFormPage.nextElementSibling) {
currentFormPage.classList.add("hidden");
currentFormPage.nextElementSibling.classList.remove("hidden");
}
}
</script>
<form>
<h2>Free Google Ads Audit!</h2>
<div>
<h4>Do you want Organic or PPC traffic right now?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="traffic" id="traffic" value="" checked></label>
<label class="radio-choice"><input type="radio" name="traffic" id="traffic" value="organic">Organic is the best</label>
<label class="radio-choice"><input type="radio" name="traffic" id="traffic" value="ppc">PPC is better</label>
</div>
<div class="hidden ppc">
<h4>What's your monthly ads budget?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="whats_your_monthly_ads_budget" value="" checked></label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="2000-10000">2,000 - 10,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="11000-50000">11,000 - 50,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="51000-100000">51,000 - 100,000</label>
<label class="radio-choice"><input type="radio" name="whats_your_monthly_ads_budget" value="+100000">100,000+</label>
</div>
<div class="hidden ppc">
<h4>Have you ever had an Adwords account?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="adwords" value="" checked></label>
<label class="radio-choice"><input type="radio" name="food" id="adwords" value="2-3 years">Yes</label>
<label class="radio-choice"><input type="radio" name="food" id="adwords" value="5 years">No</label>
</div>
<div class="hidden org">
<h4>How much experience do you have?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="experience" value="" checked></label>
<label class="radio-choice"><input type="radio" name="exp" id="experience" value="2-3 years">2-3 years</label>
<label class="radio-choice"><input type="radio" name="exp" id="experience" value="5 years">5 years</label>
</div>
<div class="hidden">
<h4>What are your Goal(s)?</h4>
<label class="radio-choice" style="display: none"><input type="radio" name="what_are_your_goals" value="" checked></label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Lead Generation">Lead Generation</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Brand Awareness">Brand Awareness</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Online Sales">Online Sales</label>
<label class="radio-choice"><input type="radio" name="what_are_your_goals" value="Sign-ups">Sign-ups</label>
</div>
<div class="hidden">
<h4>Success! You qualify for a Free Google Ads Audit, enter your email to confirm!</h4>
<input type="text" placeholder="Full name">
<input type="email" placeholder="Company Email">
<input type="button" name="email" value="Download">
</div>
</form>
This should work how you want it. Unfortunately, jquery invokes the first id as they're unique so if you want multiple elements to do the same functionality you'll have to make them all classes.
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
.hidden {
display: none;
}
</style>
<script>
$(document).ready(function() {
$('.traffic').on('change', function() {
if (this.value === "organic") {
$(".org").show();
$(".ppc").hide();
} else {
$(".org").hide();
$(".ppc").show();
}
});
});
</script>
</head>
<body>
<form>
<h2>Free Google Ads Audit!</h2>
<div>
<h4>Do you want Organic or PPC traffic right now?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="traffic" id="traffic" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="traffic" class="traffic" value="organic">Organic is the best </label>
<label class="radio-choice">
<input type="radio" name="traffic" class="traffic" value="ppc">PPC is better </label>
</div>
<div class="hidden ppc">
<h4>What's your monthly ads budget?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="whats_your_monthly_ads_budget" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="2000-10000">2,000 - 10,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="11000-50000">11,000 - 50,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="51000-100000">51,000 - 100,000 </label>
<label class="radio-choice">
<input type="radio" name="whats_your_monthly_ads_budget" value="+100000">100,000+ </label>
</div>
<div class="hidden ppc">
<h4>Have you ever had an Adwords account?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="adwords" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="food" id="adwords" value="2-3 years">Yes </label>
<label class="radio-choice">
<input type="radio" name="food" id="adwords" value="5 years">No </label>
</div>
<div class="hidden org">
<h4>How much experience do you have?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="experience" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="exp" id="experience" value="2-3 years">2-3 years </label>
<label class="radio-choice">
<input type="radio" name="exp" id="experience" value="5 years">5 years </label>
</div>
<div class="hidden">
<h4>What are your Goal(s)?</h4>
<label class="radio-choice" style="display: none">
<input type="radio" name="what_are_your_goals" value="" checked>
</label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Lead Generation">Lead Generation </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Brand Awareness">Brand Awareness </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Online Sales">Online Sales </label>
<label class="radio-choice">
<input type="radio" name="what_are_your_goals" value="Sign-ups">Sign-ups </label>
</div>
<div class="hidden">
<h4>Success! You qualify for a Free Google Ads Audit, enter your email to confirm!</h4>
<input type="text" placeholder="Full name">
<input type="email" placeholder="Company Email">
<input type="button" name="email" value="Download">
</div>
</form>
</body>
</html>
I would like to create fillable form to html and save it to text file or just on site have a box making everything checked copyable as plain text.
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul>
<li id="li_1">
<label class="description" for="element_1">Visit in the presence of </label>
<span>
<input id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li>
<li id="li_2">
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_3">
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_4">
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_5">
<label class="description" for="element_5">Meningism </label>
<span>
<input id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li>
<li id="li_7">
<label class="description" for="element_7">Skin </label>
<span>
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="1" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="2" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li>
<li id="li_6">
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
<img id="bottom" src="bottom.png" alt="">
So for example I filled the form like this
form filled example
So example output would be:
Chronic diesases none
Allergies none
Medical history
since 3 days diahrerra vomiting, temp 38,5 C
Skin rash on legs
Temperature 38,1
So I would liek to the unchecked values to be omitted and checked to be filled
How to do that? I want to make physical examination easier, I'm sick of always typing everythig
Here you go, you can go ahead and do something with the String now
const $ = (s) => document.querySelector(s);
const $$ = (s) => document.querySelectorAll(s);
$("#saveForm").addEventListener("click", function (evt) {
evt.preventDefault(); // don't submit the form
let output = [];
// set first field if radio checked
let inPresenceOf = Array.from($$("input[type='radio'][id^='element_1_']")).filter(element => element.checked);
if(inPresenceOf.length === 1) output.push($("label[for='element_1']").innerHTML + " " + $("label[for='"+inPresenceOf[0].id+"']").innerHTML);
// set second field if value not empty
if($("#element_2").value.trim()) output.push("Chronic diesases: " + $("#element_2").value.trim());
// set third field if value not empty
if($("#element_3").value.trim()) output.push("Allergies: " + $("#element_3").value.trim());
// set fourth field if value not empty
if($("#element_4").value.trim()) output.push("Medical History: " + $("#element_3").value.trim());
// set fifth field if radio checked
let meningism = Array.from($$("input[type='radio'][id^='element_5_']")).filter(element => element.checked);
if(meningism.length === 1) output.push("Meningism " + $("label[for='"+meningism[0].id+"']").innerHTML);
// set sixth field if radio checked
let skin = Array.from($$("input[type='radio'][id^='element_7_']")).filter(element => element.checked);
if(skin.length === 1) {
if($("label[for='"+skin[0].id+"']").innerHTML === "Normal, without purpura")
output.push("Skin: Normal, without purpura");
else output.push("Skin: " + $("#element_7_2").value);
}
// set seventh field if value not empty
if($("#element_6").value.trim()) output.push("Temperature: " + $("#element_6").value.trim());
const outputString = output.join("\n");
console.log(outputString)
})
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul>
<li id="li_1">
<label class="description" for="element_1">Visit in the presence of </label>
<span>
<input id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li>
<li id="li_2">
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_3">
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li id="li_4">
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_5">
<label class="description" for="element_5">Meningism </label>
<span>
<input id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li>
<li id="li_7">
<label class="description" for="element_7">Skin </label>
<span>
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="1" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="2" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li>
<li id="li_6">
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="" />
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
Are you familiar with Javascript/jQuery?
You need to use some form of logic to determine whether the field is null or not, or whether the box is checked or not
<form>
<input type="checkbox" data-val="Has Hemorrhoids"/>Hemmorhoids<br/>
<input type="checkbox" data-val="Has Severe Anal Fissures"/>Anal Fissures<br/>
<button id="create_final_summary">Make Summary</button>
</form>
<script>
$('#create_final_summary').on('click', function(){
var allFields = $(this).parents('form').find('input');
console.log(allFields);
allFields.each(function(){
if($(this).prop('checked' == true)){
$("#final_summary").append($(this).attr('data-val'));
}
});
});
You can use JavaScript to extract the text data as an object and view the properties of that object (view it in the console):
var relatives = document.body.querySelectorAll("#relativesChoices .radio");
var chronicInput = document.body.querySelector("#element_2");
var allergyInput = document.body.querySelector("#element_3");
var historyInput = document.body.querySelector("#element_4");
var meninigsm = document.body.querySelectorAll("#meninigsm .radio");
var skin = document.body.querySelectorAll("#skin .radio");
var temp = document.body.querySelector("#element_6");
var finalResult = {
relatives:"",
chronic: "",
allergies: "",
medicalHistory: "",
meningism :"",
skin:"",
temparture:""
}
function displayResults(){
for (var choice of relatives){
if(choice.checked === true){
finalResult.relatives = choice.value;
}
}
for (var choice of meninigsm){
if(choice.checked === true){
finalResult.meningism = choice.value;
}
}
for (var choice of skin){
if(choice.checked === true){
finalResult.skin = choice.value;
}
}
finalResult.chronic = chronicInput.value;
finalResult.allergies = allergyInput.value;
finalResult.medicalHistory = historyInput.value;
finalResult.temparture = temp.value;
console.log(finalResult);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MEDICAL HISTORY QUESTIONNAIRE</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
</head>
<body id="main_body" >
<img id="top" src="top.png" alt="">
<div id="form_container">
<h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
<form id="form_25714" class="appnitro" method="post" action="">
<div class="form_description">
<h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
<p></p>
</div>
<ul >
<li id="li_1" >
<label class="description" for="element_1">Visit in the presence of </label>
<span id="relativesChoices">
<input value="parents" id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input value="mother" id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input value="father" id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input value="grandmother" id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input value="grandfather " id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input value="grandparents" id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>
</span>
</li> <li id="li_2" >
<label class="description" for="element_2">Chronic diesases </label>
<div>
<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_3" >
<label class="description" for="element_3">Allergies </label>
<div>
<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_4" >
<label class="description" for="element_4">Medical history </label>
<div>
<textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
</div>
</li> <li id="li_5" >
<label class="description" for="element_5">Meningism </label>
<span id="meninigsm">
<input value="negative" id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input value="positive" id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>
</span>
</li> <li id="li_7" >
<label class="description" for="element_7">Skin </label>
<span id="skin">
<input id="element_7_1" name="element_7" class="element radio" type="radio" value="normal" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="abnormal" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
</span>
</li> <li id="li_6" >
<label class="description" for="element_6">Temperature </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li>
<button onclick="displayResults()">displayResults<button>
<li class="buttons">
<input type="hidden" name="form_id" value="25714" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
<img id="bottom" src="bottom.png" alt="">
</body>
</html>
I have a form with many checkbox. User must select at least one of them to submit the form. I've tested other stacks found here without success. This is my HTML code:
<form id="formnewsletter" action="mypage">
<input name="list" value="1" type="hidden">
<input class="form-control" id="email" name="email" value="" placeholder="Email" required="required" type="email">
<div class="formphonebox">
<input class="form-control" id="prefix" name="prefix" value="0039" style="display:inline; width:25%;" type="text"> <input class="form-control" id="number" name="number" value="" placeholder="Cellulare" style="width:70%; float:right" type="text">
</div>
<hr>
<div class="formlistbox">
<span class="checkbox">
<input class="listchecknewsletter" value="26" id="group26" name="group" type="checkbox">
<label for="group26">group26</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="47" id="group47" name="group" type="checkbox">
<label for="group47">group47</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="41" id="group41" name="group" type="checkbox">
<label for="group41">group41</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="55" id="group55" name="group" type="checkbox">
<label for="group55">group55</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="30" id="group30" name="group" type="checkbox">
<label for="group30">group30</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="58" id="group58" name="group" type="checkbox">
<label for="group58">group58</label>
</span>
</div>
<hr>
<span class="checkbox">
<input id="privacycheck" type="checkbox" required="required">
<label for="privacycheck"><small>Privacy Policy</small></label>
</span>
<div align="center">
<button type="submit" name="Submit" class="btn btn-danger" value="Iscrivimi">Iscrivimi</button>
</div>
</form>
UPDATE with solution. This is the script that worked in my case:
//controlla che almeno un checkbox delle liste/gruppi newsletter sia flaggato
$(document).ready(function () {
function checkMe() {
document.getElementById("formnewsletter").onsubmit = function() {
//controlla che almeno un checkbox delle liste/gruppi newsletter sia flaggato
if (document.querySelector('.listchecknewsletter:checked')) {
// at least one is checked
} else {
// none are checked
alert("Seleziona una lista!");
return false;
}
};
}
window.onload = function() {
checkMe();
}
});
Can someone suggest me the JavaScript code to let it work fine?
Since you haven't tagged it with jQuery, here is a solution in plain ol' javascript.
You can use CSS class of the checkboxes along with querySelector
if (document.querySelector('.listchecknewsletter:checked')) {
// at least one is checked
} else {
// none are checked
}
with jquery it would work like this for example:
$("#submit").on("click", function() {
var checkboxes = $('.formlistbox input[type="checkbox"]');
if(checkboxes.filter(':checked').length < 1) {
alert("please check at least 1 checkbox");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="list" value="1" type="hidden">
<input class="form-control" id="email" name="email" value="" placeholder="Email" required="required" type="email">
<div class="formphonebox">
<input class="form-control" id="prefix" name="prefix" value="0039" style="display:inline; width:25%;" type="text"> <input class="form-control" id="number" name="number" value="" placeholder="Cellulare" style="width:70%; float:right" type="text">
</div>
<hr>
<div class="formlistbox">
<span class="checkbox">
<input class="listchecknewsletter" value="26" id="group26" name="group" type="checkbox">
<label for="group26">group26</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="47" id="group47" name="group" type="checkbox">
<label for="group47">group47</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="41" id="group41" name="group" type="checkbox">
<label for="group41">group41</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="55" id="group55" name="group" type="checkbox">
<label for="group55">group55</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="30" id="group30" name="group" type="checkbox">
<label for="group30">group30</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="58" id="group58" name="group" type="checkbox">
<label for="group58">group58</label>
</span>
</div>
<hr>
<span class="checkbox">
<input id="privacycheck" type="checkbox" required="required">
<label for="privacycheck"><small>Privacy Policy</small></label>
</span>
<div align="center">
<button type="submit" name="Submit" class="btn btn-danger" value="Iscrivimi" id="submit">Iscrivimi</button>
</div>
If you (want to) use jQuery:
if($('.listchecknewsletter:checked').length > 0) {
// one or more are checked
}
Further, if you want to POST all the checkbox values, you have to change their name to group[], to make it an array.
When I click one of the alphabet, the selected one shall be displayed and the rest should be hidden.
Somehow, the code doesn't work. I'm using jQuery.
$("#r-learn-more").click(function() {
alert("Handler for .click() called.");
});
$("#r-book-viewing").click(function() {
$("#bb").attr("display", "block");
});
$("#r-closing-price").click(function() {
alert("Handler for .click() called.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" style="display: block;">a</div>
<div id="bb" style="display: none;">b</div>
<div style="display: none;">c</div>
In general you tried with $("#bb").attr('display','block'), must be $("#bb").css("display","block");
Maybe the better way is to use something like:
<div class="fieldset-content">
<div class="radio">
<input type="radio" data-show="aa" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" data-show="bb" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" data-show="cc" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class='item' style="display: block;">a</div>
<div id="bb" class='item' style="display: none;">b</div>
<div id="cc" class='item' style="display: none;">c</div>
And JS
var $items = $('.item');
$(':radio').on('change', function () {
var $item = $('#' + this.dataset.show);
$items.not($item).css('display', 'none');
$item.css('display', 'block');
});
Try this
$('.radio input').change(function(event){
$('.alphabet-letter').hide();
$('#'+$(this).data('id')).show();
}).first().prop('checked', true).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" data-id="aa">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing" data-id="bb">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price" data-id="cc">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class="alphabet-letter">
a
</div>
<div id="bb" class="alphabet-letter">
b
</div>
<div id="cc" class="alphabet-letter">
c
</div>
Wouldn't even be easier just to have one "result" div?
Something like this
EDIT: For displaying the "a" as default either you just put "a" in the result div, or maybe on load you get the text (in this case you are not using the value) of the radio button option selected as per the edit in the snippet
$('#result').text($('input:radio[name=radiogroup1]:checked').parent().text());
$( ".radio input" ).click(function() {
var label = $("label[for='"+$(this).attr('id')+"']");
console.log(label);
console.log(label.html());
$('#result').text(label.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="result" style="display: block;">
<!--Alernative to load the text by jquery you could just put here "a"-->
</div>
I have the following fields on a form and was wondering if it is possible to update the hidden input field (itemValue) value based on the user selection from radio buttons? So that the hidden field input value will be equal to the value of the selected radio button...Any example is highly appreciated. Thanks
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item1" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item2" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item3" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item4" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
Your radio buttons are currently all independent of each other, meaning that you can quite literally select all 4 of them at the same time. In order to get them to work together (so you can only ever select one at any given time), you'll need to give them all an identical name. For example:
<input type="radio" id="item1" name="item" value="5"/>
...
<input type="radio" id="item2" name="item" value="10"/>
Notice how these both have a name of "item"?
Once you've done that, you can use jQuery like this:
$('[name="item"]').on('change', function() {
$('[name="itemValue"]').val($(this).val());
});
JSFiddle demo. (Note that I've used a text input element rather than a hidden one to easily show you that the value changes.)
$("input[type=radio]").change(function () {
if ($(this).prop(":checked")) {
$('#yourId').val($(this).val())
}
});
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
JQuery>
$(function(){
$("input[name='item']").change(function(){
$("input[name='itemValue']").val($(this).val());
alert($("input[name='itemValue']").val());
});
});
$('input:radio').change(function () {
if (this.checked) {
$('#hidfld').val($(this).val()));
}
});