JavaScript - On Field Test How To Clear Value Onclick?

I searched the forum for an answer to this question, but found nothing that was able to answer my question. I have a form and I need to validate a field against three rules:

1) The field need to be between 6 and 12 characters
2) It can only have letters, numbers, and the underscore
3) It cannot contain a space or other special characters

I want the validate to happen in real-time. I have the first rule working great. Here is the code for that:
Code:

var username = document.getElementById('registerUsername');
if((username.value.length < 6) || (username.value.length > 12))
			{
			document.getElementById('usernameValidate').innerHTML="Incorrect.";
			}else{
			document.getElementById('usernameValidate').innerHTML="Correct.";
			}

How would I be able to incorporate checking for rules 2 and 3?

I need some help as this is driving me crazy.

I have a onblur, focus with this code for the columns of footer filter.

Code:

$("tfoot input").keyup( function () {
		/* Filter on the column (the index) of this element */
		oTable.fnFilter( this.value, $("tfoot input").index(this) );
	} );
	
	$("tfoot input").each( function (i) {
		asInitVals[i] = this.value;
	} );
	
	$("tfoot input").focus( function () {
		if ( this.className == "search_init" )
		{
			this.className = "";
			this.value = "";
		}
	} );
	
	$("tfoot input").blur( function (i) {
		if ( this.value == "" )
		{
			this.className = "search_init";
			this.value = asInitVals[$("tfoot input").index(this)];
		}
	} );

I am clearing the input fields with this.

Code:

$("input:button").click(function(e) {	$('#col1').val(''); 
					$('#col2').val('');
					$('#col3').val(''); 
					$('#col4').val('');
 					$('#col5').val('');

Including a reset of the filters, but won't bore with that, it works, the filters for the columns are all released and reset.

My issue is the tfoot fields are cleared just fine, but remain blank. The onblur values do not refill the fields until I click in, then click out of the input field. Do I need to adjust for the clearing of the input field in the original focus and onblur? Or do I need a better reset of the the .val('') statement with a tweak to let the onblur function to show.

Thanks, any help really appreciated.
Tom

Hi all,

Thanks for reading. I'm having an issue trying to accomplish the following -

I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after.

This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly?

Code:

<script language="javascript">

fields = 1;

function addMore() {

if (fields = 1) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";

fields = 2;

} else if (fields = 2) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;

} else {

document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;

}

}

</script>

Here is the code in my HTML -

Code:

<input type="text" name="field1" size="25" /> <span>Field 1.</span>
<div id="addedMore"></div>
<p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p>

Thank you very much.

Hi there,

I have a html form, and I need it so that when a user clicks a button, it adds a field into the form.
I also need it to write <td></td> around the new field, and I need it to write this in a specific part row of a table.

How would I go about doing this?
I've tried searching for the past two hours, but no luck.

Many thanks, I appreciate it,
Jason

Hi, I'm trying to make a comment field that only appears once you've clicked the "Add comment link". I'd like it to replace the add comment link. I assume this is an onclick event of some sort, but I'm not sure quite how to go about doing it.

Help would be highly appreciated.

I need when I click to type into a form field, I need an onclick event to show another form field. I would assume this would be a hiddin div or an on click event to post another form field.

So in theory just because I actually clicked into one form field...another form field shows up underneath it...can anyone help...

Hi all, I'm a beginner in JavaScript can someone please help me to resolve this issue and thanks in advance for your help!

What I'm trying to do is..

When you select multiple <div> get the value of each one and save in separate hidden fields accordingly.

What needs to happen is...

Click div 1 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2

Click div 2 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2

