Dynamically add validation to form via javascript - javascript

I´m stuck. I can´t edit the html for the form, so i need to add parsley.js validation attributes after page load, but parsley doesn´t seem to run if i use it like this:
var myForm = "#theForm";
jQuery( document ).ready(function() {
if (jQuery(myForm).length) {
jQuery( '#user_email' ).attr( 'data-parsley-equalto', '#user_email_validate');
jQuery( myForm ).parsley();
}
});
Exchanging the validation line with the following works fine, so it seems to be a problem with the 'data-parsley-XXX' part:
jQuery( '#last_name' ).attr( 'minlength', 2);
What am i missing? Thanks a lot.

#user33958 is this what you're after?
<form id="theForm">
<input id="user_email" placeholder="Email" />
<input type="submit" />
</form>
<script>
jQuery( document ).ready(function() {
var myForm = jQuery("#theForm");
if (jQuery(myForm).length) {
myForm.parsley();
jQuery("#user_email").parsley().addConstraint('minlength',2);
}
});
</script>
See working codepen:
http://codepen.io/ds0001/pen/NPmWoZ?editors=101

Related

Trigger on click of submit button

I'm trying to trigger a short script click of the following submit button. It should add the "loading" css when the purchase button is clicked. The code will be loaded using Googletagmanager only on this page. The code I am currently attempting is:
<script>
jQuery( document ).ready( function( $ ) {
$( '.form-row.place-order' ).click( function() {
$( this ).addClass( 'loading' );
});
});</script>
Here is the html
<div class="form-row place-order">
<input type="submit" class="button alt"
name="woocommerce_checkout_place_order" id="place_order" value="Finalizar
compra" data-value="Finalizar compra">
<input type="hidden" id="_wpnonce" name="_wpnonce" value="6df1de1da5"><input
type="hidden" name="_wp_http_referer" value="/?wc-ajax=update_order_review">
</div>
I've also tried it with #place_order instead of .form-row.place-order however in both cases without sucess. Does anybody have an idea what I can?
Thanks for your help.
Best regards,
Your code works fine check it out. I think you should check your css class is doing what you mean to do.
.loading input{
color : white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery( document ).ready( function( $ ) {
$( '.form-row.place-order' ).click( function() {
$( this ).addClass( 'loading' );
});
});</script>
<div class="form-row place-order">
<input type="submit" class="button alt"
name="woocommerce_checkout_place_order" id="place_order" value="Finalizar
compra" data-value="Finalizar compra">
<input type="hidden" id="_wpnonce" name="_wpnonce" value="6df1de1da5"><input
type="hidden" name="_wp_http_referer" value="/?wc-ajax=update_order_review">
</div>
I think you should wait for DOM, and just use normal javascript like below
Or maybe your submit is too fast and does not show the animation?
<script>
jQuery( document ).ready( function( $ ) {
$('#place_order').click(function(e) {
$(this).addClass('loading');
});
})();
</script>

Reading text from button and put into input and run

I am struggling with buttons and JavaScript.
I have a button which name is for example button1 and I would like to put the name of it button1 to input and click enter. I mean that I would like to send query for searching/sorting.
Here is with what I am done so far. It is working but only put text into input box without any action.
http://jsfiddle.net/9t7L4dmw/
$( "button" ).click(function() {
var text = $( this ).text();
$( "input" ).val( text );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
<input type="text" placeholder="Search">
So when you click the button you want:
the input to be filled with the button's name
submit a form?
In that case wrap (at least) the input inside a form tag. In your JS submit the form after filling the input.
http://jsfiddle.net/9t7L4dmw/3/
$("form").on('click', 'button', function () {
$("#search").val($(this).text());
}).on('submit', function (event) {
event.preventDefault;
var data = $(this).serialize();
alert(data);
// $.post(...);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method=post>
<button type=submit>button1</button>
<button type=submit>button2</button>
<button type=submit>button3</button>
<button type=submit>button4</button>
<input type=search id=search name=search placeholder="Search">
</form>
About version without ajax
It doesn't work here in the snippet:
Blocked form submission to 'http://stacksnippets.net/js' because the form's frame is sandboxed and the 'allow-forms' permission is not set.
but it's ok in jsfiddle: http://jsfiddle.net/9t7L4dmw/4/

How to disable a button when changing the checkboxes in a table in Node JS?

I have a table with some images and check boxes. I tried to enable a submit button on changing the any checkbox in the table. My table is like following,
<form action="/slideShowPage" method="GET">
<table id="imgTable" class="table">
{{#images}}
<tr>
<td>Remove<label value={{imgURL}}>{{imgURL}}</label></td>
<td><img src={{imgURL}} style="width:100px;height:100px"></td>
<td><input id={{imgURL}} type="checkbox" name="image" value={{imgURL}}/><br></td>
</tr>
{{/images}}
</table>
<br>
{{#msg}}
<div class="alert alert-info">{{msg}}</div>
{{/msg}}
Add more
<input type="submit" value="Create Slide Show" class="btn btn-success pull-left" disabled/>
</form>
I tried to enable the button using the javascript below,
<script type="text/javascript">
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function () {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
</script>
I got this javascript from JSFiddle. But it' not working. Also I'm using NodeJS and my jquery version is jquery-2.0.3. Can anyone help me to fix this?
Thanks in Advance!
Set the element's disabled property to false
submitButt.disabled = false;
If you're using jQuery, the equivalent would be:
$("input[type='submit']").prop('disabled', false);
or
give id or class to input element like "inputDisabled".
$('.inputDisabled').removeAttr("disabled");
I found the solution for this.
<script type="text/javascript">
$( document ).ready(function() {
console.log("Cheeeee 1");
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.change(function() {
console.log("Cheeeee");
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
});
</script>
Because the page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
Try this.
Bind to the change event instead of click event.
var checkboxes = $("input[type='checkbox']"),submitButt = $("input[type='submit']");
checkboxes.change(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});

Adding multiple users jQuery

I wanne add multiple users in jQuery. I have the following code but it doesnt work. Does someone knows why?
Thanks!
<script type="text/javascript">
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.html('Gebruiker: <input type="text" name="user[]"><br />');
$(newuser).appendTo('#users');
});
});
</script>
<section>
<span id="add">Nieuwe gebruiker</span><br /><br /><br />
<form action="" method="" id="users">
<input type="submit" name="send" value="verzenden">
</form>
Use simply string in your variable, no jQuery .html() function required. Then change your .appendTo() function to .append() and define the element in jQuery selector.
$( document ).ready(function() {
$('#add').click(function(){
var newuser = 'Gebruiker: <input type="text" name="user[]"><br />';
$('#users').append(newuser);
});
});
In case you are wondering why your current code is not working:
string starting with anything other than "<" is not considered HTML string in jQuery 1.9
http://stage.jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring
Therefore this code will work fine (as it starts with <):
$( document ).ready(function() {
$('#add').click(function(){
$('<input type="text" name="user[]">').appendTo('#users');
});
});
And for your current code to work use $.parseHTML:
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.parseHTML('Gebruiker: <input type="text" name="user[]"><br />');
$(newuser).appendTo('#users');
});
});
$.parseHTML is used to parse the arbitrary HTML so that it is not taken as a selector by jQuery.
Edit: adding delete feature:
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.parseHTML('<div><label>Gebruiker:</label> <input type="text" name="user[]"><span class="delete">Verwijderen</span></div>');
$(newuser).appendTo('#users');
});
$(document).on('click','.delete', function(){
$(this).parent('div').remove();
console.log('reached');
});
});
jsFiddle Example: http://jsfiddle.net/RtTpN/
yep, there is nothing called $.html() in jQuery. html is a method of set of nodes instead.
You can do something like:
$(document).ready(function () {
$('#add').click(function () {
$('#users').append('Gebruiker: <input type="text" name="user[]"><br />');
});
});
Working Demo

