Jump to content

In form need to add a checkbox with javascript to enctype="multipart/form-data"


Recommended Posts

I hope I am in the right forum because my php code is on another page. Because my form has to uplaod pictures it is set to method post., and enctype="multipart/form-data". Now my checkbox button does not work inside this form because it is set to method get? I really would like this checkbox because I would like to ensure that people have read my terms and conditions. Can anyone help find a solution?

 

Here is the code. As you can see at the bottom there is two submit buttons. I only want one to add the files to my directory and also to be attached to the terms agreement.

 

<SCRIPT language=JavaScript>
<!--

//Accept terms & conditions script (by InsightEye www.insighteye.com)
//Visit JavaScript Kit (http://javascriptkit.com) for this script & more.

function checkCheckBox(f){
if (f.agree.checked == false )
{
alert('Please check the box to continue.');
return false;
}else
return true;
}
//-->
</SCRIPT>





<form method="post" action="addMember1.php" enctype="multipart/form-data">









Photo:
</p>
<input type="hidden" name="size" value="350000">
<input type="file" name="photo"> 



Please add photo here.
</p>



Other Member Information:
</p>
<textarea rows="10" cols="35" name="aboutMember">
</textarea>



Please Enter any other Bands the Member has been in.
</p>



Other Bands:
</p>
<input type="text" name="otherBands" size=30 />
<br/>
<br/>
<input TYPE="submit" name="upload" title="Add data to the Database" value="Submit Form"/>
</form>
<form action="/yourscript.cgi-or-your-page.html" method="GET" onsubmit="return checkCheckBox(this)">

<!--Enter your form contents here-->

<b>By submitting, I agree that all info <a href="http://www.atdolls.com" target="_blank">blah blah booby</a>  d was done accurately & truthfully.</b><br />
I accept: <input type="checkbox" value="0" name="agree">
<input type="submit" value="Submit form">
<input type="button" value="Exit" onclick="document.location.href='http://www.loveforevergifts.com';">
</form>

You have two separate forms. Put everything in a single form. Then handle it in the addMember1.php page.

 

<br/>
<input TYPE="submit" name="upload" title="Add data to the Database" value="Submit Form"/>

<!-- TAKE OUT THESE TWO LINES - AND THE SUBMIT BUTTON DOWN BELOW -->
</form>
<form action="/yourscript.cgi-or-your-page.html" method="GET" onsubmit="return checkCheckBox(this)">

Thank you for the quick reply. I have tried tp remove the extra submit button and cosolidate 2 forms into two. The problem is the box is there but it doesnt follow the javascript. If I do not check the button, my files upload anyway which is not the result I want. I would like for the little window to pop up and say you must check the box before upload. If I somehow add instructions on the php form it still uploads but on the upload it says what I ask it to say like "...Need to click box first" (example text) but it gives the words I ask it to write on the same page that says right after that Your files were uploaded successfully to the directory. I cant seem to get the javascript to function properly when it is in the form.

The ONSUBMIT attribute that was in the second form tag (the one you removed), needs to be added to the first form tag (the one you kept). Also, be aware that the checkbox will now be in $_POST instead of $_GET.

 

If that doesn't solve it, paste your code as you have it now so we can see what we are working with.

I added the code onsubmit="return checkCheckBox (this)" and the javascript still doesnt work. I noticed that you gave the sign $_POST which is the php code. I have not included a variable like that to my php file before because I do not want to upload a checkbox to my SQL database, but as a test I added the code $check=$_POST['agree'] onto my php file just to pull it up but I did not send it to my SQL. Anyway the problem can be fixed with the form file I think, isnt that correct?

 

Here is the code

 

<html>
<head>
<SCRIPT language=JavaScript>
<!--

//Accept terms & conditions script (by InsightEye www.insighteye.com)
//Visit JavaScript Kit (http://javascriptkit.com) for this script & more.

function checkCheckBox(f){
if (f.agree.checked == false )
{
alert('Please check the box to continue.');
return false;
}else
return true;
}
//-->
</SCRIPT>

</head>
<body>



<form method="post" action="addMember1.php" enctype="multipart/form-data">



Please Enter the Band Members Name.
</p>



Band Member or Affiliates Name:
</p>
<input type="text" name="nameMember"/>



Please Enter the Band Members Position. Example:Drums.
</p>



Band Position:
</p>
<input type="text" name="bandMember"/>



Please Upload a Photo of the Member in gif or jpeg format. The file name should be named after the Members name. If the same file name is uploaded twice it will be overwritten! Maxium size of File is 35kb.
</p>



Photo:
</p>
<input type="hidden" name="size" value="350000">
<input type="file" name="photo"> 



Please Enter any other information about the band member here.
</p>



Other Member Information:
</p>
<textarea rows="10" cols="35" name="aboutMember">
</textarea>



Please Enter any other Bands the Member has been in.
</p>



Other Bands:
</p>
<input type="text" name="otherBands" size=30 />
<br/>



<!--Enter your form contents here-->

<b>By submitting, I agree to <a href="http://www.atdolls.com" target="_blank">Contract</a></b><br />
I accept: <input type="checkbox" value="0" name="agree" onsubmit="return checkCheckBox(this)">
<input type="submit" value="Submit form">

</form>


</body>
</html>

 

By the way there are two inputs at the bottom of the page (the form and the checkbox) I tried including the onsubmit code onto both but left it for you on the checkbox line.

 

The onsubmit needs to go on the FORM tag not the INPUT tag.

 

<form method="post" action="addMember1.php" enctype="multipart/form-data" onsubmit="return checkCheckBox(this)">

<!-- ALL THE OTHER STUFF IN YOUR FORM -->

<b>By submitting, I agree to <a href="http://www.atdolls.com" target="_blank">Contract</a></b><br />
I accept: <input type="checkbox" value="0" name="agree">
<input type="submit" value="Submit form">

</form>

 

Since this form is using METHOD="POST", you have to use $_POST[] to refer to any fields on the form when it is received by addMember1.php. $_POST fields do not magically go to the database, you would have to do that in code, so using POST should not adversely affect the database, unless you have some function that sends all POST fields to the database. One important thing to be aware of, the browser will NOT POST a checkbox if it is not checked. So, if the user has JavaScript turned off and does NOT check the box, the $_POST['agree'] element will NOT exist. You check for this using isset():

 

if (! isset($_POST['agree'])) {
  // The user did NOT check the terms box, so do not proceed
} else {
  // OK, they agreed to the terms, continue here
}

 

Another note, I would choose a value other than zero for the checkbox. It will not matter with the code I just provided, but it can get confusing. PHP will consider a value of zero as empty and false, so if you instead did: if($_POST['agree']) ... it would be false since your INPUT specifies a value of zero. And if you use  if(empty($_POST['agree'])) ... it will be true (empty). In either case, you will not know if the user checked the box or not. I usually use 1 (one) for checkboxes, unless I need a specific value from it.

 

So, yes, you can fix this just in the HTML. But the JavaScript is NOT going to stop someone from submitting the page without checking the box IF they have JavaScript turned off. So, you ALWAYS need to validate your forms server side, no matter how much JavaScript validation you have.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.