Here's what I've come up with so far (currently I'm using JQuery)

The problem with this is that no matter what div I click in which order it only updates the 1st hidden field

Code:

<div id="click1" name="click1" value="123" onclick="abc()"/>Click 1</div>
<div id="click2" name="click2" value="225" onclick="def()"/>Click 2</div>

<input id="passenger_1" name="passenger_1" type="hidden" value="none" />
<input id="passenger_2" name="passenger_2" type="hidden" value="none" />

<script>
function abc() {
var pasvalue = $('#click1').attr('value');
var pas1_value = $('#passenger_1').attr('value');
var pas2_value = $('#passenger_2').attr('value');
if(pas1_value == "none"){
	$('#passenger_1').attr('value', pasvalue);
}else if (pas2_value == "none"){
	$('#passenger_2').attr('value', pasvalue);
}}

function def() {
var pasvalue = $('#click2').attr('value');
var pas1_value = $('#passenger_1').attr('value');
var pas2_value = $('#passenger_2').attr('value');
if(pas1_value == "none"){
	$('#passenger_1').attr('value', pasvalue);
}else if (pas2_value == "none"){
	$('#passenger_2').attr('value', pasvalue);
}}
</script>

I would like to set up an image gallery so that when customer clicks on their chosen image, the image caption populates into the associated field in the form below the gallery, on the same page.

Any way you know of to do this?

I am not really a coder, I only know this and that, so examples or detailed instructions will be most helpful.

Thanks very much.

I have a search form and added the "Clear All" Button functionality...but it clears the last part of the search form display preferences....how do I only clear the checkboxes at the top of the form only and not at the bottom of the form between the <DIV> tags?

I have attached a copy of the JSP page.

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

hiiii,
im new to javascripts . Can anyone help me to know that a javascript which is validating a phone number accepts only digits but if the text field is left empty it should accept the entry as an empty entry....


plz share knowledge u will be more knowledgeable

Hi folks.

Looking to see if anyone could tell me where I'm going wrong with this script...

I'm trying to have a field automatically filled with the day of the week ("Monday", "Tuesday", "Wednesday" and so on), upon the user selecting a date from the datepicker jQuery. If this isn't clear, I'll clarify further down the page.

Here is the script:
Code:

<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[428]"]').change(function(){
var d = $('input[name="item_meta[428]"]').val();
var n = new Date(d).getDay();
if(n == 0)
val v = 'Sunday';
else if(n == 1)
val v = 'Monday';
else if(n == 2)
val v = 'Tuesday';
else if(n == 3)
val v = 'Wednesday';
else if(n == 4)
val v = 'Thursday';
else if(n == 5)
val v = 'Friday';
else if(n == 6)
val v = 'Saturday';
$('input[name="item_meta[429]"]').val(v).change(); 
});
});
</script>

I'm basically trying to say, if the user selected today (15/05/2012) in the field 428 it would fill the field 429 with "Tuesday".

Again, if the user selected 18/05/2012 in the field 428 then it would automatically fill field 429 with "Friday".

It's being done to work in conjunction with a wordpress plugin called Formidable Pro hence the item_meta[428] etc.

Any assistance would be greatly appreciated.

Sam.

I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work.

Can I do this?

Help

I've gone far enough with my website and thanks to you guys i completed a lot of issues i had.

I just included a browser detect snippet which is supposed to show the pages correctly on IE, Firefox, Safari, Opera and Chrome.

I understand that watching a greek site won't make much sense for you, but i'm hoping you will at least understand how the thing goes. The first yellow box on your left is the menu. Clicking there will take you to the menu's categories. You will find a few categories in english there, at least

Now, in each category, clicking the button below the product should put it in the cart, part of it appears on every page in a floating layer to the top-right. There is also a link in there to "checkout" (ΟΛΟΚΛΗΡΩΣΗ ΠΑΡΑΓΓΕΛΙΑΣ). This is where the problem comes: In every browser except Chrome, the list of items of the cart will appear. I don't know why but in Chrome, not only i see nothing in there, but it also deletes everything in the cart!

If any of you, specially the ones who have many browsers installed, could spend a little time testing my site, i would really appreciate it. Old Pedant and Phillip should be more aware since you guys have already helped me out and you kinda know the functionality of the site.

The address is: lukulos.gr (works directly now, no need to type specific files)

hello guys, I'm new here ..

I am developing a fw js, now I have to test the selector $..

operation is similar to jquery

$('#Id')

$('table td .class)

If there are several factors you should:

$('table td .class).each(function ()
{
this ..
});

or

$('table td .class).item(number) ...


http://debbe.altervista.org/d&d.html


can be used to test the methods set / get the attributes or setCSS or getCSS for styles ..

Thanks to all