HTML forms - multiple choice form to plain text - javascript

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>

Related

Multi step form (no next button) with conditional logic

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>

Adding Multiple Checkboxes with Quanity Fields with JS

I'm having trouble adding this set of checkboxes with the respected Hrs. quantity box. The first problem is I have at least a zero "0" in all of the Hrs. quantity boxes which won't work for us. The second problem is I'd like it to only add the checkboxes that are selected. What you cant see from the HTML, is that there is logic that only displays the correct Hrs. quantity
box based on the selection. The HTML is formatted from the system that we use so I have no control over it.
// Equipment Subtotals - Cranes
$(document).ready(function () {
$(document).on('touchend click keyup change', function (ev) {
var val1 = parseFloat($("#element_323_1").attr('data-pricedef'));
var val2 = parseFloat($("#element_325").val());
var val3 = parseFloat($("#element_323_2").attr('data-pricedef'));
var val4 = parseFloat($("#element_525").val());
var val5 = parseFloat($("#element_323_3").attr('data-pricedef'));
var val6 = parseFloat($("#element_528").val());
var val7 = parseFloat($("#element_323_4").attr('data-pricedef'));
var val8 = parseFloat($("#element_529").val());
var val9 = parseFloat($("#element_323_5").attr('data-pricedef'));
var val10 = parseFloat($("#element_530").val());
var val11 = parseFloat($("#element_323_6").attr('data-pricedef'));
var val12 = parseFloat($("#element_531").val());
var val13 = parseFloat($("#element_323_7").attr('data-pricedef'));
var val14 = parseFloat($("#element_532").val());
var val20 = (val1 * val2 + val3 * val4 + val5 * val6 + val7 * val8 + val9 * val10 + val11 * val12 + val13 * val14).toFixed(2);
if (isNaN(val20) || val20 < 0) {
$("#element_545").val("0");
} else {
$("#element_545").val(val20);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="li_323" data-pricefield="checkbox" data-pricevalue="0" class="checkboxes column_1">
<span class="description">Cranes </span>
<div>
<fieldset>
<legend style="display: none">Cranes</legend>
<span><input id="element_323_1" data-pricedef="146.00" name="element_323_1" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_1">17-Ton Crane w/2 MC</label>
</span>
<span><input id="element_323_2" data-pricedef="200.00" name="element_323_2" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_2">17-Ton Crane w/2 MC 11+Hrs.</label>
</span>
<span><input id="element_323_3" data-pricedef="122.00" name="element_323_3" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_3">17-Ton Crane w/Oper.</label>
</span>
<span><input id="element_323_4" data-pricedef="150.00" name="element_323_4" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_4">17-Ton Crane w/Oper. 11+Hrs.</label>
</span>
<span><input id="element_323_5" data-pricedef="150.00" name="element_323_5" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_5">17-Ton Crane w/Oper. Holiday</label>
</span>
<span><input id="element_323_6" data-pricedef="160.00" name="element_323_6" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_6">23-Ton Crane w/Oper.</label>
</span>
<span><input id="element_323_7" data-pricedef="190.00" name="element_323_7" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_323_7">23-Ton Crane w/Oper. 11+Hrs.</label>
</span>
</fieldset>
</div>
</li> <li id="li_527" class="column_3 guidelines_bottom">
<label class="description" for="element_527">Enter Crane Number(s) <span id="required_527" class="required">*</span></label>
<div>
<input id="element_527" name="element_527" class="element text large" type="text" value="" />
</div><p class="guidelines" id="guide_527"><small>Enter equipment numbers separated by a comma.</small></p>
</li> <li id="li_325" class="column_3 guidelines_bottom">
<label class="description" for="element_325">17-Ton / Hrs. <span id="required_325" class="required">*</span></label>
<div>
<input id="element_325" name="element_325" class="element text small" type="text" data-quantity_link="element_323_1" value="" />
<span class="label"><var id="range_max_325">11</var> or less.</span>
</div><p class="guidelines" id="guide_325"><small>* No More Than 11 Hrs.</small></p>
</li> <li id="li_525" class="column_3">
<label class="description" for="element_525">17-Ton / OT Hrs. <span id="required_525" class="required">*</span></label>
<div>
<input id="element_525" name="element_525" class="element text small" type="text" data-quantity_link="element_323_2" value="" />
</div>
</li> <li id="li_528" class="column_3 guidelines_bottom">
<label class="description" for="element_528">17-Ton / Hrs. <span id="required_528" class="required">*</span></label>
<div>
<input id="element_528" name="element_528" class="element text small" type="text" data-quantity_link="element_323_3" value="" />
<span class="label"><var id="range_max_528">11</var> or less.</span>
</div><p class="guidelines" id="guide_528"><small>* No More Than 11 Hrs.</small></p>
</li> <li id="li_529" class="column_3">
<label class="description" for="element_529">17-Ton / OT Hrs. <span id="required_529" class="required">*</span></label>
<div>
<input id="element_529" name="element_529" class="element text small" type="text" data-quantity_link="element_323_4" value="" />
</div>
</li> <li id="li_530" class="column_3">
<label class="description" for="element_530">17-Ton / Holiday Hrs. <span id="required_530" class="required">*</span></label>
<div>
<input id="element_530" name="element_530" class="element text small" type="text" data-quantity_link="element_323_5" value="" />
</div>
</li> <li id="li_531" class="column_3 guidelines_bottom">
<label class="description" for="element_531">23-Ton / Hrs. <span id="required_531" class="required">*</span></label>
<div>
<input id="element_531" name="element_531" class="element text small" type="text" data-quantity_link="element_323_6" value="" />
<span class="label"><var id="range_max_531">11</var> or less.</span>
</div><p class="guidelines" id="guide_531"><small>* No More Than 11 Hrs.</small></p>
</li> <li id="li_532" class="column_3">
<label class="description" for="element_532">23-Ton / OT Hrs. <span id="required_532" class="required">*</span></label>
<div>
<input id="element_532" name="element_532" class="element text small" type="text" data-quantity_link="element_323_7" value="" />
</div>
</li> <li id="li_545" style="display:" class="column_3">
<label class="description" for="element_545">Crane Subtotal </label>
<div>
<input id="element_545" name="element_545" class="element text small" readonly="readonly" type="text" value="" />
</div>
Thanks for any help!
Aaron
Try this instead:
function doMySums(){
var sum = 0;
if ($("#idOfCheckboxForThisInput").is(":checked"))
sum += (parseFloat($("#idOfElementWithPriceDef").attr('data-pricedef')) || 0) * (parseFloat($("#idOfInputForThisCheckBox").val()) || 0);
//continue in similar spirit until done
return sum;
}
First, the $().is(':checked') will make sure that the addition is only performed when the selector is checked. The parseFloat() || 0 will ensure that if the parseFloat ever resolves to a NaN, then the expression will resolve to zero, and not mess up your sum. This will allow you to have empty inputs.

jquery remove parent of parent cur.element

hi I don't remove parnet.
My code:
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<img src="" onerror="delNoneOptionFilters(this)" class="product_filter_none_option">
<script>function delNoneOptionFilters( x ){ $(x).closest('label').remove; }</script>
</span>
</label>
<label class="prdctfltr_ft_popularity">
<input type="checkbox" value="popularity">
<span>Popularity</span>
</label>
<label class="prdctfltr_ft_rating">
<input type="checkbox" value="rating">
<span>Average rating</span>
</label>
<label class="prdctfltr_ft_date">
<input type="checkbox" value="date">
<span>Newness</span>
</label>
<label class="prdctfltr_ft_price">
<input type="checkbox" value="price">
<span>Price: low to high</span>
</label>
<label class="prdctfltr_ft_price-desc">
<input type="checkbox" value="price-desc">
<span>Price: high to low</span>
</label>
</div>
</div>
I want delete label class="prdctfltr_ft_"
remove is not a property It is a function you have to use like this $(x).closest('label').remove().
function delNoneOptionFilters( x ){
$(x).closest('label').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<button onclick="delNoneOptionFilters(this)">delete</button>
</span>
</label>
<label class="prdctfltr_ft_popularity"><input type="checkbox" value="popularity"><span>Popularity</span></label><label class="prdctfltr_ft_rating"><input type="checkbox" value="rating"><span>Average rating</span></label><label class="prdctfltr_ft_date"><input type="checkbox" value="date"><span>Newness</span></label><label class="prdctfltr_ft_price"><input type="checkbox" value="price"><span>Price: low to high</span></label><label class="prdctfltr_ft_price-desc"><input type="checkbox" value="price-desc"><span>Price: high to low</span></label>
</div>
</div>
Please Try This:-
function delNoneOptionFilters( x ){ $(x).parents('label').remove(); }

Add class name for selected radio button div

<div>
One : <input type="radio" name="typeof" id="typeof1-grey" value="grey" />
Two : <input type="radio" name="typeof" id="typeof2-pink" value="pink" />
Three : <input type="radio" name="typeof" id="typeof3-green" value="green" />
<div>
<div id="one" style="display:none;">
ABC : <input type="text" name="abc" value="" />
PQR : <input type="text" name="pqr" value="" />
</div>
<div id="two" style="display:none;">
XYZ : <input type="text" name="xyz" value="" />
</div>
<div id="three" style="display:none;">
Full Name: <input type="text" name="fname" value="" />
</div>
If select "One"(Grey) radio button, i need to show DIV id "one" and add class name(required) to all input fields with in the div.
The same way if i change to pink radio button remove the previous div class name and add into the DIV id two using Jquery.
Please help me!
You can relate the radio controls to the div by their index. You can then add/remove the classes as needed. Try this:
$('input[type="radio"]').change(function() {
$('input[type="text"]').removeClass('required');
$('div').not(':first').hide();
$('div').eq($(this).index() + 1).show().find('input').addClass('required');
});
Note that you can simplify this logic by the use of classes in your HTML:
<div>
One : <input type="radio" name="typeof" id="typeof1-grey" class="radio" value="grey" />
Two : <input type="radio" name="typeof" id="typeof2-pink" class="radio" value="pink" />
Three : <input type="radio" name="typeof" id="typeof3-green" class="radio" value="green" />
<div>
<div id="one" class="optional-div">
ABC : <input type="text" name="abc" value="" class="text-input" />
PQR : <input type="text" name="pqr" value="" class="text-input" />
</div>
<div id="two" class="optional-div">
XYZ : <input type="text" name="xyz" value="" class="text-input" />
</div>
<div id="three" class="optional-div">
Full Name: <input type="text" name="fname" value="" class="text-input" />
</div>
$('.radio').change(function() {
$('.text-input').removeClass('required');
$('.optional-div').hide().eq($(this).index()).show().find('.text-input').addClass('required');
});
Example fiddle
Here's my solution, I added a class sub to every div element which has to show/hide when a radiobutton is clicked.
var divs = ['#one', '#two', '#three'];
$('input[type="radio"]').change(function() {
var current = $(divs[$(this).index()]);
$('.sub').hide();
$('input').removeClass('required');
current.show();
current.children('input').addClass('required');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
One : <input type="radio" name="typeof" id="typeof1-grey" value="grey" />
Two : <input type="radio" name="typeof" id="typeof2-pink" value="pink" />
Three : <input type="radio" name="typeof" id="typeof3-green" value="green" />
<div>
<div id="one" class="sub" style="display:none;">
ABC : <input type="text" name="abc" value="" />
PQR : <input type="text" name="pqr" value="" />
</div>
<div id="two" class="sub" style="display:none;">
XYZ : <input type="text" name="xyz" value="" />
</div>
<div id="three" class="sub" style="display:none;">
Full Name: <input type="text" name="fname" value="" />
</div>
The only thing that you have to do is add the classname to the divs array when you make a fourth option. Goodluck.
Is that what you are looking for ??
html
<div>
One : <input type="radio" name="typeof" data-target="#one" class="radiobtn" value="grey" />
Two : <input type="radio" name="typeof" data-target="#two" class="radiobtn" value="pink" />
Three : <input type="radio" name="typeof" data-target="#three" class="radiobtn" value="green" />
<div>
<div class="toTarget" id="one" >
ABC : <input type="text" name="abc" value="" />
PQR : <input type="text" name="pqr" value="" />
</div>
<div class="toTarget" id="two" >
XYZ : <input type="text" name="xyz" value="" />
</div>
<div class="toTarget" id="three" >
Full Name: <input type="text" name="fname" value="" />
</div>
CSS
.toTarget{
display:none;
}
javascript
$('.radiobtn').click(function(){
var color = $(this).val();
var Thistarget = $(this).attr('data-target');
$('.toTarget').css('display','none');
$(Thistarget+' input').attr('required');
$(Thistarget).css({
'display':'block'
});
});
Working Fiddle

jquery calculations with radio buttons

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));
});
});

Categories