onsubmit to onclick

Forum Moderators: open

Message Too Old, No Replies

onsubmit to onclick

syktek

10:42 pm on Jan 26, 2007 (gmt 0)

I am trying to write a script that validates a textarea based on a regular expression. This is what I have so far:


<script type="text/javascript" language="JavaScript">
function checkComment(f)
{
var validcontent = /^([0-9a-zA-Z\.\ \?])$/;
if (!validcontent.test(f.comment.value)) {
alert("Your Comment field can only contain numbers, letters, .,? and spaces");
document.getElementById('comment').focus();
return false;
}
}
</script><form method="POST" action="#" name="form1" onsubmit="checkComment(this)">
<textarea cols="20" rows="5" name="comment" id="comment"></textarea>
<input type="Submit" name="submit" value="send">
</form>

I just learned since it's using a custom templating language I don't have access to the form tag to use the onsubmit event. Is there a way to modify the script so that it uses onclick with the submit button?

cmarshall

4:35 am on Jan 27, 2007 (gmt 0)

Can you do this?

<form action="#" method="get" id="my_form"><div>
<script type="text/javascript">
// <![CDATA[
function onsubmithandler(){ alert ( "Submit Event Caught!" ); }

// Either of these will work:
document.forms[0].onsubmit=onsubmithandler;
document.getElementById('my_form').onsubmit=onsubmithandler;
// ]]>
</script>
<input type="submit" value="Submit" /> 
</form>

cmarshall

5:32 pm on Jan 30, 2007 (gmt 0)

I guess you don't really need this answer, but I just wanted to add it to the record (also, I forgot to close my <div> in the example above. In XHTML 1.1, you always need to have block elements in a <form>, because a <form> doesn't really have a concrete manifestation).

In a case like yours, you can't access the form, so a workaround is to grab one of the form input elements, and get its "form" property, like so:

<form action="#" method="get" id="my_form"><div>
<input type="submit" id="submit_button" value="Submit" />
<script type="text/javascript">
// <![CDATA[
function onsubmithandler(){ alert ( "Submit Event Caught!" ); }
// This is a way to do it if you don't have access to the form object.
document.getElementById('submit_button').form.onsubmit=onsubmithandler;
// ]]>
</script>
</div></form>

syktek

9:02 pm on Jan 30, 2007 (gmt 0)

thanks for everyones replies, i ended up going with this:

} else {
document.getElementById('form1').submit();
}

cmarshall

9:05 pm on Jan 30, 2007 (gmt 0)

I'm surprised that works.

The form is named, but not id'd. It should not be returned by getElementById()

syktek

2:41 am on Jan 31, 2007 (gmt 0)

it was working in both browsers (ie/ff) but i decided to go with an onblur method instead.

syktek

7:49 pm on Jan 31, 2007 (gmt 0)

decided to combine this with my validation script and a lot of trial and error got everything sorted:

var chkfields = new Array()
chkfields[0] = "orxgiftmessage"
chkfields[1] = "orxdelinstructions1"
chkfields[2] = "orxdelinstructions2"
chkfields[3] = "orxcusservicesinstructions"
for (i=0; i < chkfields.length; i++)

if (!validcontent.test(document.getElementById(chkfields[i]).value)) {
alert("Please make sure you are only using alphanumeric characters,!,?, . and commas in the message fields");
return;
}
if (!document.wizform.cterm.checked) {
alert('Please read our Terms & Conditions and then tick the confirmation box provided.');
document.wizform.cterm.focus();
return;
}
<template_tag step=finish,mode=process,param1=process,check=yes,callonly=yes>
}
</script>