I have multiple forms inside table in each tr like this but when clicking on save validation is not working. I want to validate parent form of .save button. Does anyone know how can I do this?
/// jquery
$tableID.on('click', '.save', function() {
var tr = $(this).parents('tr');
var $form = tr.find("form");
$form.validate({
rules: {
job_step: "required",
},
submitHandler: function() {
alert("Submitted!")
}
});
console.log($form.valid());
});
Related
I implemented my custom gravity form and I need to set one field on required status after clicking on one checkbox.
jQuery(document).ready(function ($) {
$('#choice_5_8_1').change(function () {
if ($(this).is(':checked')) {
jQuery("#field_5_9").required(false).change();
}
});
});
Is possible before validation of all data and submitting form, please? I tried to use something like that, but it does not work...
Here's how you'd do it:
$(document).ready(function() {
$('#choice_5_8_1').on("change", (function () {
if ($(this).prop('checked')) {
$("$field_5_9").attr('required', ($(this).attr('required') == "required" ? "" : "required"));
}
});
});
The first input I can fill in the URL when clicking on an image.
When I add a new input and I click on the image, the URL appears on the button ADD not within the input with focus
https://jsfiddle.net/gislef/wyp4hzrd/
var input = '<label>Nome: <input type="text" name="images[]" /> X</label></br>';
$("input[name='add']").click(function( e ){
$('#inputs_add').append( input );
});
$('#inputs_add').delegate('a','click',function( e ){
e.preventDefault();
$( this ).parent('label').remove();
});
var focused = null;
$("input").on("focus", function() {
focused = $(this);
})
$("img").click(function() {
if (focused.length)
focused.val($(this).attr("src"));
})
With fixed inputs I can work properly:
Fill inputs with urls images
please try with delegate, such as below:
var input = '<label>Nome: <input type="text" name="images[]" /> X</label></br>';
$("input[name='add']").click(function( e ){
$('#inputs_add').append( input );
});
$('#inputs_add').delegate('a','click',function( e ){
e.preventDefault();
$( this ).parent('label').remove();
});
var focused = null;
$(document).delegate("input", "focus", function() {
focused = this;
console.log(focused);
});
$("img").click(function() {
if ($(focused).length)
$(focused).val($(this).attr("src"));
});
It was not adding the link properly since you are creating dynamic controls
$("input").on("focus", function() {
focused = $(this);
})
The above code was running and binding correctly to the first input inside your fieldset
You need to replace this code with a delegate on the parent fieldset that will contain the child input in order for dynamic controls to be registered.
$("fieldset").delegate("input", "focusin", function() {
focused = $(this);
})
Here is a working fiddle with what I suppose is the intended behavior
https://jsfiddle.net/wyp4hzrd/1/
I use this code to keep track whether there are any changes on a form:
$(document).on('input', '.track', function() {
var form = $(this);
});
As this won't fire on checkboxes, radio buttons and file input I also use this snippet to handle those elements in a tracked form:
$(document).on('change', '.track [type="checkbox"], .track [type="radio"], .track [type="file"]', function() {
var form = $(this).closest('form');
});
My question is now: How can I simplify this selector?
.track [type="checkbox"], .track [type="radio"], .track [type="file"]
The forms come and go dynamically so I have to use the .on()-method and can't preselect all necessary elements, like $('.track').find('[type="checkbox"], …');
Change your approach to not depend on the selector and handle within the callback itself using event.target
$(document).on('change', '.track', function(event) {
if(['file', 'checkbox', 'radio'].indexOf($(event.target).attr('type')) > -1){
var form = $(this).closest('form');
}
});
One simplification is to use :checkbox, :radio, and :file:
'.track :checkbox, .track :radio, .track :file'
And if you don't want to repeat yourself, you could do a little trick using :not:
'.track :not(:not(:checkbox, :radio, :file))'
But then you start getting into "ugly" territory.
try this
var typeArray = ['file', 'checkbox', 'radio'];
$(document).on('change', '.track', function(e) {
if($.inArray(this.type, typeArray) === -1) {
var form = $(this).closest('form');
}
});
I have the following code:
$(document).ready(function () {
$('body').on("submit", "form", function () {
$(this).find('.btn-primary').prop("disabled", "disabled");
$('#progress').show();
});
$('body').on("change", "form", function () {
$('.btn.btn-primary').prop("disabled", false);
$('#progress').hide();
});
});
But how I can force the script to fire only if a button that have .btn.btn-primary caused the form to submit, while if I submit the form using for example button of class .btn.btn-default to not fire the above script?
EDIT
I tried this but now the script will never fire:
$(document).ready(function () {
$(document).on("submit", "form", function () {
//^^ use document instead of body
//check if button has btn.btn-default class and if exist return
if($('button').hasClass('btn.btn-default')){
return;
}
$(this).find('.btn-primary').prop("disabled", "disabled");
$('#progress').show();
});
$(document).on("submit", "form", function () {
//$('form').change(function () {
$('.btn.btn-primary').prop("disabled", false);
$('#progress').hide();
});
});
You can return the form if button has class using hasClass
$(document).on("submit", "form", function () {
//^^ use document instead of body
//check if button has btn.btn-default class and if exist return
if($('button').hasClass('btn.btn-default'){
return;
}
$(this).find('.btn-primary').prop("disabled", "disabled");
$('#progress').show();
});
You are testing for multiple combined classes, so you must separate the classes in hasClass with a space (not the dot):
// if the button has both classes
if($('button').hasClass('btn btn-default')){
return;
}
e.g. text example: http://jsfiddle.net/80001ra0/
I am making a todo list using jquery. I have problem when submit the form the appended li appears and disappears immediately. Can anyone help me Please?
Here's my Jquery code so far:
$(function(){
$('input:checkbox').click(function(){
if ($(this).is(':checked')) {
$(this).parent().addClass('completed');
}
else {
$(this).parent().removeClass('completed');
}
});
$('#clearComp').click(function(){
$('.completed').fadeOut();
});
$('#todo_from').submit( function(e) {
e.preventDefault();
return false;
});
});
function addTodo(){
var itemToAdd = $('#txtBox').val();
if ( itemToAdd ) {
$('#todoList').append('<li class="todoBlk"><input type="checkbox" class"checkbox">'+itemToAdd+'</li>');
}
$('#txtBox').val('').focus();
}
JS Bin
That is because upon pressing the Enter key, the form is submitting itself and forcing the page to refresh. So you should use .preventDefault() from preventing this from happening:
$('form').on('submit', function(e) {
var itemToAdd = $('#txtBox').val();
if ( itemToAdd ) {
$('#todoList').append('<li class="todoBlk"><input type="checkbox" class"checkbox">'+itemToAdd+'</li>');
}
$('#txtBox').val('').focus();
e.preventDefault();
});
This code also allows you to remove the inline JS for the onsubmit attribute.
Update: I also noticed a problem with your example is that your button fails to clear checked items that are dynamically added. This is because when jQuery is first executed on the page, the click listener is only bound to pre-existing elements. Do consider using .on() to bind the click event to dynamically added list items. Here's the fixed version: http://jsbin.com/hiyuqikura/1/edit?html,js,output
$(function(){
// On submit, prevent default form action and add item if input is not empty
$('form').on('submit', function(e) {
var itemToAdd = $('#txtBox').val();
if ( itemToAdd ) {
$('#todoList').append('<li class="todoBlk"><input type="checkbox" class="checkbox">'+itemToAdd+'</li>');
}
$('#txtBox').val('').focus();
e.preventDefault();
});
// Listen to click event on dynamically added elements
$(document).on('click', 'input.checkbox', function(){
if ($(this).is(':checked')) {
$(this).parent().addClass('completed');
}
else {
$(this).parent().removeClass('completed');
}
});
$('#clearComp').click(function(){
$('.completed').fadeOut();
});
});
comment out the $('#todo_from').submit() function and change the form tag to this
<form id="todo_form" onsubmit="addTodo(); return false;">
You've got the wrong id here $('#todo_from').submit. Should be #todo_form