Topic: Stopping a form from posting with javascript

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.

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!

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 ]:.

Sorry I forgot to add that part that I have.

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!

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!

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 ]:.

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!

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

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 ]:.

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

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

Inside the Textarea Tag

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!

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:

onkeyup="textLimit(this, 150);"

Hope that helps,





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

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!

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

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