Topic: Stopping a form from posting with javascript (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=28177" title="Pages that link to Topic: Stopping a form from posting with javascript (Page 1 of 1)" rel="nofollow" >Topic: Stopping a form from posting with javascript <span class="small">(Page 1 of 1)</span>\

 
dade
Nervous Wreck (II) Inmate

From: Kansas, just this side of the rainbow
Insane since: Sep 2004

IP logged posted posted 07-06-2006 17:16 Edit Quote

Okay, I admit up front, I do not know javascript. However, my work has asked me to build an intranet application that has grown much bigger than originally concieved (gotta love feature creep).

They would like to have a form with a textarea field that has a character limit. I have gotten the javascript to stop and alert the user while they are typing. However, the code I am using does not notice when the user copies into the textarea, so I need to check the field before submitting the form.

code:
function textLimit(field, maxlen) {
				if (field.value.length > maxlen) {
					field.value = field.value.substring(0, maxlen);
					alert("You have exceeded 150 characters");
			 		return false;
			 	}
			 }


The code does give a warning and trim the field when the submit button is clicked, but it does not stop the form from being submitted. It does however, work when you hit enter. Is there a way to stop the form from submitting when you click on the submit button?

Thank you,

Dustin

This patient is ready for his medication!

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

IP logged posted posted 07-06-2006 17:21 Edit Quote

Yep,

<form onsubmit="return textLimit(field, 250)">


The one thing you need to do is return true if the check is okay.



.:[ Never resist a perfect moment ]:.

dade
Nervous Wreck (II) Inmate

From: Kansas, just this side of the rainbow
Insane since: Sep 2004

IP logged posted posted 07-06-2006 17:24 Edit Quote

Sorry I forgot to add that part that I have.

code:
onSubmit="return textLimit(this.form.body, 150);"


This form has several fields, but this is the only one that has a character limit that is also a textarea. I will try your version and see if it works.

Thanks for the blazing fast respons by the way!

This patient is ready for his medication!

dade
Nervous Wreck (II) Inmate

From: Kansas, just this side of the rainbow
Insane since: Sep 2004

IP logged posted posted 07-06-2006 17:32 Edit Quote

Okay, it didn't work, but I am wondering if because it is truncating the field which causes the form to then be true so it gets submitted? This is the same function that checks as you write in the field (using onkeyup event), so do I need a complete separate function for submitting?

This patient is ready for his medication!

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

IP logged posted posted 07-06-2006 18:35 Edit Quote

Yeah if you're calling this function onkeyup then there will never be more than 150 characters in the form field, because this will always truncate the stuff in there before beings submitted.

So a different function wouldn't make a difference. Really the onsubmit check isn't really necessary.



.:[ Never resist a perfect moment ]:.

dade
Nervous Wreck (II) Inmate

From: Kansas, just this side of the rainbow
Insane since: Sep 2004

IP logged posted posted 07-06-2006 20:01 Edit Quote

The problem is that if someone pastes some text into the field, it does not trigger the onkeyup event. So someone could paste text longer than 150 characters into the field and hit submit and it would carry over without a warning to the user.

What I need is a way to warn the user without it submitting the form, and cover every possibility (typing, pasting, hitting enter to submit as well as click to submit). Perhaps the code I have is not the way I should go. I was asked to do all the checking before submitting the form. I am good at coding php so I could have it check at the server before submitting. But again that is not how I was asked to design the page.

Any suggestions? Also, any links for javascript reference? I guess its time to actually sit down and learn the language.

Thank you again for all of your help.

This patient is ready for his medication!

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

IP logged posted posted 07-06-2006 20:10 Edit Quote

Yeah well the code above should work.

returning false to the onsubmit handler should prevent the form from submitting.
onSubmit="return textLimit(this.form.body, 150);"

That's not right you actually just want

onSubmit="return textLimit(this.body, 150);"

You may want to stick some alerts in there to debug

code:
function textLimit(field, maxlen) {
				alert(field.value);
                                if (field.value.length > maxlen) {
					
                                        field.value = field.value.substring(0, maxlen);
					alert("You have exceeded 150 characters");
			 		return false;
			 	} else {
                                     return true; 
                                }
			 }





.:[ Never resist a perfect moment ]:.

dade
Nervous Wreck (II) Inmate

From: Kansas, just this side of the rainbow
Insane since: Sep 2004

IP logged posted posted 07-06-2006 20:52 Edit Quote

Okay I finally figured it out.

quote:

<script type="text/javascript"><!--
function textLimit(field, maxlen) {
if (field.value.length > maxlen) {
field.value = field.value.substring(0, maxlen);
alert("You have exceeded 150 characters. The text field has been truncated to fit within 150 characters.");
return false;
} else {
return true;
}
}
//--></script>



Inside the Form Tag

code:
onSubmit="return textLimit(this.body, 150)"


Inside the Textarea Tag

code:
onkeyup="textLimit(this.form.body, 150);"




The onSubmit checks anything that is submitted when hitting the "enter" key or the click. The onKeyUp checks while text is entered into the actual field.

Bitdamaged: Thank you for your ideas. What does the "form" part do? I removed the "form" from the onKeyUp event, but it broke. Could you enlighten me a bit as to why or what it does?

Thank you.

This patient is ready for his medication!

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 07-06-2006 21:12 Edit Quote

bare in mind that you can also PASTE something in a form field using the mouse, so you should replace the onkeyup by an onchange

quote:
What does the "form" part do? I removed the "form" from the onKeyUp event, but it broke. Could you enlighten me a bit as to why or what it does?

Form fields have a form property. Thus from any form field it is possible to go "one level up" to reach their owner FORM tag then access any of its form fields.

It seems like you have an input field called body. When you refer to it from the scope of the FORM you can use this.body, from the scope of another form field it is this.form.body, from the scope of the input field called body it is simply this, or you can go "one level up" ( to the FORM ) then down to the field using this.form.body but that's a pit pointless. Hence in your keyup should read:

code:
onkeyup="textLimit(this, 150);"



Hope that helps,





(Edited by poi on 07-06-2006 21:25)

dade
Nervous Wreck (II) Inmate

From: Kansas, just this side of the rainbow
Insane since: Sep 2004

IP logged posted posted 07-06-2006 22:24 Edit Quote

Actually, onchange did not activate when I pasted into the textarea, so it did not do anything different than onkeyup.

Thank you for the info on the whole "this.form.body". I do prefer streamlined code and I really was wondering why I needed the extra text. I felt that "this" meant right here in this line as it appears to. But I was already modifying code with no idea what the hell I was doing.

Thank you both, it was really helpful. Borders, here I come. I need another book!

This patient is ready for his medication!

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 07-06-2006 22:42 Edit Quote

The onchange event is fired when a field is blurred ( lost focus ) and its value has changed. If that doesn't work, double the onkeyup with an onmouseup

Iron Wallaby
Paranoid (IV) Inmate

From: USA
Insane since: May 2004

IP logged posted posted 07-06-2006 23:55 Edit Quote

also just note that people can (and may?) bypass this entirely by disabling Javascript, or by using a browser that doesn't have Javascript (e.g. lynx). So, if you're really concerned about those 150 characters, you should also have some sort of server-side check (which may itself simply be truncating to 150 characters).

---
Website



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu