Ok I have been building this nutrition plugin for wordpress, trying to find a solution for this simple task that a couple of lines of js should work.... just to uncheck the other check boxes when one is checked.
I have 4 input's nested in div's as per this:
<div class="nutrition-mc-group nutrition-mc-group-activity-level">
<div class="nutrition-mc-selection-box">
<div class="nutrition-mc-checkbox-outter">
<input type="checkbox" id="squared-checkbox1">
<label class="nutrition-mc-checkbox" id="mc-sedentary-select" for="squared-checkbox1"></label>
</div>
<p class="nutrition-mc-notes nutrition-mc-notes-switch">Sedentary</p>
<p class="nutrition-mc-description">Typical desk job / Sitting most of the day</p>
</div>
<div class="nutrition-mc-selection-box">
<div class="nutrition-mc-checkbox-outter">
<input type="checkbox" id="squared-checkbox2">
<label class="nutrition-mc-checkbox" id="mc-lightly-active-select" for="squared-checkbox2"></label>
</div>
<p class="nutrition-mc-notes nutrition-mc-notes-switch">Lightly Active </p>
<p class="nutrition-mc-description">Walking around a good amount, retail jobs</p>
</div>
<div class="nutrition-mc-selection-box">
<div class="nutrition-mc-checkbox-outter">
<input type="checkbox" id="squared-checkbox3">
<label class="nutrition-mc-checkbox" id="mc-moderately-active-select" for="squared-checkbox3"></label>
</div>
<p class="nutrition-mc-notes nutrition-mc-notes-switch">Moderately Active</p>
<p class="nutrition-mc-description">Walking constantly in a fast paced environment, waiting tables</p>
</div>
<div class="nutrition-mc-selection-box">
<div class="nutrition-mc-checkbox-outter">
<input type="checkbox" id="squared-checkbox4">
<label class="nutrition-mc-checkbox" id="mc-vigorously-active-select" for="squared-checkbox4"></label>
</div>
<p class="nutrition-mc-notes nutrition-mc-notes-switch">Vigorously Active</p>
<p class="nutrition-mc-description">Very labor intensive, construction workers</p>
</div>
</div>
Now the js is a little different, I have tried to simplify it as much as possible:
this.allActive = this.mod.find( '.nutrition-mc-group-activity-level input');
_init: function(){
this.allActive.on('change', $.proxy( this._uncheckActivityBtn, this ) );
},
_uncheckActivityBtn: function(){
$(this.allActive).not(this).prop('checked', false);
},
It runs fine, but its like it is not recognizing the not(this) part argument.
if I change the .prop to true it changes the argument and all the inputs become checked when checking one. I cant figure out why it is not understanding the this part of the argument and not excluding the currently selected box.
I tried to just move everything in the one function but when doing a debug the output gave an error for the not(this) operator, saying something about it being unspecified.
We had similar requirement in our project and we turned up using radio button. Just change the styling as per your style guide.
Note: all radio button inputs must have the same name.
Related
I have installed a custom plugin in WordPress which render a check box for a subscription to a newsletter service (mailchimp).
The plugin does not allow to "default the check box"... as you can see below, none of the newsletter option is selected by default (please look here: http://italiancrypto.it/register/ )
Default not checked
I need help on:
1) understanding where to write custom code (I can onnly use the GUI, not modifying the ore)
2) that function I need to call for:
default the daily newsletter check box
Default Daily check
if I tick the weekly option, the daily should auto-un-check
When Check Weekly, Daily uncheck
I am not sure how to proceed...
I have grabbed the code from chrome and it is the following:
daily newsletter code:
<div class="um-field um-field-b um-field-mailchimp" data-key="um_mailchimp_8_7">
<div class="um-field-area">
<label class="um-field-checkbox">
<input type="checkbox" name="um-mailchimp[8adb6373b1]" value="1">
<span class="um-field-checkbox-state"><i class="um-icon-android-checkbox-outline-blank"></i></span>
<span class="um-field-checkbox-option">Daily Newsletter Registration - MailChimp</span>
</label>
<div class="um-clear"></div>
</div>
</div>
and this is the code for weekly newsletter
<div class="um-field um-field-b um-field-mailchimp" data-key="um_mailchimp_8_8">
<div class="um-field-area">
<label class="um-field-checkbox">
<input type="checkbox" name="um-mailchimp[4c01dced4a]" value="1">
<span class="um-field-checkbox-state"><i class="um-icon-android-checkbox-outline-blank"></i></span>
<span class="um-field-checkbox-option">Weekly Newsletter Registration - MailChimp</span>
</label>
<div class="um-clear"></div>
</div>
</div>
I am not sure if I should use javascript, jquery or something completely different...
Many thanks all
Regards
Ivan
I have a big form for a website, with multiple required fields, and all of them are working perfectly, when i click submit on the form, the web page scroll to the field's location with an error message, except on two parts, the "Number of travelers" and the "Date of the trip".
This is the HTML for both of them:
<div class="sect-txt" style="margin-top:100px;" id="op">
<h1> Date of the trip </h1>
<div class="al">
<h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check In </h1>
<input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-in" name="checkin" required />
</div>
<div class="al">
<h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check Out </h1>
<input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-out" name="checkout" required />
</div>
<a href="#four">
<div class="btn-nxt" style="position:relative;top:137px;">
NEXT
</div>
</a>
</div>
<div class="sect-txt">
<h1> Number of travelers </h1>
<input type="number" class="f-2" placeholder="Adults" name="adults" required/>
<input type="number" class="f-3" placeholder="Children" name="childrens" required/>
<a href="#fif">
<div class="btn-nxt-b">
NEXT
</div>
</a>
</div>
And this is a link to the page in action: http://www.eliteware.co/92/form/
Your button is not focusable because you are trying to hide it when it has to receive focus again. Check the following link for more information about why this happens. Basically, you are hiding the object that is supposed to receive focus when validation is needed. If you don't want this to happen, you can probably do validation before hiding, or unhide the object if validation fails.
https://stackoverflow.com/a/28340579/616813
Also, do remember, if an error log exists, that is the first point to check if you receive an error. That is the whole point of error log, to give you a starting point to debug.
Or as Andreas said, "Fix the damn errors in the console... :)".
Edit:
Because it was killing me, I tried to reverse engineer your application. All it took was comparing the textbox that was working, and the one that was failing to find the problem. Really, that easy.
aria-required="true"
Your "Adults" and "Children" input fields have this property. You need required="true" instead.
Check your css and update that. And no, I have no idea why "aria=required" and "required" property behave differently. It is something new to learn for sure.
I'm writing a website where the user would hit a button to start.
Depending on which button they push, a new section on the page will appear.
More buttons in this section - hit one of those buttons and one of a few sections will appear.
I have code which is starting to get really long and messy.
So I was looking for a cleaner/better way of managing what needs to be visible at any one time.
I want to avoid installing something like angular/react/knockout - because it seems like a lot of overhead for just 1 page on a large(ish) website. So ideally just naked javascript or jquery.
But i'd also like to avoid pages and pages of javascript full of $('div1').show(); $('div2').hide();
etc
And it is becoming difficult to manage them all.
I've created a fiddle so hopefully you can see what I am trying to accomplish (it's only about 1/5 complete but already looking a mess):
https://jsfiddle.net/6w4mfndf/
But basically it's looking like this at the moment:
<div name="Group1">
<input name="group1" type="radio" id="btn1" />
<span>1</span>
<input name="group1" type="radio" id="btn2" />
<span>2</span>
<div>
<div name="group2">
<div id="div_btn1" style="display:none">
<input name="group2" type="radio" id="btn1_1" />
<span>1_1</span>
<input name="group2" type="radio" id="btn1_2" />
<span>1_1</span>
</div>
</div>
<script>
$(function () {
$('#btn1').change(function() {
if ($('#btn1').is(':checked')) {
$('#div_btn1').show();
$('#div_btn1_1').hide();
}
});
</script>
I am working with MVC if there is any kind of way that can be used to help model the data out. (Unlikely I'd guess, but just throwing it out there).
Any solutions I am missing?
Why not try to have a class that is shared by all the buttons which triggers the js and a data attribute that informs the js as to which div of content to show?
Something along these lines for example:
<div class="content-block" id="content1">
Content 1
</div>
<div class="content-block" id="content2">
Content 2
</div>
<button class="content-button" data-content-block="content1" value="content 1"></button>
<button class="content-button" data-content-block="content2" value="content 2"></button>
<script>
$(function () {
$(".content-block").hide();
$(".content-button").click(function() {
$(".content-block").hide();
var contentBlock = $(this).attr("data-content-block");
$("#" + contentBlock).show();
});
});
</script>
All right, this is a pretty specific question from a beginner, so bear with me.
I'm a newbie just learning the ropes. Here's the background (skip to next para if you don't care): I'm updating my first android app and I'm using MIT App Inventor 2 to do it. It's a free tool online that uses a WYSIWYG screen editor and Blockly to create behaviors, interactions, etc. The app I'm making loads a specific web page with a form and fills out most of the form for you (specifically, it's to help people enter the online ticket lottery for a theater show). The page is not my own so I can't edit the HTML. But I can run javascript on top of it by plugging single lines of javascript code into the Blockly side of App Inventor. Here's a relevant example of how it looks.
I've figured out how to fill in most of the form using getElementByID(). But there's a set of radio buttons that have no id. Here's a lightly modified version of the HTML (which I cannot edit):
<div id="cont_id_tickets">
<div>
<input type="radio" name="tickets" value="1" />
<span style="font-family:Times New Roman; font-size:15px;">1</span>
</div>
<div>
<input type="radio" name="tickets" value="2" />
<span style="font-family:Times New Roman; font-size:15px;">2</span>
</div>
<div id="required_info_tickets" class="requiredInfo floatLeft">
</div>
<input type="hidden" name="reqField" value="tickets" alt="Radio" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value."
patternID="0" customRegex="" />
</div>
I've made some progress by using the following:
document.querySelector('input[name=tickets]').checked = true;
But that of course only selects the first radio button. I'd like to able to get a value (1 or 2) and have it select the right button accordingly. The Blockly backend I'm using allows me to define a variable to plug into the line of javascript, but the line of javascript itself has to be essentially a single line. I was hoping one of the following would work if I wanted the value to be 2 for example:
document.querySelector('input[name=tickets][value=2]').checked = true;
document.querySelector('input[name=tickets]').2.checked = true;
But neither does. Any ideas on the correct syntax?
Thank you!
You need to place the value that you are trying to select using in quotes:
document.querySelector('input[name=tickets][value="2"]').checked = true;
Example
document.querySelector('input[name=tickets][value="2"]').checked = true;
<div id="cont_id_tickets">
<div>
<input type="radio" name="tickets" value="1" />
<span style="font-family:Times New Roman; font-size:15px;">1</span>
</div>
<div>
<input type="radio" name="tickets" value="2" />
<span style="font-family:Times New Roman; font-size:15px;">2</span>
</div>
<div id="required_info_tickets" class="requiredInfo floatLeft">
</div>
<input type="hidden" name="reqField" value="tickets" alt="Radio" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value." patternID="0" customRegex="" />
</div>
So I've been stuck on this problem for a day or so now and I'm still not getting very far. I'm using a django inline form-set, this allows for all previous saved forms to be displayed and then one extra empty form. I'm using javascript (jQuery) to hide all the forms until a user clicks an "edit" or "add new" button (p tag styled to look like an a tag) then the form is slideToggled for the user to see then edit.
The problem I'm running into is when the form isn't valid according to my regex in the forms.py. The form doesn't save, obviously, but the slideToggle closes. If you click the edit button again it opens with error messages over the fields that had incorrect input.
What I'm wanting is that if those error messages are present, I want the form to be open and showing which fields need to be corrected. Here's the code before submitting a form:
<div>
<p class="show_edit_ops button black small">Add New »</p>
<p class="show_edit_ops button black small" style="display:none;">Nevermind «</p>
<div class="formWrapperClass">
<div class="fieldWrapper">
<div class="form_errors"></div>
<p class="field_label"><label for="id_location_set-0-street">Street</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-street" id="id_location_set-0-street" /></p>
<p class="field_help_text">Enter your residence number and street</p>
</div>
<div class="fieldWrapper">
<div class="form_errors"></div>
<p class="field_label"><label for="id_location_set-0-street2">Street2</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-street2" id="id_location_set-0-street2" /></p>
<p class="field_help_text">Enter your apartment number or P.O. box</p>
</div>
<div class="fieldWrapper">
<div class="form_errors"></div>
<p class="field_label"><label for="id_location_set-0-city">City</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-city" id="id_location_set-0-city" /></p>
<p class="field_help_text">Enter your city</p>
</div>
And the form goes on, but you get the idea. And this is one of the fieldWrapper div's after submission with an incorrect input:
<div class="fieldWrapper">
<div class="form_errors"><ul class="errorlist"><li>You must enter a street</li></ul></div>
<p class="field_label"><label for="id_location_set-0-street">Street</label>:</p>
<p class="form_field"><input type="text" name="location_set-0-street" id="id_location_set-0-street" /></p>
<p class="field_help_text">Enter your residence number and street</p>
</div>
I've tried many things to test to see if errorlist exists, that way if it does I can style that form to be open after a bad submit. I've tried find and children pretty extensively, but possibly incorrectly, in ways like this:
if($(".form_errors").find($(".errorlist")) == true){
document.write("error!");
}
But with no luck. If I take out the == true then I get 'error!' on every page of my site. I'm baffled, so any help would be great. All I really need is a correct check to see if errorlist exists, I'm pretty sure I can take it after that.
Thanks!!
Try this:
if($(".form_errors").find($(".errorlist")).length){