HTML - Add A Mandatory Checkbox To A Form
Hi Guys,
The form below is part of a new ticketing system i am playing around with. I dont know much about it yet but i want to add a mandatory checkbox to the form and also a text area which contains my terms and conditions. The form below is part of submitting a new ticket and before they can do so i want them to have to check the box below my terms and conditions saying they have read and agree. I'm no expert on forms but im guessing this could be acheived by adding a text area and a checkbox. Most important thing >>>> If the checkbox is not checked i want a pop up warning to pop up saying please tick the box or something like that. Heres the form anyway: Code: <form name="new_ticket" method="post" action="new_ticket.php" onSubmit="return validate_ticket(document.new_ticket);" enctype="multipart/form-data" > <input type="hidden" name="act" value="openticket"> <div class="sub-heading"> {{cClient_newtickettitle}} </div> <div class="formheading"> <span class="label"> {{cLogin_direct}} </span> </div> <div class="formrow"> <span class="label">{{cClient_fullname}}:</span> <span class="field"><input name="client_name" type="text" class="singleline-field" id="full_name" value="{{client_name}}" /> <span class="mandatory-fld"> * </span> </span> </div> <div class="formrow"> <span class=label> {{cClient_phone}} : </span> <span class="field"> <input type="text" name="phone" value="{{phone}}" class="singleline-field"> </span> </div> <div class="formrow"> <span class="label"> {{cClient_email}} : </span> <span class="field"> <input type="text" name="email" value="{{email}}" class="singleline-field"> <span class="mandatory-fld"> * </span> </span> </div> <{customfields_loopstart}> <div class="formrow"> <span class="label"> <{field_name}> : </span> <span class="field"> <{draw_field}> </span> </div> <{customfields_loopend}> <div class="formrow"> <span class=label> {{cDepartment}} : </span> <span class="field"> <select name="dept_id" class="singleline-field"> <option value="">{{cSelect}}</option> <{dept_loopstart}> <option value="<{dept_id}>" <{selected}> ><{dept_name}></option> <{dept_loopend}> </select> <span class="mandatory-fld"> * </span> </span> </div> <div class="formrow"> <span class=label> {{cTicket_priority}} : </span> <span class="field"> <select name="priority_id" class="singleline-field"> <option value="">{{cSelect}}</option> <{priority_loopstart}> <option value="<{priority_id}>" <{selected}> ><{priority_name}></option> <{priority_loopend}> </select> <span class="mandatory-fld"> * </span> </span> </div> <div class="formrow"> <span class=label> {{cTicket_subject}} : </span> <span class="field"> <input type="text" name="subject" value="{{subject}}" class="textarea-field"> <span class="mandatory-fld"> * </span> </span> </div> <div class="formrow"> <span class=label> {{cTicket_message}} : </span> <span class="field"> <textarea name="message" cols="{{cols}}" rows="{{rows}}" class="textarea-field" id="comments">{{message}}</textarea> <span class="mandatory-fld"> * </span> </span> </div> <{attachment_start}> <div class="formrow"> <span class=label> {{cTicket_attachment}} : </span> <span class="field"> <input type="file" name="attachment" value="" size="50" /> ({{cMax}} {{attachment_size}} {{cKb}}) </span> </div> <{attachment_end}> <div class="formheading"> <span class="label"> {{cProvide_password}} </span> </div> <div class="formrow"> <span class="label"> {{cPassword}} : </span> <span class="field"> <input type="password" name="pass_word" class="singleline-field"> <span class="mandatory-fld"> * </span> </span> </div> <div class="formrow"> <span class="label"> {{cPassword_confirm}} : </span> <span class="field"> <input type="password" name="password_confirm" class="singleline-field"> <span class="mandatory-fld"> * </span> </span> </div> <div class="formrow"> <span class="field"> <input type="submit" name="Submit" value="{{cSubmit}}" class="stdbutton-field" /> <input type="reset" name="reset" value="{{cReset}}" class="stdbutton-field" /> </span> </div> </form> I also have a number of other forms i will want to add this feature too so if anyone edits the code please highlight the part you added for me to see easily and then i can just copy it to my otehr forms. Thanks in advance CC_DESIGN Similar TutorialsI have a problem with my mandatory fields in the fact that i know not on how to make them mandatory. normally on a web page mandatory fields are yellow or sometimes other colours, and the non-mandatory fields are normally white. well i do have 3 yellow boxes on my page and then the rest are white, but the yellow boxes are not mandatory! I would like them to be but they are not. any help on how to make fields mandatory? http://prokix.com/OnlineRegistration.htm is the webpage Hi there, I have created a basic HTML Form but wish to make some fields mandatory. What code do i use to make the fields mandatory Thanks In advance Richard I am trying to amend an existing form so that some fields are mandatory. So far this is what I've have on the script right before </head> tag: Code: <script type="text/javascript"> function checkForm(frm){ msg = ""; if(!frm.name.value){ msg += "- Name is required\n"; } if(!frm.phone.value){ msg += "- Phone is required\n"; } if(!frm.email.value){ msg += "- Email is required\n"; } if(msg != ""){ alert(msg); return false; } } </script> and on at the begining of the form itself I have: Code: <form id="form1" name="form1" method="post" action="contact1.php" onsubmit="return checkForm(this)"> <input type="text" name="name" id="name"><br> <input type="text" name="email" id="email" style="margin-top:3px "><br> <input type="text" name="phone" id="phone" style="margin-top:3px "><br> But when I get the form back on my test email all the fields are empty! Here here my contact.php: PHP Code: <? $subject="Booking Table from ".$_GET['name'] ; $headers= "From: ".$_GET['email']."\n"; $headers.='Content-type: text/html; charset=iso-8859-1'; mail("contactatalexotero.co.uk", $subject, " <html> <head> <title>Book Table</title> </head> <body> <br>Phone Number ".$_GET['phone']." <br>Number of people ".$_GET['people']." <br>Where? ".$_GET['where']." <br>Time ".$_GET['time']." <br>Date ".$_GET['day']."/ ".$_GET['month']."/ ".$_GET['year']." <br>Message ".$_GET['message']." </body> </html>" , $headers); echo ("Your message was successfully sent! We will contact you shortly to confirm your table!"); ?> <script> window.close </script> What do I do wrong? Please help me I'm sure this has a simple solution, but I've tried a variety of search terms online and the books I have and haven't had any luck. I have the following drop down in my code. <select name="releaseDepartment"> <option value="---">---</option> <option value="membership">Membership</option> <option value="program">Program</option> <option value="fundDevelopment">Fund Development</option> <option value="finance">Finance</option> <option value="outdoor">Outdoor</option> </select> What can I add to my code to make this mandatory (if '---' is still selected pop up a window that says "You must select a department for this release.") Thanks. Hello. I was wondering if it's at all possible to have a specific checkbox or radio button checked/selected when the user gets to that page depending on the link they clicked to get to that page. For example, I have a client who wants the user to go to a single form but from different categories (rather than having a form for each), but to make sure the recipient of the email knows which category it came from, the checkbox for that category would already be checked. The user would be able to check it themselves as well, but this ensures it's already selected and creates convenience for the user. Thanks html than php in second post. I cant figre out the code for the checkboxes to get there value. HTML Code: <form name="form2" action="captcha3.php","http://www.mark-10.com/cgi-bin/mailto" method="POST" onsubmit="return ErrorCheck();"> <INPUT TYPE="hidden" NAME="RECIPIENT" VALUE="dm@mark-10.com"> <INPUT TYPE="hidden" NAME="subject" VALUE="Mark-10 Warranty Registration Form"> <INPUT TYPE="hidden" NAME="THANKURL" VALUE="http://www.mark-10.com/thankyou-warranty.html"> <input type="hidden" name="identicalfields" value="email,email2"> <tr> <td align="left" width="627" height="16" colspan="4"><font size="2">1. How did you first become aware of Mark-10 products?</font></td> </tr> <tr> <td align="left" width="627" height="16" colspan="4"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td><input type="checkbox" name="aware[]" value="Internet"><font size="2">Internet</font></td><td width="75%" colspan="3"> <input type="checkbox" name="aware[]" value="Magazine"><font size="2"> Magazine</font><input name="magazine" type="text" size="36"></td></tr> <tr><td><input type="checkbox" name="aware[]" value="Colleague"><font size="2"> Colleague</font></td> <td><input type="checkbox" name="aware[]" value="Exhibition"><font size="2"> Exhibition</font></td> <td><input type="checkbox" name="aware[]" value="Distributor"><font size="2"> Distributor</font></td> <td><input type="checkbox" name="aware[]" value="Mailing"><font size="2"> Mark-10 mailing</font></td> </tr> </table> </td> </tr> <tr> <td align="left" width="627" height="16" colspan="4"></td> </tr> <tr> <td align="left" width="627" height="16" colspan="4"><font size="2">2. Which search engine(s) do you most commonly use when searching for equipment? Check up to two choices.</font></td> </tr> <tr> <td align="left" width="627" height="16" colspan="4"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="25%"><input type="checkbox" name="Q2Google" value="Yes"><font size="2"> Google</font></td> <td width="25%"><input type="checkbox" name="Q2Yahoo" value="Yes"><font size="2"> Yahoo</font></td> <td width="25%"><input type="checkbox" name="Q2MSN" value="Yes"><font size="2"> MSN Search</font></td> <td width="25%"><input type="checkbox" name="Q2Ask" value="Yes"><font size="2"> Ask</font></td> </tr> <tr> <td width="25%"><input type="checkbox" name="Q2GS" value="Yes"><font size="2"> Globalspec</font></td> <td width="25%"><input type="checkbox" name="Q2TR" value="Yes"><font size="2"> Thomas Register</font></td> <td width="50%" colspan="2"> <input type="checkbox" name="Q2Other" value="Yes"><font size="2"> Other </font><input name="Q2OtherName" type="text" size="30"></td> </tr> </table> </td> </tr> <tr> <td align="left" width="627" height="16" colspan="4"></td> </tr> <tr> <td align="left" width="627" height="16" colspan="4"><font size="2">3. Which of the following best describes the primary reason for purchasing this Mark-10 product? Check all that apply.</font></td> </tr> <tr> <td align="left" width="627" height="16" colspan="4"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="25%"><input type="checkbox" name="Q3Size" value="Yes"><font size="2"> Size</font></td> <td width="25%"><input type="checkbox" name="Q3Price" value="Yes"><font size="2"> Price</font></td> <td width="25%"><input type="checkbox" name="Q3Reputation" value="Yes"><font size="2"> Brand reputation</font></td> <td width="25%"><input type="checkbox" name="Q3Warranty" value="Yes"><font size="2"> Warranty</font></td> </tr> <tr> <td width="25%"><input type="checkbox" name="Q3Features" value="Yes"><font size="2"> Features</font></td> <td width="50%" colspan="2"> <input type="checkbox" name="Q3Versatility" value="Yes"><font size="2"> Versatility / Modularity</font></td> <td width="25%"><input type="checkbox" name="Q3Recommendation" value="Yes"><font size="2"> Recommendation</font></td> </tr> </table> </td> </tr> <tr> <td align="left" width="627" height="16" colspan="4"></td> </tr> <tr> <td align="left" width="627" height="16" colspan="4"><font size="2">4. How would you rate the service you received from Mark-10 or your distributor?</font></td> </tr> <tr> <td align="left" width="627" height="16" colspan="4"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="25%"><input type="checkbox" name="Q4Poor" value="Yes"><font size="2"> Poor</font></td> <td width="25%"><input type="checkbox" name="Q4Satisfactory" value="Yes"><font size="2"> Satisfactory</font></td> <td width="25%"><input type="checkbox" name="Q4Good" value="Yes"><font size="2"> Good</font></td> <td width="25%"><input type="checkbox" name="Q4Outstanding" value="Yes"><font size="2"> Outstanding</font></td> </tr> </table> </td> </tr> <tr> <td align="right" width="627" height="16" colspan="4"></td> </tr> <tr> <td align="right" width="627" height="5" colspan="4"> <p align="left">5. Please suggest any improvements to existing Mark-10 products or new product ideas.</td> </tr> <tr> <td align="right" width="627" height="16" colspan="4"> <p align="left"> <textarea name="Q5Improvements" style="width:425px; height: 75px;" rows="1" cols="20"></textarea></td> </tr> <tr> <td height="16" colspan="4"></span>*Please Enter Code-><img src="captcha_image.php" alt="" />: </div> <input name="Security_Code1" type="text" id="Security_Code1" size="15"></td> </tr> <tr> <td align="right" width="627" height="16" colspan="4"> <p align="left"><input name="submit" type="submit" id="scratch_submit" onClick="MM_validateForm('Name','','R','Email','','RisEmail','Address1','','R','City','','R','State','','R','Zip','','R','Tel','','R','ModelNo','','R','SerialNo','','R','PurchDate','','R');return document.MM_returnValue" value="Submit"> <input type="reset" value="Clear" name="Reset"></td> </tr> </table> <table cellspacing="2" width=525 border=0 celpadding="3"> </table> </form></td> HTML Code: <input type="hidden" value="0" name="options[age]"/><input type="checkbox" value="1" name="options[age]"> <xsl:if test="match_result/form_definition/form_values/value[@name = 'options[age]'] = 1"> <xsl:attribute name="checked">checked</xsl:attribute> </xsl:if> </input> Age <input type="hidden" value="0" name="options[already_matched]"/><input type="checkbox" value="1" name="options[already_matched]"> <xsl:if test="match_result/form_definition/form_values/value[@name = 'options[already_matched]'] = 1"> <xsl:attribute name="checked">checked</xsl:attribute> </xsl:if> </input> Include already matched partners I have two checkbox in XLS, but the second is uncheck, while the first one is checked. what is going on? FYI: i did not write these codes How do you creat an unchecked checkbox in ZLS? hi , Iam using checkbox in program in html. when i clicked the checkbox iam geeting required content , but i want to hide the content when i removed the selection on my checkbox.even if i remove the selection content is available , but i want to hide it. if there is any option to do that please sugest me. thanks regards jyothi. Hi there, Can anyone tell me the easiest way to make a form that only allows up to three checkboxes to be ticked? I've got a form with a question that asks 'which three of the following do you agree most with.' and there's about 10 checkboxes. How easy is it to limit the number to three? Many thanks! Hi all! I wanna know how to personalise a checkbox... replacing the check off/on with an image (off and on). Can't find the script anywhere There's one for the radio button, but not for the checkbox Thanx Ray So, just have to say upfront that I don't really know HTML at all but my boss likes to throw me into things and lets me sink or swim. Basically, I need to update a database viewer that he wrote. The first (of sure to be many) problems are check boxes. Currently, when the user chooses a database and table from a drop down box then it shows the table with all the rows and columns showing. Note that the columns change based on the table selected. Now, I need the page to display a list of all the columns in that table as check boxes and when one clicks on a check box, it filters the table to show only the checked columns. I currently have the correct check boxes showing up based on the table but I am having trouble retrieving which columns have been checked for use in the actual filtering. Here's my current version of relevant code: HTML Code: <form name ="columnList"> Column: <c:forEach var="columnitem" items="${columns}"> <c:if test="${columnitem.name != this.document.columnList.name}"> <input type="checkbox" name="${columnitem.name}" id="${columnitem.name}" value="${columnitem.name}">${columnitem.name} </input> </c:if> </c:forEach> <th> <a href="onclick=javascript:setColumnsSelected('<c:out value='${columnitem.name}'/>')" </a> </th> </form> Code: function setColumnsSelected(column){ var colList = new Array(); if(this.document.getElementById(column).checked == true) colList.add(column); else colList.remove(column); } colList isn't used yet, but it will be. Can anyone help me out? Be gentle, I really have no clue what I'm doing. I have a simple HTML page that I would like to have 2 checkboxes available for the user to click. Now where this gets a little different: I do not want to have this "form" to function as a normal form, as this webpage is generated and displayed from within a desktop application (as a template). I essentially just want the user to click a checkbox and then click the print button from within the desktop application and have the webpage print with the checkbox checked. I am running into a problem because the checkbox that the user checked clears out when the user clicks the print button. I am assuming this is because I do not have any sort of "submit" method being used for this form (as it is just essentially a display for the user to check off an option that should then be printed as displayed on the screen). Is this at all possible? I am restricted to using HTML, CSS and XSL to build these web templates that are displayed in the desktop application so asp, javascript etc is not an option. Thanks for any help. Hi Guys, I've got 90 checkboxes in a table in a form on my index.html page. i.e: Code: <input type="checkbox" name="2e" id="2e"/> I would like one checkbox to be initially checked depending on the url used to get there e.g. Code: http://mysite.com/book/index?2e or http://mysite.com/book/index?2e=yes Any Ideas? Thanks, Leigh I have a page that has a checkbox. The checkbox is initially checked/unchecked depending on a value in a table. (Of course, the user has the ability to change this value once the page loads, this is just used for the initial value). The following code works, but does not validate using XHTML 1.0 STRICT: Code: <input type = 'checkbox' Name="chkComplete <?PHP print $chkComplete; ?> >Would you like to mark the item as completed? I know to validate to XHTML strict, I would need to code as either checked="checked" or unchecked="unchecked". How can I incorporate this into the PHP print or echo command so that the line will validate? Thanks. Hi: I would like to have a checkbox select input where I have approx 24 items for the user to select from. However, I want the user to *priority-order* his selections and have him/her select only a max of 8 of the 24 items. Instead of a 'checkmark, I would like to see the digits '1' up to '8' in the check boxes, which would indicate his priority order of choices. If this is impossible, can you suggest an alternative. (I don't want a drop-down list, I would prefer a 6-row, 4-column table of checkbox inputs). btw, this will be used by service providers to tell us which services they can/will provide to our Senior's Park, and in what priority they rate their various capabilities (from tree-pruning thru painting, thru yard cleanup, thru plumbling, re-modelling, etc). Thanks, -Mel Smith Hello, I am having troubles getting the below to work. Can someone help me out? Thanks in advanced. How do i get the below to work? Java if (document.orderform.terms.value== false) { alert("You must agree to our terms and conditions before an order can be processed") document.orderform.terms.focus() return false } HTML: <p>By clicking on the below you have read and agree to our terms and conditions</p> <input type="checkbox" name="terms" /><p>I Agree</p> Hi I have a dropdown list with three options and three checkbox. I need to know how to make it as everytime option 1 is selected checkbox 1 is checked ( i need this for integration purposes checkboxes are hidden). Thanks in advance i want to create a checkbox which is checked initially, and users cannot discheck it. I mean this checkbox is checked all the time, no matter user click it or not. Please help me. Thank u! This question is a little out there. Hopefully someone might have a creative strategy. I'm trying to make different areas in an image map select different check boxes next to the image on the page. Is there any possible way to do this using HTML, javascript, anything? Any help would be appreciated. My form includes two checkboxes: Code: Remember password? <input type="checkbox" name="rememberPassword" value="on" checked/> <b><i><font color="#35A02C"> (deselect if using a public computer)</font></i></b><br/> Automatic login? <input type="checkbox" name="autoLogin" value="on" checked/><br/> How can I make it so that if the user deselects the first checkbox, the second will be automatically deselected aswell? Thanks, James |