We Keep Coding

Cannot read property 'split' of undefined (debugging issue)

I am having difficulty figuring out the following error:
Uncaught TypeError: Cannot read property 'split' of undefined
The HTML:
<div id="content" class="col-xs-12 col-sm-12">
<p>Please select your preferred payment method.</p>
<div class="radio">
<label>
<input type="radio" name="payment_method" value="authorizenet" checked="checked">
Credit Card/Debit Card (Authorize.Net) </label>
</div>
<div class="radio">
<label>
<input type="radio" name="payment_method" value="affirm">
Credit Card/Debit Card (Affirm) </label>
</div>
<p><strong>Add comments about your order.</strong></p>
<p>
<textarea name="comment" rows="8" class="form-control"></textarea>
</p>
<div class="cart-module">
<div class="cart-content">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<h4 for="input-coupon">Coupon Code</h4>
<div class="input-group">
<input type="text" name="coupon" value="" placeholder="Coupon Code" id="input-coupon" class="form-control">
<span class="input-group-btn">
<input type="button" value="Apply" data-code="coupon" data-loading-text="Loading..." class="btn btn-primary">
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<h4 for="input-voucher">Gift Certificate Code</h4>
<div class="input-group">
<input type="text" name="voucher" value="" placeholder="Gift Certificate Code" id="input-voucher" class="form-control">
<span class="input-group-btn">
<input type="button" value="Apply" data-code="voucher" data-loading-text="Loading..." class="btn btn-primary">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="buttons">
<div class="pull-right">I have read and agree to the <b>Shipping and Returns</b>. <input type="checkbox" name="agree" value="1">
<input type="button" value="Continue" id="button-payment-method" data-loading-text="Loading..." class="btn btn-primary">
</div>
</div>
The Script:
var newtext = "affirm";
selector = $("input[type=radio][value=affirm]").closest("label");
var line = selector.html().split(">")[0] + ">" + newtext;
selector.html(line);
The Goal:
I have two radio buttons on the checkout page.
Credit Card/Debit Card (Authorize.Net)
Credit Card/Debit Card (Affirm)
I am unable to edit the HTML directly. Thus rebuilding the html line with the above code to give me the output I want. I am trying to change the HTML text of the 2nd radio input to just "Affirm".
The script works in a fiddle, but not on the page.

