In a page in Wordpress (A sign-up form) I have a check box for a subscription to Mailchimp newsletter:
<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>
The checkbox (name="um-mailchimp[8adb6373b1]") is not ticked/checked by default...
I was actually doings a bit of research and I have found out that a simple jQuery will do the magic...
My questions are:
what jQuery should I write?
where should I put the code? (front end/back end, in a plugin etc)
You do not need jQuery for this. You could add the checked attribute to the input.
$(document).ready(function() {
$("#demo").click(function(){ // Remove the click listener to automatiacally do it with when the page is loaded.
$('[name="um-mailchimp[8adb6373b1]"]').prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" name="um-mailchimp[8adb6373b1]" checked value="1">
<span>Daily Newsletter Registration - MailChimp</span>
</label>
<br>
<label>
<input type="checkbox" name="um-mailchimp[8adb6373b1]" value="1">
<span>Daily Newsletter Registration - MailChimp</span>
</label>
<button id="demo" type="button">Check the checkbox with jQuery!</button>
Edit: Added a snippet with a jQuery exemple.
Related
Okay, so I got a custom radio button:
<label class="radiobtn" id="region">EUW
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
And I'd like to store the text next to it (EUW) into a localStorage item called "region", when the radio button is checked.
There are multiple radio buttons of this and i want to do it for all of them.
Each custom radio button has another value (EUW, EUNE, JP, KR, etc...)
Everything else is similar.
So I kinda tried to figure out how I could do that, but I couldn't came across a good solution.
Do you guys have some good solutions? :O
Thank you for any help, I appreciate it.
Cheers!
You create custom radio buttons all with same class radiobtn, then in JQuery on radiobtn class click event check if radio button is checked, get label text and store it in localStorage.
JSFiddle
https://jsfiddle.net/mLst49h8/
HTML
<label class="radiobtn" >EUW
<input type="radio" name="radio" >
<span class="checkmark"></span>
</label>
<label class="radiobtn" >EUNE
<input type="radio" name="radio" >
<span class="checkmark"></span>
</label>
JQuery
$( ".radiobtn" ).click(function() {
if($(this).children("input").is(":checked")) {
// alert( $(this).text());
var region = $(this).text();
localStorage.setItem("region", region);
region = localStorage.getItem("region");
alert(region);
}
});
I have a subscriber form at the bottom of my website:
www.greenchain-engineering.com
The problem is that, although the css and html look alright, and the form looks good if loaded by itself from an html document, when loaded using the mailchimp shortcode, the submit button is not beneath the email input box as desired, instead it is all the way to the right.
Here is the form code, from within the plugin 'forms' tab:
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<div id="mc_embed_signup_scroll">
<p>
<label>Make sure of what you're in for!</label>
<input type="checkbox" name="Newsletter" value="News" checked="checked"> Receive Green News, SA Context!<br>
<input type="checkbox" name="Products" value="Products"> Receive information on our new products<br>
<input type="checkbox" name="Education" value="Edu" > Join our education community.
</p>
</div>
<div style="text-align:center;">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<p>
<input class="clear" style="text-align:center;" type="submit" value="Join the Green Community.">
</p>
</div>
</div>
<!--End mc_embed_signup-->
The problem definitely doesn't jump out at me, this should be working from the code?
Typically, you are not limited to using Mailchimp's preformatted subscribe lists.
All you need are four (4) requirements for the API to add your subscriber to the list and start any automations.
1) The FORM ACTION - Usually found on the <form> head, like so:
<form action="https://cannerycasino.us10.list-manage.com/subscribe/post" method="POST">
2) the USER ID - the default form passes the values through PHP strings &u= and ;id= But the easiest way is to use hidden form fields with that information:
<input type="hidden" name="u" value="YOUR USER ID">
<input type="hidden" name="id" value="YOUR LIST ID">
3) the VALUE SUBMIT and the SUBMIT BUTTON - the hidden value containing your user id and list id. The USER ID is long, and the list ID is about 10 characters.
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_USERID_LISTID" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="ENTER" name="subscribe" id="mc-embedded-subscribe" class="form-button"></div>
4) The Mailchimp SCRIPT Which is typically right below the form, but you can tie it in at the bottom of the page just before the end <body> tag if you like. NOT THE TOP
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email'}(jQuery));var $mcj = jQuery.noConflict(true);</script>
Now that you have those 4 things, you can create any for that you like and use ANY STYLES that you like. The ONLY other requirements are that your <input> field MATCH this layout:
<input type="text" value="" name="MERGE1" class="required" id="mce-MERGE1" placeholder="">
Note that this is just an example, and that for the fields to work you HAVE TO HAVE both the name and the mc-id on each field. If you would like help on creating a form please let me know.
We have built a site with a login page - login page is a simple form in field sets - annoyingly when using an iPad the keyboard is triggered whenever pressing the button - it stays active as the next page is loaded - i can understand why - following is the form code - is there any way to disable this functionality?
<section>
<h3>Login</h3>
<form method="post" action="/Login" novalidate="novalidate" _lpchecked="1"> <fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_UserName">User Name</label>
<input type="text" value="" name="FormModel.UserName" id="FormModel_UserName" data-val-required="Please provide your User Name" data-val="true" aria-required="true" aria-describedby="FormModel_UserName-error" class="input-validation-error" aria-invalid="true">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.UserName" class="field-validation-error"><span id="FormModel_UserName-error" class="">Please provide your User Name</span></span>
<img alt="Icon: Person" src="/css/img/icons/icon-user.svg">
</label>
</fieldset>
<fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_Password">Password</label>
<input type="password" name="FormModel.Password" id="FormModel_Password" data-val-required="Please provide your Password" data-val="true" aria-required="true" class="input-validation-error" aria-describedby="FormModel_Password-error">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.Password" class="field-validation-error"><span id="FormModel_Password-error" class="">Please provide your Password</span></span>
<img alt="Icon: Pencil" src="/css/img/icons/icon-pencil.svg">
</label>
</fieldset>
<div data-valmsg-summary="true" class="validation-summary-errors"><ul> <li>Please provide your User Name</li><li>Please provide your Password</li> </ul></div> <fieldset>
<button class="button" name="submit" type="submit">
<i class="key"></i>
<span>Login</span>
</button>
</fieldset>
<!-- Javascript detection -->
<span class="result-login" id="result"></span>
You could try to disable native, default submit process and do submiting with js,, something like this:
document.getElementsByClassName('button')[0].onclick = function(e){
e.preventDefault();
document.getElementById('frm1').submit();
}
see the code here, I changed some tag names, look the html pane also..: http://codepen.io/mkdizajn/pen/EgmPQR?editors=1010
I can't see this live and test but I hope that helps..
I tried to design a form, which is now to complicated for me to describe so I created a fiddle: http://jsfiddle.net/tLh72acj/
I think this shows my problem: I can't access the radio-input:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="radio" name="bestellart" value="vor" id="vor" checked />
<label for="vor">CAN'T</label>
<input type="radio" name="bestellart" value="eil" id="eil" />
<label for="eil">TOUCH</label>
<input type="radio" name="bestellart" value="ewg" id="ewg" />
<label for="ewg">THIS!</label>
</fieldset>
I want to control the radio buttons when I click on them, but if I click on any other place inside the collapsible I want it to open (but not if I use the radio buttons). How do I have to handle this?
Is that what you want ?
JsFiddle
if ($(this).closest(".ui-collapsible").hasClass('ui-collapsible-collapsed')){
$(this).closest(".ui-collapsible").collapsible({collapsed: false});
}
else{
$(this).closest(".ui-collapsible").collapsible({collapsed: true});
}
Here is an update with comments : JsFiddle
I've seen similar questions here, but none have helped. So here's what I'm trying to do.
I have a DIV pertaining to a textbox for a contact email if a user wants to receive a read receipt. I don't want that box to show unless they check the box.
Checkbox:
<p id="notifycheck" class="notify">
<input id="id_notify" type="checkbox" class="checkbox" name="notify"/>
<label for="id_notify">Enable Read Receipts</label>
</p>
<div id="notify" class="notify">
<div id="email_errors">
</div>
Textbox:
<div class="left">
<p>
<label for="email_sender">Contact email (suggest Anonmail address)</label>: <br>
<input id="email_sender" type="text" name="sender_email" size="35" rows="4" maxlength="100"/>
</p>
</div>
You could use a simple jquery function that detects changes of the input state like this:
$('#id_notify').on('change',function(){
$('.left').toggleClass('hidden');
});
});
and add in your stylesheet a class of hidden with display:none
Hope this will do