HELP! Multi-forms and making sure fields are filled?

[chrisjpopp]

Hi there

I'm running two different forms on one page.Each form goes to a different place - one form does stuff on a different server and one form does stuff on the same server.

This is being accomplished by using the following script (found here on WebDeveloper)

<script language='javascript'>
<!--
function doit()
{
document.form1.submit();
document.form2.submit();
}
-->

</script>
</head>

The first form starts like this:

            <form id='form1' name='form1' action="http://www.coolcart.net/shop/coolcart.aspx/starkeepsakes" method='POST'>

The second form starts like this:

                        <form id='form2' name="form2" method="POST" action="attachscript.php" enctype="multipart/form-data" target='_blank'> 

There is no submit function in the forms.

After the two forms are listed, there's one link that processes both forms at the same time when clicked:

            <div align="center"><a href='javascript:doit()'>Click Here To Submit</a></div>

Here's the good news: THIS WORKS. This is not the problem.

The problem is my client wants most/all of the content in form2 to be filled out. If the fields are not filled out, then something happened that says in effect "yo. fill that out!"

I've tried to use javascript validation scripts and they don't work. Presumably because they depend upon

<input type="submit" name="submit">

Which is NOT how the form is told to post.

So.... Any ideas? The client is FREAKING that "something so simple" (her words, not mine) can't be done.

Thanks!

[WolfShade]

Most clients haven't got a clue as to what is easy, much less what is feasible.

This is possible, though. You just have to put the form validation in your doit() function, and use the .submit() only when all is correct.

If you just want to make sure that a text field or textarea or password field has content, check for length.

document.form1.fieldName.value.length > 0;

Select elements use selectedIndex (first option is position 0).

document.form1.selectName.selectedIndex > 0;

Checkbox and radio use .checked. If there are more than one with the same name/id, the first is position 0.

document.form1.checkRadio[0].checked == true;

Don't use "javascript:doit();", use onclick="return doit();" to call the function.

I recommend setting a variable called warn at the start; anything incorrect, use "warn += ' error message ';" and if warn does not = "", then fail the submit, otherwise "document.form1/2.submit();"

^_^

[chrisjpopp]

So it would be

<!--
function doit()
{
document.form1.fieldName.value.length > 0;
document.form1.submit();
document.form2.fieldName.value.length > 0;
document.form2.submit();
}
-->

</script>

If I was just worried about text fields?

Don't use "javascript:doit();", use onclick="return doit();" to call the function.

I'm scratching my head at that one. Tried using onclick="return doit();" in place of onclick="return checkEval();" but that didn't work. Tried using a submit button as well but still no go.

Sorry - I must be an idiot this morning.

[WolfShade]

<!--
function doit()
{
// Put form validation in front of both.
var warn = "";
var df1 = document.form1, df2=document.form2;
if(df1.fieldName.value.length == 0) {
  warn += "Please enter a value in form1 fieldName.\n";
  }
if(df2.fieldName.value.length == 0) {
  warn += "Please enter a value in form2 fieldName.\n";
  }
if(warn == "") {df1.submit(); df2.submit(); }
else {alert(warn); return false; }
}
//--> //Gotta hide the closing HTML comment - it's not JS.

This checks both forms; if either form is incorrect, it will not submit either - if both are correct, it will submit both.

<div align="center"><a href="javascript:void(0);" onclick="return doit();">Click Here To Submit</a></div>

This is a more proper way to use the anchor tag. Some JS guys will disagree, saying that the href should be "#" and add " return false;" to the end of the onclick. It's 6 of one, half a dozen of the other. "javascript:void(0);" for the href will prevent the native action of the anchor - "#" will scroll to the top, but the " return false;" at end of onclick will prevent the scroll.

^_^