How can I make the checkbox checkbox enabled by default? here is the code
<label class="checkbox woocommerce-form__label woocommerce-form__label-for-checkbox checkbox" data-automation-id="woo-commerce-subscription-opt-in">
<input type="checkbox" class="input-checkbox woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="mailpoet_woocommerce_checkout_optin" id="mailpoet_woocommerce_checkout_optin" value="1"> I have read and agree to the site terms and conditions *<span class="optional">(necessarily)</span></label>
Solution found thanks to #Eduhud Here is the code:
<script type="text/javascript">
jQuery( function($) {
$( document ).ready(function() {
setTimeout(function() {
$('#mailpoet_woocommerce_checkout_optin').prop('checked', true);
}, 500);
var checkout_is_updated = false;
$('form.checkout').on('change', 'input[name="payment_method"]', function(){
$(document.body).trigger('update_checkout');
$( document.body ).on( 'updated_checkout', function(){
$('#mailpoet_woocommerce_checkout_optin').prop('checked', true);
});
});
});
});
</script>
Just add checked
<input type="checkbox" class="input-checkbox woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="mailpoet_woocommerce_checkout_optin" id="mailpoet_woocommerce_checkout_optin" value="1" checked>
<script>
(function($) {
jQuery('#mailpoet_woocommerce_checkout_optin').prop('checked', true);
})(jQuery);
</script>
If you have access to the html structure, the answer of #Ali jezzni should work, just add checked to the <input> field.
In your case:
<input type="checkbox" class="input-checkbox woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="mailpoet_woocommerce_checkout_optin" id="mailpoet_woocommerce_checkout_optin" value="1" checked>
If you do not have access to the html structure, a good option is using jQuery to change the element once the page is loaded, as #Rakesh Sharma explains by targeting the element and using the .prop('checked', true) function of jQuery.
In your case:
<script type="text/javascript">
jQuery( function($) {
$( document ).ready(function() {
setTimeout(function() {
$('#mailpoet_woocommerce_checkout_optin').prop('checked', true);
}, 500);
var checkout_is_updated = false;
$('form.checkout').on('change', 'input[name="payment_method"]', function(){
$(document.body).trigger('update_checkout');
$( document.body ).on( 'updated_checkout', function(){
$('#mailpoet_woocommerce_checkout_optin').prop('checked', true);
});
});
});
});
</script>
Related
I'm trying to close a modal div with AJAX search results, but nothing works.
I have tested several solutions on SO but nothing works?!
This is the code I have right now:
<form action="/search" method="get">
<input type="hidden" name="qt" value="main">
<div class="searchBox" id="search">
<input type="text" name="q" id="find" placeholder="Search here..." class="mainSearchField" />
<div class="searchBoxResults" id="search_items"></div>
</div>
</form>
<script>
$(document).ready(function() {
$( "#find" ).keyup(function(){
fetch();
});
});
function fetch() {
var val = document.getElementById("find").value;
$.ajax({
type: 'post',
url: '/include/functions/searchFetch.php',
data: {
q:val
},
success: function (response){
document.getElementById("search_items").innerHTML = response;
}
});
}
</script>
UPDATE
This is what I have tried to add, to the above:
window.onclick = function(event) {
if (event.target.id != "search_items") {
$("search_items").hide();
}
}
I'm having issues finding a way to update the UI AFTER adding to a collection. So in the example below after you click the button and add to the collection an additional input is added to the DOM. All good, but i'd like to find a way to target the new input element and preferably give it focus in addition to CSS. Unfortunately I can't find any info that helps solve this AFTER the DOM's been updated. Any ideas? Thanks
<body>
{{> myTemplate}}
</body>
<template name="myTemplate">
{{#each myCollection}}
<input type="text" value="{{name}}"><br>
{{/each}}
<br>
<button>Click</button><input type="text" value="test" name="testBox">
</template>
test = new Meteor.Collection("test");
if (Meteor.isClient) {
Template.myTemplate.rendered = function()
{
console.log("rendered");
this.$('input').focus()
}
Template.myTemplate.helpers({
'myCollection' : function(){
var testCollection = test.find({});
console.log("helpers");
return testCollection;
}
});
Template.myTemplate.events({
'click button': function(event){
event.preventDefault();
var val = $('[name="testBox"]').val();
console.log("events");
return test.insert({name: val});
}
});
}
Turn what you're adding into a template and call that template's rendered to set the needed css or do whatever transforms are needed.
HTML:
<body>
{{> myTemplate}}
</body>
<template name="item">
<input type="text" value="{{name}}"><br>
</template>
<template name="myTemplate">
{{#each myCollection}}
{{> item this}}
{{/each}}
<br>
<button>Click</button><input type="text" value="test" name="testBox">
</template>
JS:
test = new Meteor.Collection("test");
if (Meteor.isClient) {
Template.myTemplate.onRendered(function() {
console.log("rendered");
this.$('input').focus()
});
Template.myTemplate.helpers({
'myCollection' : function(){
var testCollection = test.find({});
console.log("helpers");
return testCollection;
}
});
Template.myTemplate.events({
'click button': function(event){
event.preventDefault();
var val = $('[name="testBox"]').val();
console.log("events");
test.insert({name: val});
}
});
Template.item.onRendered(function() {
this.$('input').focus();
}
}
On a side note, you should use onRendered instead of rendered as the latter has been deprecated for the former.
Do it inside of your myCollection helper function. Use jquery to target the last input in your template and focus it, add css. Meteor's template helpers are reactive computations based on the DOMs usage of their reactive variables, so it will run each time the DOM updates based on your collection.
<div class="close" on-click='close'></div>
Ractive.components['block:close'] = Ractive.extend({
isolated: true,
onrender: function() {
this.on({
close : function(event) {
console.log('close');
}
})
}
});
When trying to click on the 'x' button, it doesn't show "close" in console.log.
Not sure why it is not doing anything.
Also looked up ractivejs on google for the animation (fade out) when click close. Couldn't find a way without using JQuery
Not quite sure what's going on in your example - this works fine!
Ractive.components['block:close'] = Ractive.extend({
isolated: true,
template: '<div class="close" on-click="close">click me</div>',
onrender: function() {
this.on({
close: function(event) {
alert('it works');
}
});
}
});
var ractive = new Ractive({
el: 'main',
template: '<block:close/>'
});
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
<main></main>
To add fades and other transitions, you need to use transition plugins. For example:
new Ractive({
el: 'main',
template: '#template'
});
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
<script src='https://rawgit.com/ractivejs/ractive-transitions-fade/master/dist/ractive-transitions-fade.js'></script>
<main></main>
<script id='template' type='text/html'>
<label>
<input type='checkbox' checked='{{visible}}'>
visible (click me)
</label>
{{#if visible}}
<div intro='fade'>this will fade in</div>
{{/if}}
</script>
See the ractive-transitions-fade GitHub repo for more info.
I am a little new to JQuery. let's suppose that we have this jquery function :
var f = $("#myForm");
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
$("#postResult").html(data);
});
and this form :
<form id="myForm" action="/Monitor/Test/FormPost" method="post">
<div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
<div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
<div>Age: <input name="Age" type="text" value="43" /></div>
<input type="submit" value="Save Contact" />
<div id="postResult">?</div>
</form>
How can I bind the save button with the jquery function ? Thank you
One simple way would be to bind to the click event of the button. Something like this:
$('#myForm input[type="submit"]').click(function () {
var f = $("#myForm");
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
$("#postResult").html(data);
});
});
This specifically looks for the submit input that's a child of the form of id "myForm" (in case there are other buttons, etc.) and responds to its click event with the function in question.
Just to be safe, since you're essentially short-circuiting the form and posting via AJAX, you should also probably change the submit to a normal button:
<input type="button" value="Save Contact" />
Or perhaps:
<button value="Save Contact" />
Which would change your jQuery selector to:
$('#myForm input[type="button"]')
Or:
$('#myForm button')
$(document).on("click","input[type=submit]",function(e)
{
e.preventDefault();
var form = $(this).closest("form");
$.post(form.attr("action",form.serialize(),function(d){
//result
});
});
more general way.
//this handler can work on any form that need to post all values
$("form input[type='submit']", f).click(function(e){
e.preventDefault();
var $this = $(this);
var f = $this.parents('form');
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
$("#postResult").html(data);
});
return false;
})
In this code you are subscribing click event.
[e.preventDefault();][1] will stop your form from premature submittion and you can do the work you want.
I'm trying to enable submit button when some form fields are filled. I've found a piece of javascript code that works, but I've a problem with textarea fiel which is tranformed by tinymce... How to catch it?
My html:
<form id="form_id1">
<fieldset>
<legend>Personal</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" /><br />
Address : <textarea size="30"></textarea><br />
</fieldset>
<input type="submit" value="Submit" />
</form>
My javascript:
$(document).ready(function()
{
$('#form_id1 input:submit').attr("disabled", true);
var textCounter = false;
$('#form_id1 input:text, #form_id1 textarea').keyup(check_submit);
function check_submit() {
$('#form_id1 input:text, #form_id1 textarea').each(function()
{
if ($(this).val().length == 0) {
textCounter = true;
return false;
}
else {
textCounter = false;
}
});
$('#form_id1 input:submit').attr("disabled", textCounter);
}
});
My tinymce init:
tinymce.init({
selector: "textarea",
language: 'fr_FR',
image_advtab: true,
menubar:false,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons",
});
Thanks
In tinymce init add:
setup: function(ed) {
ed.on('keyup', function(e) {
console.log('Editor contents was modified. Contents: ' + ed.getContent());
check_submit();
});
}
Keep in mind you might need to find your editor instance rather than the textarea to get the actual value. If you made the textarea have id="textarea-tiny-mce"
tinymce.get('textarea-tiny-mce').getContent();
window.onload = function () {
tinymce.get('content').on('keyup',function(e){
console.log(this.getContent().replace(/(<[a-zA-Z\/][^<>]*>|\[([^\]]+)\])|(\s+)/ig,''));
});
}
tinymce.init({
setup: function (editor) {
editor.on('keyup', function (e) {
console.log(e);
//custom logic
});
}
});
Please make below changes in tinymce.init
tinymce.init({
selector: "textarea",
setup: function(editor) {
editor.on('keyup', function(e) {
console.log('edited. Contents: ' + editor.getContent());
check_submit();
});
}
language: 'fr_FR',
image_advtab: true,
menubar:false,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons",
});
See the below reference for more details.
https://www.tiny.cloud/docs/advanced/events/