I once encountered a similar bug when trying to maintain a page without access to the source files. I was using jQuery to attempt to delete a p element sentence but was coming up undefined because it was running on the homepage before the application even got to generate that part of the html. It was an SPA. I fixed it by adding a listener on the document to the router something along like this: $(document).on("pageshow", "#checkoutPage", function() {//your jquery function});
I tried it both on CodePen and locally with VS Code and both time I got the intended effect. Have you tried maybe making sure youre using the right version of JQuery and that is linked to the html in the proper oder, also debugging via console logs? See below:
CodePen
enter code here

JQuery: My form is submitting even though validate returns false [duplicate]

This question already has answers here:
Prevent form submit but retain form validation
(2 answers)
Closed 3 years ago.
I have a form using JQuery Validator. If 2 checkboxes aren't checked, I display an error and the form shouldn't submit. But I'm finding that it submits anyway, even though my code returns false. Here's a portion of my HTML code:
<form id="addressForm" name="addressForm" method="post">
<div class="alertBox infoAlert" style="padding-top:8px;padding-left:4px;">
<div class="checkbox-inline">
<label class="checkboxContainer">I have read and agree to the <a target="newtab" href="${(www_apa_org_url)!?string}/about/termsofuse">APA Terms and Conditions</a>
<#spring.bind "shippingAddressForm.awtTermsAccepted"/>
<input type="checkbox" name="${(spring.status.expression)!}" id="awtTermsAccepted" value="true">
<span class="checkmark"></span>
</label>
</div>
<div class="checkbox-inline" style="margin-left:0;">
<label class="checkboxContainer">I have read and agree to the Academic Writer Terms of Service
<#spring.bind "shippingAddressForm.apaTermsAccepted"/>
<input type="checkbox" name="${(spring.status.expression)!}" id="apaTermsAccepted" value="true">
<span class="checkmark"></span>
</label>
</div>
<div id="gdprerror" class="help-block hide" style="color: #900;">Please indicate that you agree to the terms and policies above by checking all two boxes.</div>
</div><!-- /.alertBox -->
<div class="col-md-6 col-md-push-6">
<div class="alignRightThen100Width"><button onclick="submitAddressForm();" class="btn btn-cta-ecommerce fullWidthButton760" id="addressFormSubmit" style="min-width:350px;"/>Go to Payment & Review<i class="fa fa-chevron-right" style="padding-left:6px;" aria-hidden="true"></i></button></div>
</div>
</form>
And here's the JS:
function beforeAddressPageSubmit(){
if(showBillingAddress){
removeState('Billing');
}
}
function submitAddressForm() {
var validator = jQuery("#addressForm").validate();
var isValid = validator.form() && awtTermsAgreeCheckbox();
if (isValid) {
beforeAddressPageSubmit();
jQuery("#addressForm").submit();
}
}
Is there anything I'm doing wrong?

You need add type="button" to your button tag.
function beforeAddressPageSubmit(){
if(showBillingAddress){
removeState('Billing');
}
}
function submitAddressForm() {
var validator = jQuery("#addressForm").validate();
var isValid = validator.form() && awtTermsAgreeCheckbox();
if (isValid) {
beforeAddressPageSubmit();
jQuery("#addressForm").submit();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="addressForm" name="addressForm" method="post">
<div class="alertBox infoAlert" style="padding-top:8px;padding-left:4px;">
<div class="checkbox-inline">
<label class="checkboxContainer">I have read and agree to the <a target="newtab" href="${(www_apa_org_url)!?string}/about/termsofuse">APA Terms and Conditions</a>
<#spring.bind "shippingAddressForm.awtTermsAccepted"/>
<input type="checkbox" name="${(spring.status.expression)!}" id="awtTermsAccepted" value="true">
<span class="checkmark"></span>
</label>
</div>
<div class="checkbox-inline" style="margin-left:0;">
<label class="checkboxContainer">I have read and agree to the Academic Writer Terms of Service
<#spring.bind "shippingAddressForm.apaTermsAccepted"/>
<input type="checkbox" name="${(spring.status.expression)!}" id="apaTermsAccepted" value="true">
<span class="checkmark"></span>
</label>
</div>
<div id="gdprerror" class="help-block hide" style="color: #900;">Please indicate that you agree to the terms and policies above by checking all two boxes.</div>
</div><!-- /.alertBox -->
<div class="col-md-6 col-md-push-6">
<div class="alignRightThen100Width"><button type="button" onclick="submitAddressForm();" class="btn btn-cta-ecommerce fullWidthButton760" id="addressFormSubmit" style="min-width:350px;"/>Go to Payment & Review<i class="fa fa-chevron-right" style="padding-left:6px;" aria-hidden="true"></i></button></div>
</div>
</form>

how retrieve the value from checkbox buttons on Bootstrap 4?

I Am using Bootstrap's button plugin for my buttons, currently I have 6 Checkbox buttons and I need a Method to retrieve the value of every checked button to make some calculations. But I cannot figure how, I tried searching here And found a pretty good way but for Radio Buttons and for a single checkbox but didn't find any for multiple.
how can I make a Jquery method for sweeping the btnGroup elements and retrieve all the checked values in an array?
Please help!!
PS. I Am not native English speaker and I Am pretty new to Jquery, so sorry if its a noob question.
Example Html:
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>

You can use this selector:
$("#btnGroup input[type='checkbox']:checked")
To get all the checked checkboxes in the div with the id btnGroup. You can then use .each() to loop over all the checked boxes and use destructuring assignment to get the value of each checked box.
Here I have logged out each value as an example.
See example below:
let values = [];
$('.calculate').click(_ => {
values = [];
$("#btnGroup input[type='checkbox']:checked").each((_, {value}) => {
values.push(value);
});
console.log(values);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar btn-group-toggle" data-toggle="buttons" id="btnGroup">
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn1" id="" autocomplete="off" value="value1">value1</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn2" id="" autocomplete="off" value="value2">value2</label>
</div>
<div class="col-auto">
<label class="btn btn-outline-info">
<input type="checkbox" name="btn3" id="" autocomplete="off" value="value3">value3</label>
</div>
</div>
<button class="calculate btn btn-primary btn-lg">Calculate</button>

How do I add a class to great-great-great-great-grandparent fieldset of an element using jquery?

I am trying to add a class to a great-great-great-great-grandparent of an input element using jquery and/or plain javascript. The idea is; after clicking the button (class="ws-btn-previous") on the current step, a class is added to the fieldset containing selected capacity radio button in the previous step and fade into that fieldset then remove the added class.
The HTML for active fieldset is as follows;
<fieldset class="working_status ">
<h4 class="text-center">What is your Phone's condition?</h4>
<div class="container">
<div>
<ul class="h-ws row">
<li class="wsbf">
<input type="radio" class="sell-rdb" id="ws1" name="working_status" value="Excellent" />
<label class="ws-btn-labels" for="ws1">
<p id="wslbl">Excellent</p>
<p>Good as new. Has no dents or scratches.</p>
</label>
</li>
</ul>
</div>
</div>
<div class="container wizard-buttons">
<button type="button" class="btn btn-previous ws-btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
The HTML section of preceding fieldset in previous step is as follows;
<fieldset class="capacity-gj7p">
<h4 class="text-center">Please select your Galaxy J7 Prime memory capacity</h4>
<div class="container">
<div>
<ul class="h-m row">
<li class="cbf">
<input type="radio" class="sell-rdb" id="sc49" name="capacity" value="32" />
<label class="capacity-btn-labels" for="sc49">32</label>
</li>
</ul>
</div>
</div>
<div class="container wizard-buttons">
<button type="button" class="btn btn-previous sc-btn-previous">Previous</button>
<button type="button" class="btn btn-next capacity-btn-next">Next</button>
</div>
</fieldset>
My attempt to tackle the problem using jQuery and plain javascript is as follows;
jQuery(document).ready(function() {
$('form .ws-btn-previous').on('click', function() {
var fset = document.getElementById("sell-wiz").elements["capacity"];
$(this).parents('fieldset').fadeOut(200, function() {
fset.addClass('capacity-parent');
$('.capacity-parent').fadeIn();
fset.removeClass('capacity-parent');
});
});
});
What am I missing? Is there a better way to do it? Thanks in advance.

data-mincheck parsley not working

I am using parsley.js to validate my form. When trying to validate my checkbox by using data-mincheck, noting happens.
here is my code snippet:
<form data-validate="parsley">
<p>Pick atleast 2 items:</p>
<div id="custom-salad">
<div class="sub-step">
<p>Base:</p>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" data-group="salad-dish" name="salad-custom" data-mincheck="2" value="pasta"> <i class="icon-unchecked"></i> Pasta
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" data-group="salad-dish" name="salad-custom" value="Cabage"> <i class="icon-unchecked"></i> Cabage
</label>
</div>
</div>
</div>
</form>

On the Parsley.js Website it says, he only uses the parsley-namespace for his values. I evaluated this quickly with the current version of Parsley.js.
Its seems that it doesnt work anymore with data- attributes, however this is what i got out of you code to get it working:
<form action="success.html" parsley-validate method="post">
<p>Pick atleast 2 items:</p>
<div id="custom-salad">
<div class="sub-step">
<p>Base:</p>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" parsley-group="salad-test" name="salad-custom" parsley-mincheck="2" value="pasta"> <i class="icon-unchecked"></i> Pasta
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" parsley-group="salad-test" name="salad-custom" value="Cabage"> <i class="icon-unchecked"></i> Cabage
</label>
</div>
</div>
</div>
<input type="submit" value="Senden"> </input>
</form>
Make sure you add Jquery before Parsley. I simply added the now recommendet Parsley attributes like "parsley-validate" on the Form and "parsley-group" and "parsley-mincheck" for the Field.
The "parsley-group" always has to be the same for each Checkbox to be affected. But isnt limited to the "name" attribute.
Hope this helps.