I am working on a project where a user can add items i have provided them a "add another" button so that they can add another item so now they can add more then one items on the same time.
To validate this form and to insert values in db I have used the following procedure
Now I am accessing the form elements through its name
but my client wants to change the background color of each element the is left blank by the user. I have tried Jquery "empty", "nth child" selectors but i am totally failed to do this
so please help me to solve this problem
Are you only looking to change the background color of empty text boxes? If so, you could do:
$("#my_form input:text").each(function() {
if(!$(this).val()) {
$(this).css("background-color", "red");
}
});
You iterate over all the elements you want validated in #my_form and check to see if they have any values. If not, apply your CSS changes.
Use selectors $('#form input:text[value=""]').css('background-color','red');
Related
I have a form which contains two file input and two check box and one submit button. With my current code when the user click submit button the jquery validation will work perfectly but the problem was the custom error class was not applying and not removing correctly for example if the user click the check box that particular errorClassshould be removed this was not happening. When i search through SO I got one use full information it was mentioned instead of using border red for the check box or if the upload any file that particular field errRed class should remove and I try using outline-color but this was also not working. It might be simple somewhere I am missing some bit of code
I tried giving $('.chk_requ').removeClass('errRed_chkb'); still no use
Here is the fiddle link
kindly please help me.
Thanks in Advnace
Instead of remove class you can add empty div with id="diverr" there and give it desplay:none;
$("#diverr").text("Please select Gender");
$("#diverr").css("display","list-item");
if condition is false then
$("#diverr").css("display","none");
I am trying to modify my HTML for according to class names in following jQuery Snippet. The snippet add class to texarea which turns border red
JQuery Snippet:
$(".scope-question .commentbox").removeClass("redColor")
$(".scope-question input[data-require-comment]:checked").each(function() {
$(this).closest(".scope-question").find(".commentbox").addClass("redColor");
});
Fiddle:
https://jsfiddle.net/t23un23y/
There are four questions, with 3 radio box as answer(Yes/No/Not Applicable) and a textarea for remarks. On Click of particular radio, Say NO, the textarea border turns red.
I am trying to modify HTML, using class names given in above snippet. Unable to get desire output. Could anyone please help in same.
Update:
1) if not necessary; please try not to modify JQuery code; but HTML Code as on particular click i need some changes in whole question row like grey of question, disable other radio etc.
2) I have just created fiddle for onClick of radio, i have use case to validate red color textarea on load too. So please also consider the case
Updated Fiddle: Here
Basically, your code assumes that .scope-question is a parent of the inputs, when in fact it is a sibling of their parents.
$('input[type="radio"]').click(function () {
var textarea = $(this).closest("div").next(".scope-question").find(".commentbox");
if($(this).val() === "No") {
textarea.addClass("redColor");
}
else {
textarea.removeClass("redColor");
}
});
Update
Detailed Fiddle
Here's a summary of the changes I made:
Updated the HTML to use .scope-question as a wrapper
Added data-require-comment attribute to the "NO" radio buttons.
I'm not sure the exact use case you want from this, but the code you provided suggests that this attribute indicates that comments are required (duh). Because you indicated that "NO" should turn the textarea red, I attached it to know. This of course suggests that if a user clicks yes, it's ok not to add a comment. You can modify this however.
Added a call to the update function for onload that checks all of the comment-required inputs that are checked to see if they have a comment in the comment box.
Here is your updated JSFiddle
Your only had to remove javascript each function and change few selectors
I am writing a web application where the user clicks on a div, that is holding a input text box with predefined text in it. When the user clicks on the div the code is then printed in a separate text box. I am trying to write a function that grabs the value of the the clicked on div's text input. I have it working by clicking on the input box itself by using $(this).val(); but I want to click on the div and then it essentially gets the value of (this)('input[type=text].provided_code').val();
is there a way to say the text input inside this div? There are like 20 div's on the page with 20 inputs in each div, and each have the same class name etc.
Yes you can specify the selector context:
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function
Documentation:
http://api.jquery.com/jQuery/#jQuery1
So you code could look like this:
$('input[type=text].provided_code', this).val()
Performance:
http://jsperf.com/jquery-find-vs-context-sel/38
Yes, you can do:
$(this).find("input[type='text']").val();
Assuming that there is one input of type text inside that div.
Instead of (this)('input[type=text].provided_code').val();
you should use a correct jQuery with the find function.
$(this).find('input[type="text"].provided_code'].val();
You can use find - Although, you cannot target a specific input on click of your div unless that input has a unique class or id.
$('div').on('click',function(){
var value = $(this).find('input[type=text].provided_code').val();
})
I would like to clear all inputs,
selects and also all hidden fields in a form.
Using jQuery is an option if best suited.
What is the easiest way to do this... I mean easy to understand and maintain.
[EDIT]
The solution must not mess with check-boxes (the value must remain, but checked state must be cleared), nor the submit button.
What I am trying to do is a clear button, that clears all the options entered by the user explicitly, plus hidden-fields.
Thanks!
You can use the reset() method:
$('#myform')[0].reset();
or without jQuery:
document.getElementById('myform').reset();
where myform is the id of the form containing the elements you want to be cleared.
You could also use the :input selector if the fields are not inside a form:
$(':input').val('');
To clear all inputs, including hidden fields, using JQuery:
// Behold the power of JQuery.
$('input').val('');
Selects are harder, because they have a fixed list. Do you want to clear that list, or just the selection.
Could be something like
$('option').attr('selected', false);
$('#formID')[0].reset(); // Reset all form fields
If you want to apply clear value to a specific number of fields, then assign id or class to them and apply empty value to them. like this:
$('.all_fields').val('');
where all_fields is class applied to desired input fields for applying empty values.
It will protect other fields to be empty, that you don't want to change.
I had a slightly more specialised case, a search form which had an input which had autocomplete for a person name. The Javascript code set a hidden input which from.reset() does not clear.
However I didn't want to reset all hidden inputs. There I added a class, search-value, to the hidden inputs which where to be cleared.
$('form#search-form').reset();
$('form#search-form input[type=hidden].search-value').val('');
for empty all input tags such as input,select,textatea etc. run this code
$('#message').val('').change();
You can put this inside your jquery code or it can stand alone:
window.onload = prep;
function prep(){
document.getElementById('somediv').onclick = function(){
document.getElementById('inputField').value ='';
}
}
What I'm thinking about is when I remove or add a child element from the DOM, I will change other elements' names through JavaScript or jQuery. For example, I'm going to remove the second text box from a form which have 3 text boxes. They have the names "input-1", "input-2" and "input-3." After removing "input-2," I'm going to rename "input-3" as "input-2". Then, when I'm going to add a new text box, it will be named "input-3." Is this efficient?
what is your html markup?... and why would you do that?...
$('input:text').attr('name',function(index,name){
return 'input-' + (index+1);
// this will rename input's of type text based on their indices..
});
I just change the elements' names before the form is submitted to the server. No need for dynamic changing, i.e., when an element is removed and and a new one is added. It's more convenient.