login form through lightBox Effect

I have used a simplest CSS to show a litebox view. The code I used is, I have removed the unnecessary CSS properties from here:
<style>
.black_overlay{
display: block;
}
.white_content {
display: block;
}
</style>
Html for the form
<div id="light" class="white_content">
<input id="name" name="name" type="text" />
<input id="password" name="password" type="password" />
<input type="submit" name="submit" value="Sign In" onclick="check(this.form)"/>
</div>
<div id="fade" class="black_overlay"></div>
And a JavaScript function, to check if the fields are correct
function check(form)/*function to check userid & password*/
{
var name= $( "#name" );
var pass=$("#password");
if(name== "admin" && pass == "admin")
{
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
else
{
alert("Error Password or Username");/*displays error message*/
}
}
The functionality I want is, when the user inputs correct name and pass, that is "admin" the lite box effect fade away... But it is not, the lite box is still there. How can i close it. I also want that this litebox effect should be shown as the page loads.
Is the problem that the submit event is not captured and prevented? In The markup there is no form. If you add it like
<form id="submit-me"> your form inputs </div>
you can observe it via JS
$("#submit-me").submit(function(event) {
// your js code
event.preventDefault();
});
For your actual example you could try to add a "return false;" in the onclick handler? But I do not know whether this works...
Best regards
Replace
var name= $( "#name" );
var pass=$("#password");
with
var name= $( "#name" ).val();
var pass=$("#password").val();

Categories

Resources