Page with multiple forms. onblur issue

My first javascript problem:

I have a php script with multiple forms. Each form holds only one text field and a submit button.

If the user places the cursor in a text field below and add text, but then forget to submit that form and instead click a text field in another forms text field ("onbluring" the first forms text field) the text that was typed in the first forms text field will disapeare.

To warn the user I would like to add some code that when the user is leaving the text field in a form without having submitted the form warns the user of this.

It's would be nice if the user is warned only if the text field that's leaved holds text.

I understand that I must learn Javascript but since I don't now OOP yet, I ask for help begging on my bare knees. Please have mercy, I'm just a simple procedural PHP programmer.



<form action="'.$_SERVER['PHP_SELF'].'" method="post">
First name: <input type="text" name="fn" />
<input type="submit" value="Register" />
</form>

<form action="'.$_SERVER['PHP_SELF'].'" method="post">
Last name: <input type="text" name="ln" />
<input type="submit" value="Register" />
</form>

You could simply submit the form onblur:-

<form action="'.$_SERVER['PHP_SELF'].'" method="post">
First name: <input type="text" name="ln" onblur = "if(this.value.length>1) {this.form.submit()}">
</form>

But apart from the minimum field length there is no validation, so the user could enter just a single space, an x or a ? and still submit the form. It would be better to perform some checks:-



<form action="'.$_SERVER['PHP_SELF'].'" method="post">
First name: <input type="text" name="fn" onblur = "check(0, this.value)">
</form>

<script type = "text/javascript">
function check(fnum, x) {
x = x.replace(/^\s+|\s+$/g,""); // strip leading and trailing spaces;
x = x.replace(/\s{2,}/g," "); // replace multiple spaces with one space
x = x.replace(/[^a-z\s\-\']/g,""); // strip all but letters, space, hyphen and apostrophe
document.forms[fnum].fn.value = x; // write the modified value back to the field
if (x.length > 1) {document.forms[fnum].submit() }
}

</script>

But when your form submits it will cause the page to refresh! Why do you want multiple forms????


"She is the type who would walk into a shopping center, see a sign which read "Wet Floor," and do it!"

Thank you for your post.
I put in your code, the form is submitted when i leave the field, but the value is gone when the page is displaying the forms again (I've added sticky fun ctionality with PHP and MySQL, I will try to figure out why. I use PHP to validate since I don't know any javascript.

Why multiple forms? Well, I am generating the text fields dynamicly from a database. If I want to use only one form I have to generate the form using arrays wich must be passed along with the form, since it needs to hold both the dataposts id name and value. It's problary a better solution, but I'm not there yet in my coding knowledge.

Also, i shoud have prefered that a warning is displayed when leaving a form, not a submit.

It seems that $_POST['submit'] is empty when it is onblur that sends the form. In my code I take care of a sent form by checking if $_POST['submit'] is set. Any workaround?

Hi

It seems that $_POST['submit'] is empty when it is onblur that sends the form. In my code I take care of a sent form by checking if $_POST['submit'] is set. Any workaround?

http://www.codingforums.com/showthread.php?t=240088

LT