I'm attempting to get the text from an element, remove some of the string, add a question mark & then place the updated string into another element
However, when the element is returned, the markup generates additional unwanted space before & also puts the question mark on an entirely new line within the element.
This is what is returned from a console log
Code Example
// Set Variables for Dynamic Copy Function
let choiceNode = document.querySelectorAll('.choice');
let dynamicCopyNode = document.querySelector('.dynamic-copy');
// Update the text type on dynamic copy & append a question mark + remove 'The '
function updateChoice() {
let choiceSelected = this.textContent + '?';
let choiceSelectedTrim = choiceSelected.replace('The ', '');
dynamicCopyNode.textContent = choiceSelectedTrim;
}
// Click listener to trigger the function
Array.from(choiceNode).forEach(function(element) {
element.addEventListener('click', updateChoice);
});
<form>
<div class="choice-wrapper">
<div class="choice">
<input type="radio" name="choice" id="one" value="1">
<label for="one">
<p class="name">The first choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="2">
<label for="one">
<p class="name">The second choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="3">
<label for="one">
<p class="name">The third choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="4">
<label for="one">
<p class="name">The fourth choice</p>
</label>
</div>
<div class="error-wrap">
<label class="error" for="choice" generated="true"></label>
</div>
</div>
<div class="copy-wrapper">
<div class="variable-copy">
<p>Why did you choose</p>
<h1 class="dynamic-copy"></h1>
</div>
</div>
</form>
What I'm trying to achieve is a return like so first choice?
You have to get the textContent of the p tag, not the whole div.
// Set Variables for Dynamic Copy Function
let choiceNode = document.querySelectorAll('.choice');
let dynamicCopyNode = document.querySelector('.dynamic-copy');
// Update the text type on dynamic copy & append a question mark + remove 'The '
function updateChoice() {
// ======================= next line changed
let choiceSelected = this.querySelector('.name').textContent + '?';
let choiceSelectedTrim = choiceSelected.replace('The ', '');
dynamicCopyNode.textContent = choiceSelectedTrim;
}
// Click listener to trigger the function
Array.from(choiceNode).forEach(function(element) {
element.addEventListener('click', updateChoice);
});
<form>
<div class="choice-wrapper">
<div class="choice">
<input type="radio" name="choice" id="one" value="1">
<label for="one">
<p class="name">The first choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="2">
<label for="one">
<p class="name">The second choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="3">
<label for="one">
<p class="name">The third choice</p>
</label>
</div>
<div class="choice">
<input type="radio" name="choice" id="one" value="4">
<label for="one">
<p class="name">The fourth choice</p>
</label>
</div>
<div class="error-wrap">
<label class="error" for="choice" generated="true"></label>
</div>
</div>
<div class="copy-wrapper">
<div class="variable-copy">
<p>Why did you choose</p>
<h1 class="dynamic-copy"></h1>
</div>
</div>
</form>
Related
I have a quick wizard that captures customer selection with both checkboxes and radio buttons (only a single instance on each wizard page so only radio or checkboxes)
I'm trying to capture only the selected radio and checkboxes
form.addEventListener("submit", (e) => {
e.preventDefault();
const inputs = [];
form.querySelectorAll("input").forEach((input) => {
const { name, value, status } = input;
inputs.push({ name, value });
});
console.log(inputs);
form.reset();
});
here is the HTML with the 3 step wizard
<section>
<div class="container">
<form>
<div class="step step-1 active">
<h2>How to serve?</h2>
<div class="form-group">
<input type="radio" id="forhere" name="where" value="forhere"
checked>
<label for="forhere">For Here</label>
</div>
<div class="form-group">
<input type="radio" id="togo" name="where" value="togo">
<label for="togo">To Go</label>
</div>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-2">
<h2>Size?</h2>
<div class="form-group">
<input type="radio" id="small" name="size" value="small"
checked>
<label for="small">Small</label>
</div>
<div class="form-group">
<input type="radio" id="medium" name="size" value="medium">
<label for="medium">Medium + 0.49c</label>
</div>
<div class="form-group">
<input type="radio" id="large" name="size" value="large">
<label for="large">Large + 0.99c</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="button" class="next-btn">Next</button>
</div>
<div class="step step-3">
<p>Anything Else:</p>
<div class="form-group">
<input type="checkbox" id="extrahot" name="extrahot" checked>
<label for="extrahot">Extra Hot</label>
</div>
<div class="form-group">
<input type="checkbox" id="doubleshot" name="doubleshot">
<label for="doubleshot">Double Shot + $0.49c</label>
</div>
<div class="form-group">
<input type="checkbox" id="whipped" name="whipped">
<label for="whipped">Whipped Cream</label>
</div>
<button type="button" class="previous-btn">Prev</button>
<button type="submit" class="submit-btn">Add To Order</button>
</div>
</form>
</div>
</section>
I'm not set on this as I'm going to be adding this as a popup that I currently use only with a single selection option but need the checkboxes
Thank you
Return just the checked items.
form.querySelectorAll("input:checked")
const elements = form.querySelectorAll('input[type="checkbox"]:checked, input[type="radio"]:checked');
How can I move the input inside the <label> tag, so that it would be <label><input></label> using jQuery. I need to target all the answers within the select-option set.
<div class=”select-option”>
<div>
<input id="[0]_Actual_Answer_1" name="[0]_Actual_Answer_1" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_1">HELLO WORLD</label>
</div>
<div>
<input id="[0]_Actual_Answer_2" name="[0]_Actual_Answer_2" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_2">HELLO WORLD 2</label>
</div>
<div>
<input id="[0]_Actual_Answer_3" name="[0]_Actual_Answer_3" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_3">HELLO WORLD 3</label>
</div>
<div>
<input id="[0]_Actual_Answer_4" name="[0]_Actual_Answer_4" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_4">HELLO WORLD 4</label>
</div>
</div>
Your quotes <div class=”select-option”> are incorrect! Use "
Than for the jQuery part:
$("label[for*='[0]_Actual_Answer']").prepend(function(){
return $(this).prev("input");
});
label{background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-option">
<div>
<input id="[0]_Actual_Answer_1" name="[0]_Actual_Answer_1" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_1">HELLO WORLD</label>
</div>
<div>
<input id="[0]_Actual_Answer_2" name="[0]_Actual_Answer_2" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_2">HELLO WORLD 2</label>
</div>
<div>
<input id="[0]_Actual_Answer_3" name="[0]_Actual_Answer_3" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_3">HELLO WORLD 3</label>
</div>
<div>
<input id="[0]_Actual_Answer_4" name="[0]_Actual_Answer_4" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_4">HELLO WORLD 4</label>
</div>
</div>
Using prepend(function)
$('.select-option label[for*=Actual_Answer]').prepend(function(){
return $(this).prev("input")
});
If I'm understanding correctly, what you may be after is something like this...
$(document).ready(function() {
$('.select-option input').each(function() { //Get every input in the "select-option" div
var t = $(this);
var l = t.siblings('label'); //Find the closest label
t.detach().appendTo(l);
});
});
JSFiddle
I swear I tried a lot before asking you guys, but I just can't make it work properly. I have a radio and a checkbox area as it follows:
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>
I want to sum the user's choices and display it as texts and numbers. The selected radio will be displayed as text inside #resultPlan and it's value inside #sumPlan. The selected checkbox(es) will be displayed as text inside #resultOption and it's value inside #sumOption. If the user checks both boxes, #resultOption will have a comma separating each option and #sumOption will be the sum of both values. Finally, the label #sumTotal will get all the values selected, summed and displayed as a number.
I hope you guys got what I'm trying to do. I hope to find a solution that works with IE, so JS or Jquery.
UPDATE 1:
The code I created (but with no success) was based on each possible case of the use'r choice. That was the basic structure:
$("input[name=linePlan]").on('change',function(){
var linePlan = $('input[name=linePlan]:checked');
if ($(linePlan).is(':checked') && $(this).val() == '100000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 1")
$('#sumPlan').text('100000～')
$('#totalLine').text((Math.round(100000 * 1.08)) + '～') //1.08 is a tax fee
} else if ($(linePlan).is(':checked') && $(this).val() == '126000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 2")
$('#sumPlan').text('126000～')
$('#sumTotal').text((Math.round(126000 * 1.08)) + '～')
}
});
Of course that's not the full code, but that is pretty much what I tried.
Thank you for all the help!
I just created a code for your question. If you need the taxes, just add conditional statements below. Hope this helps.
Check this code :
$("input[name=linePlan],input[type=checkbox]").on('change', function() {
var planvalue = parseInt($('input[name=linePlan]:checked').val());
var plantext = $('input[name=linePlan]:checked').parent().text();
var optionsvalue = 0;
var options = [];
$('input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
optionsvalue += parseInt($(this).val());
options.push($(this).parent().text());
}
});
var optionstext = options.join(',');
$('#resultPlan').text(plantext);
$('#sumPlan').text(planvalue);
$('#resultOption').text(optionstext);
$('#sumOption').text(optionsvalue);
if (optionsvalue == 0)
$('#resultOption').text("No Options");
$('#sumTotal').text(planvalue + optionsvalue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>
I am trying to change the radio button that is checked by default and I cannot access the html to do so, but I can use javascript. Here is the html
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>
Filter By Course Availability
</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">
Search scheduled courses
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">
Search all courses
</label>
</div>
</fieldset>
</div>
</div>
I want to make the searchAvailable the default and here is the javascript that I'm using and it doesn't seem to work. I'm new to this so be nice lol.
var sel = document.getElementById('searchAvailable');
sel.searchALL.removeAttribute('checked');
sel.searchAvailable.setAttribute('checked', 'checked');
document.forms[0].reset();
Just these two lines should be enough:
var sel = document.getElementById('searchAvailable');
sel.checked = true;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>Filter By Course Availability</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">Search scheduled courses</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">Search all courses</label>
</div>
</fieldset>
</div>
</div>
In my example, each div with id contains controls for user's response (radio group).
I am trying to count number of DIVs, in which user has provided response and feed the result into a text field [name="REP"]. Either Yes or No is acceptable for response to be counted.
HTML structure follows:
<div class="figures">
<div id="Template_Questions">
<label for="number1">Number of ALL items:</label>
<input class="counter" type="number" name="ALL" id="number1">
</div>
<div id="Responded_Questions">
<label for="number2">Number of RESPONDED items:</label>
<input class="counter" type="number" name="RESP" id="number2">
</div>
</div>
<div class="sections"><p>Sections</p>
<div class="A" id="Q01">
<h2>Section 1</h2>
<h5>4201</h5>
<div class="Response">
<label><input type="radio" name="Radio1" value="Y" id="R1Y">Yes</label>
<label><input type="radio" name="Radio1" value="N" id="R1N">No</label>
</div>
<div class="Observation">
<label for="Obs1">Notes:</label><br>
<textarea name="observation" id="Obs1"></textarea>
</div>
</div>
<div class="B" id="Q02">
<h2>Section 2</h2>
<h5>4202</h5>
<div class="Response">
<label><input type="radio" name="Radio2" value="Y" id="R2Y">Yes</label>
<label><input type="radio" name="Radio2" value="N" id="R2N">No</label>
</div>
<div class="Observation">
<label for="Obs2">Notes:</label><br>
<textarea name="observation" id="Obs2"></textarea>
</div>
</div>
<div class="A" id="Q03">
<h2>Section 3</h2>
<h5>4203</h5>
<div class="Response">
<label><input type="radio" name="Radio3" value="Y" id="R3Y">Yes</label>
<label><input type="radio" name="Radio3" value="N" id="R3N">No</label>
</div>
<div class="Observation">
<label for="Obs3">Notes:</label><br>
<textarea name="observation" id="Obs3"></textarea>
</div>
</div>
<div class="B" id="Q04">
<h2>Section 4</h2>
<h5>4204</h5>
<div class="Response">
<label><input type="radio" name="Radio4" value="Y" id="R4Y">Yes</label>
<label><input type="radio" name="Radio4" value="N" id="R4N">No</label>
</div>
<div class="Observation">
<label for="Obs4">Notes:</label><br>
<textarea name="observation" id="Obs4"></textarea>
</div>
</div>
</div>
I have counted the total number of DIVs, containing response controls:
jQuery(function ($) {
$(function () {
var counter = $("[id^=Q]").filter(function ()
{
return this.id.match(/Q\d+/);
}).length;
$("input[name=ALL]").val(counter);
})});
I think I can also get number of checked controls, but actually need number of DIVs. On the other hand, if ANY of the radio btns (either Yes or No) = 1, then something like this
should do the trick and then just pass the number to the textfield?
$("#Div input:checkbox:checked").length
Thanks in advance.
since only one input could be checked in each div you can simply use something like this
$('input[type="radio"]:checked').length
UPDATE: auto update counter in text field using input change event
$('input[type="radio"]').change(function(){
$('#textfield-id').val( $('input[type="radio"]:checked').length );
});