WordPress auto-check checkbox - javascript

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

Related

Changing the value of a hidden field to the value of a checkbox on submit with javascript inside Contact Form 7 Wordpress plugin

I have been trying to get this working for more than a week now, searching endlessly for the solution and I can't figure out what I'm doing wrong. I am not a coder, just trying to duct tape some functions together to get this working... Please help!
I have the following checkbox inputs on my Contact Form 7 form inside a Wordpress page. I have Mailchimp for Wordpress updating a group which reflects the visitors interests. I'm trying to get the value of the group assigned to a hidden input field so that the built in mail feature and other Zapier integrations can use the interest values. Most of these apps seem to lack support for the groups functionality inside Mailchimp.
The form html is as follows:
<p>
<label>Which Are You Most Interested In?</label></br>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="ac2ed8233d"
required=""><span>Interest 1</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="s3g2c99k0x"
required=""> <span>Interest 2</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="k9n6xp3s26"
required=""> <span>Interest 3</span>
</label>
</p>
<input type="hidden" id="int-in" name="int-in"</input>
--
I've tried several variations of this including some inline stuff, putting the code in the top or bottom of the page, putting it into the Additional section of Contact Form 7, putting it into a scripts plugin inside wordpress, trying to see if it's an array thing and trying code for pushing from array (more over my head) and so many others. Here is what I'm basically trying to do, albeit wrongly via this code because obviously it is not working...
JS:
$('form').submit(function() {
$('input[name="#mc4wp-INTERESTS[gs8o25e9bc] .
[]"]').change(function(){
$('#int-in').val($('input[name="#mc4wp-INTERESTS[gs8o25e9bc] .
[]"]').val());
});
--
Online there is not much support for Mailchimp groups, and I suspect groups functions of most contact apps, not even with paid plugin feature. Mailchimp for Wordpress has the most support I could find and you still have to do some tinkering to get it working. I'm soooo ready to know what the heck works instead of all the stuff I've been trying! Thank you in advance. I really appreciate it!
Wordpress disables the $ shortcut, so you need to either replace $ with jQuery or wrap your code:
(function($){
// your code here
})(jQuery);
Plus, the name of those checkboxes doesn't contain a hashtag. I also have no idea what you're doing with those dots and linebreaks there.
In addition, you're assigning a onchange handler only when the form is submitted, but you'll want that to work from the start instead.
Here's a solution that sets the onchange handler to grab the value from all checked checkboxes and puts it into the hidden input.
var selector = 'form input[name="mc4wp-INTERESTS[gs8o25e9bc][]"]';
(function($) {
$(selector).change(function() {
var interests = Array.from(document.querySelectorAll(selector))
.filter(e => e.checked).map(e => e.value).join(",");
$('#int-in').val(interests);
console.log("set to", interests);
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<label>Which Are You Most Interested In?</label><br/>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="ac2ed8233d"><span>Interest 1</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="s3g2c99k0x"> <span>Interest 2</span>
</label>
<label>
<input name="mc4wp-INTERESTS[gs8o25e9bc][]" type="checkbox"
value="k9n6xp3s26"> <span>Interest 3</span>
</label>
</p>
<input type="hidden" id="int-in" name="int-in">
<input type="submit">
</form>

HTML required fields are not showing a message when it's not filled out

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.

How can I check a radio button with no id using a single line of javascript (no jQuery)?

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>

Uncheck other checkboxs when one is checked

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.

On page script not executing with Salesforce Web-To-Lead code.

This form works when the form action is "submit". However, upon customizing it to a Salesforce Web-to-Lead, the script that says "The form submission was successful" doesn't appear.
Additionally, the code in here to redirect the site after submission doesn't work. I'm no a PHP/Java expert and I don't really know what's happening enough to understand why it isn't working.
See below. Redacted private info from Salesforce.
<div class="padpage padtop">
<h1>Let Us Call You</h1>
</div>
<!--end padpage-->
<div class="cutContainer moreUpperMargin">
<span class="cutTop"></span>
<span class="cutBottom"></span>
<div class="ui-widget successMessage">
<div class="ui-state-highlight ui-corner-all">
<p><span class="ui-icon ui-icon-info" style=""></span>
<strong>Success!</strong> Your mail has been sent.</p>
</div>
</div>
<h4> Write to us </h4>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" />
<input type=hidden name="oid" value="000000000000000">
<input type=hidden name="retURL" value="http://www.xxxxxxxx.com">
<input type=hidden name="company" value="Mobile Lead">
<!-- A bunch of Fields.... -->
<input type="submit" class="button buttonStrong right" value="Send" name="buttonSubmit" value="submit">
<div class="clearfix"></div>
</form>
</div>
<!--end cut container-->
Can you be more clear about the issue? If you want to use Salesforce standard functionality and presumably not program any custom PHP / Javascript, why don't you create another web page that includes the message, "The form submission was successful", and direct the user to that page through the retURL field upon submission?
Or, if you are using a popular CMS, try one of the plugins. Good ones exist for Wordpress and Drupal.
http://wordpress.org/plugins/salesforce-wordpress-to-lead/
https://drupal.org/project/sfweb2lead_webform
stony

Categories