$(document).ready(function (){
var postcode = $('#postcode-form').val();
function errors(){
if(postcode == ""){
$('#postcode-form').addClass("form-error");
}else{
$('#postcode-form').removeClass("form-error");
}
}
$('#submit-form').click(errors);
});
The class adds when the form is empty but doesn't remove when I enter details in the form. I don't understand why?
Move the postcode chunk of code within your function. Otherwise it gets the value only once when the page loads. By placing it within the function, it'll check the value on each click.
function errors() {
var postcode = $('#postcode-form').val();
if (postcode == "") {
$('#postcode-form').addClass("form-error");
} else {
$('#postcode-form').removeClass("form-error");
}
}
So now you know why it isn't working. I would take advantage of the blunder though, and refactor to cache the selector!
$(document).ready(function (){
var $postcode = $('#postcode-form');
function errors(){
if($postcode.val() == ""){
$postcode.addClass("form-error");
}else{
$postcode.removeClass("form-error");
}
}
$('#submit-form').click(errors);
});
Related
I'm having an issue with my validation process. I'm not using a standard "submit" button, rather I have <span class="button" id="print">Print</span> and jQuery listens for a click. This is the validation code I have when that "button" is clicked:
var validation = "";
function validate() {
$("#servDetails").find("input").each(function () {
if ($(this).prop("required") && $(this).val() == "") {
validation = false;
}
else {
validation = true;
}
});
$("#checklist").find("input[required]").each(function () {
if ($(this).prop("required") && $(this).val() == "") {
validation = false;
}
else {
validation = true;
}
});
}
$("#print").on("click", function() {
validate();
if (validation == false) {
alert("Please fill out all required inputs!");
return false;
}
else {
window.print();
}
});
If I click the button without filling anything out (all items blank), I get my alert as expected.
If I fill out all of the required elements, it pulls up the print dialouge as expected.
However, if I leave some of the boxes blank while others are correctly filled, it still goes to print instead of giving me the alert like I need. Any thoughts?
The code have to be rewritten, or better replace it with any validation plug-in.
But in your case, I suppose, you just forgot to return, in case you found some not filled field. So if you have any filled input it override your validation variable.
The simplest solution is to remove
else {validation = true;} code blocks, and add
validation = true;
at the beggining of the function.
I have one textbox and one button and on button I have written below code. problem is suppose first I have entered in textbox 10 than its worked but when another time I enter 10 than also it prints value is not in array. so pls help me whats the issue...
jQuery(document).ready(function()
{
jQuery("#mybutton").live('click',function ()
{
var sel_fam_rel=jQuery("#my_textbox").val();
var ids = [];
code =sel_fam_rel;
if($.inArray(code,ids) >= 0)
{
alert("Value is in array");
}
else
{
alert("Value is not in array");
ids.push(code);
}
});
});
This line:
if($.inArray(code,ids) >= 0)
should be changed to:
if($.inArray(code,ids) != -1)
and put your ids var outside of click.
Try the snippet below.
var ids = [];
jQuery("button").on('click', function() {
var sel_fam_rel = jQuery("#my_textbox").val();
code = sel_fam_rel;
if ($.inArray(code, ids) != -1) {
alert("Value is in array");
} else {
alert("Value is not in array");
ids.push(code);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='my_textbox'>
<button>check</button>
Create your array var ids=[];global outside button event, as whenever you click button it is creating new empty array. It will fix your problem.
A few changes are needed:
var ids = []; // `ids` needs to be in the global scope to work as you want it,
// or you could use a different method like localstorage
jQuery(document).ready(function()
{
jQuery("#mybutton").on('click',function () // use `on` not `live` which is deprecated
{
var sel_fam_rel=jQuery("#my_textbox").val();
code =sel_fam_rel;
if($.inArray(code,ids) != -1) // inArray() returns -1 if the value is not in the array, you can use it the way you have it, IMO (purely subjective), using `!=-1` is preferable as it's more clear what the code in intend to do
{
alert("Value is in array");
}
else
{
alert("Value is not in array");
ids.push(code);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my_textbox" value="10"/><br>
<input type="button" id="mybutton" value="Click me"/>
use below code . take your ids out side of click event . as per your code each time when you click button ids reset .
var ids = []; // declare as global variable
jQuery(document).ready(function()
{
jQuery("#mybutton").live('click',function ()
{
var sel_fam_rel=jQuery("#my_textbox").val();
code =sel_fam_rel;
if($.inArray(code,ids) >= 0)
{
alert("Value is in array");
}
else
{
alert("Value is not in array");
ids.push(code);
}
});
});
I made a fiddle to your problem, Use indexOf
http://jsfiddle.net/go8o34fq/
jQuery-
var array=["A","B","C","D"];
$('button').click(function(){
var code=$('input').val();
if(array.indexOf(code)==-1)
{
array.push(code);
console.log("if "+array)
}
else
{
console.log("else "+array)
}
});
Just a bit requirement if your need is case-sensitive then use- code.toUpperCase()
I have this code that validates if ContentPlaceHolder1_locationTextBox has text in it before newIndex can become 3.
if ((newIndex === 3 && $("#ContentPlaceHolder1_locationTextBox").val() == "")) {
$('#ContentPlaceHolder1_locationLabelV').show();
return false;
}
else {
$('#ContentPlaceHolder1_locationLabelV').hide();
}
However I also have ContentPlaceHolder1_countryTextBox & ContentPlaceHolder1_seaTextBox on the page with thier respective labels, how can I modify the script so that it validates against all textboxes?
I tried adding a horrible or statement however this was causing the page to freeze. What s the best method to check against all three textboxes?
You can add class for all inputs, example: validate
After you can create JS function. You can fire this function as you wish.
function check(){
$('.validate').each(function(){
label = $("label[for='"+$(this).attr('id')+"']");
if ((newIndex === 3 && $(this).val() == "")) {
label.show();
return false;
}
else {
label.hide();
}
});
}
function validate(value) {
if ...
//show div
else ...
// hide div
}
$("input[type='text']").each(function(){
//value from input text field
var myval = $(this).val();
//call validation function
validate(myval);
});
I have a list of urls(div) underneath an input field(div). I need the ability to come down in the list and than by hitting enter this will trigger some function designated to the url. This is the fidle: the script
Over the last days I have tried to much things to explain, but in conclusion none of it worked. Help would be appreciated.
After this line of code :
// set timers to do automatic hash checking and suggestions checking
setInterval(checkHash,500);
setInterval(checkSuggest,500);
Insert this :
$('#searchbox').keyup(
function (e){
var curr = $('#suggest').find('.current');
if (e.keyCode == 40)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).next().attr('class', 'display_box current');
}
else{
$('#suggest li:first-child').attr('class', 'display_box current');
}
}
if(e.keyCode==38)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).prev().attr('class', 'display_box current');
}
else{
$('#suggest li:last-child').attr('class', 'display_box current');
}
}
if(e.keyCode==13)
{
var search_terms = $('.current a').text();
// perform a search with this text...
doSearch(search_terms,true,false);
//update the search textbox
$('#searchbox').val(search_terms);
}
})
And don't forget to delete the previous code at the bottom...
I've got a form with various inputs that by default have no value. When a user changes one or more of the inputs all values including the blank ones are used in the URL GET string when submitted.
So to clean it up I've got some JavaScript that removes the inputs before submission. It works well enough but I was wondering how to put this in a js function or tidy it up. Seems a bit messy to have it all clumped in to an onclick. Plus I'm going to be adding more so there will be quite a few.
Here's the relevant code. There are 3 separate lines for 3 separate inputs. The first part of the line has a value that refers to the inputs ID ("mf","cf","bf","pf") and the second part of the line refers to the parent div ("dmf","dcf", etc).
The first part is an example of the input structure:
echo "<div id='dmf'><select id='mf' name='mFilter'>";
This part is the submit and js:
echo "<input type='submit' value='Apply' onclick='javascript: if (document.getElementById(\"mf\").value==\"\") { document.getElementById(\"dmf\").innerHTML=\"\"; }
if (document.getElementById(\"cf\").value==\"\") { document.getElementById(\"dcf\").innerHTML=\"\"; }
if (document.getElementById(\"bf\").value==\"\") { document.getElementById(\"dbf\").innerHTML=\"\"; }
if (document.getElementById(\"pf\").value==\"\") { document.getElementById(\"dpf\").innerHTML=\"\"; }
' />";
I have pretty much zero JavaScript knowledge so help turning this in to a neater function or similar would be much appreciated.
your script block in your HEAD:
<script type="text/javascript">
function yourFunctionName(){
...your javascript goes here...
}
</script>
and then your onclick:
onclick="javascript:yourFunctionName()"
Seems pretty simple:
<script>
function doSubmit() {
if (document.getElementById("mf").value == "")
document.getElementById("dmf").innerHTML = "";
if (document.getElementById("cf").value == "")
document.getElementById("dcf").innerHTML = "";
if (document.getElementById("bf").value == "")
document.getElementById("dbf").innerHTML = "";
if (document.getElementById("pf").value == "")
document.getElementById("dpf").innerHTML = "";
}
</script>
<input type="submit" value="Apply" onclick="doSubmit();" />
Or you could even get fancy and do something like this:
<script>
function doSubmit() {
var inputs = {
"mf": "dmf",
"cf": "dcf",
"bf": "dbf",
"pf": "dpf"
};
for (var input in inputs) {
if (document.getElementById(input).value == "")
document.getElementById(inputs[input]).innerHTML = "";
}
}
</script>
if you were to use jquery (and there is no reason not to):
if your submit button had an id of say id="submit-button" this 'should' work and would handle any additional inputs that get added
$(document).ready(function () {
$("#submit-button").click(function () {
$(this).parents("form").find(':input').each(function() {
if ($(this).val() === "") {
$(this).innerHTML = "";
}
});
});
});
NOTE: I did not test above code at all
here is an updated version
$(document).ready(function () {
$("form").submit(function () {
$(this).find(':input').each(function() {
if ($(this).val() === "" && $(this).attr("type") !== "submit") {
$(this).attr('disabled', 'disabled');
}
});
});
});
this one is setting the blank inputs to disabled - I could not get the innerHTML = "" to work on Firefox 3.6 on Mac and I did not test above code on other browsers or OS
you would need to download jquery http://docs.jquery.com/Downloading_jQuery#Current_Release and include a reference to it in your html head
to use the innerHTML trick on the inputs parent span tag change the line $(this).attr('disabled', 'disabled'); to
if ($(this).parent().get(0).tagName === "SPAN") {
$(this).parent().get(0).innerHTML = "";
}