Issue with form:select, all labels are selected - spring

I am using spring 3 JSP tab lib to generate HTML. I have a select box with following code -
<form:select path="categoryList" multiple="false">
<form:option value="" label="--" selected="selected"/>
<form:options items="${categoryList}" itemValue="catId" itemLabel="catName"/>
</form:select>
HTML getting generated is -
<select id="categoryList" name="categoryList">
<option selected="selected" value="">--</option>
<option value="1" selected="selected">S</option>
<option value="2" selected="selected">Ster</option>
<option value="3" selected="selected">ice</option>
<option value="4" selected="selected">Cees</option>
</select>
Issue is all options getting generated has selected="selected" which makes "Cees" selected on page rather then "--". Can someone please let me know ohw to fix this?
complete page -
<form:form modelAttribute="productManagerVO" name="productManager" id="productManager">
<jsp:directive.include file="../common/header.jsp" />
<div class="MainDiv">
<div class="ManagerHeadline">Product Manager</div>
<table cellspacing="2px" cellpadding="0" width="100%">
<tr>
<td width="100%">
<fieldset>
<legend class="checkoutlegend">Category Information</legend>
<table align="left" id="addCategoryTable">
<tr><td><input type="button" id="addCat" value="Add New Category" /></td></tr>
</table>
<c:if test="${not empty productManagerVO.categoryList}">
<table cellspacing="2px" cellpadding="0" class="timeTable" id="categoryTable">
<th>Name</th>
<th>Order</th>
<th>Active</th>
<th> </th>
<c:forEach var="categoryListVO" items="${productManagerVO.categoryList}" varStatus="item">
<tr>
<td><c:out value="${categoryListVO.catName}" /></td>
<td><c:out value="${categoryListVO.catOrder}" /></td>
<td><c:if test="${categoryListVO.categoryActive}">Yes</c:if>
<c:if test="${!categoryListVO.categoryActive}">No</c:if>
</td>
<td>edit</td>
</tr>
</c:forEach>
</table>
</c:if>
</fieldset>
</td>
</tr>
<tr>
<td width="100%">
<fieldset>
<legend class="checkoutlegend">Product Information</legend>
<table align="left" id="addProductTable">
<tr>
<td><input type="button" id="addPro" value="Add New Product"/></td>
</tr>
</table>
<table cellspacing="2px" cellpadding="0" class="timeTable" id="productTable">
<col width="10%" />
<col width="7%" />
<col width="40%" />
<col width="10%" />
<col width="5%" />
<col width="6%" />
<col width="7%" />
<col width="10%" />
<col width="5%" />
<tr>
<th>Name</th>
<th>Subname</th>
<th>Description</th>
<th>Veg</th>
<th>Spicy</th>
<th>Is Active</th>
<th>Price</th>
<th>Category</th>
<th> </th>
</tr>
<c:if test="${not empty productManagerVO.productList}">
<c:forEach var="productListVO" items="${productManagerVO.productList}" varStatus="item">
<tr>
<td><c:out value="${productListVO.fName}" /></td>
<td><c:out value="${productListVO.fSubname}" /></td>
<td><c:out value="${productListVO.fDesc}" /></td>
<td><c:if test="${productListVO.fVeg}">Yes</c:if>
<c:if test="${!productListVO.fVeg}">No</c:if></td>
<td><c:if test="${productListVO.fSpicy}">Yes</c:if>
<c:if test="${!productListVO.fSpicy}">No</c:if></td>
<td><c:if test="${productListVO.fActive}">Yes</c:if>
<c:if test="${!productListVO.fActive}">No</c:if></td>
<td><c:out value="${productListVO.fPrice}" /></td>
<td><c:out value="${productListVO.categoryName}" /></td>
<td><a id="product" href="#editProduct" onclick="editProductData('${productListVO.fId}')">edit</a></td>
</tr>
</c:forEach>
</c:if>
</table>
</fieldset>
</td>
</tr>
</table>
</div>
<div style="display:none">
<div id="addCategory">
<table cellspacing="2px" cellpadding="0" class="adminTable" style="border:1px solid #dadada;">
<tr>
<td style="font-weight:bold;">Category Name</td>
<td><input type="text" id="caddName" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Category Description</td>
<td><input type="text" id="caddDesc" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Category Order</td>
<td><input type="text" id="caddOrder" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Active</td>
<td>Yes <input type="radio" value="y" name="catActive"/> No <input type="radio" value="n" name="catActive"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="cSave" name="catSave" value="Submit" onclick="addNewCategory();"/></td>
</tr>
</table>
</div>
<div id="editCategory">
<table cellspacing="2px" cellpadding="0" class="adminTable" style="border:1px solid #dadada;">
<tr>
<td style="font-weight:bold;">Category Name</td>
<td><input type="text" id="ceName" name="ceName"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Category Description</td>
<td><input type="text" id="ceDesc" name="ceDesc"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Category Order</td>
<td><input type="text" id="ceOrder" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Active</td>
<td><input type="radio" id="ceActiveY" name="cateActive" value="y"/> Yes
<input type="radio" id="ceActiveN" name="cateActive" value="n"/> No</td>
</tr>
<tr><td colspan="2"><input type="button" id="cSave" name="catSave" value="Submit" onClick="editSaveCategory();"/></td>
<td><input type="hidden" id="ceId"/></td>
</tr>
</table>
</div>
<div id="addProduct">
<table cellspacing="2px" cellpadding="0" class="adminTable" style="border:1px solid #dadada;">
<tr>
<td style="font-weight:bold;">Product Name</td>
<td><input type="text" id="paName" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Product SubName</td>
<td><input type="text" id="paSubName" /></td>
</tr>
<tr>
<td style="font-weight:bold;"> Product Description</td>
<td><input type="text" id="paDesc" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Price</td>
<td><input type="text" id="paPrice" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Vegetarian</td>
<td>Yes <input type="radio" id="paVeg" name="proVeg" value="y"/> No <input type="radio" id="paVeg" name="proVeg" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Spicy</td>
<td>Yes <input type="radio" id="paSpicy" name="proSpicy" value="y"/> No <input type="radio" id="paSpicy" name="proCpicy" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Active</td>
<td>Yes <input type="radio" id="paActive" name="proActive" value="y"/> No <input type="radio" id="paActive" name="proActive" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Category</td>
<td>
<form:select path="categoryList" multiple="single">
<form:option value="" label="--"/>
<form:options items="${productManagerVO.categoryList}" itemValue="catId" itemLabel="catName"/>
</form:select>
</td>
</tr>
<tr>
<td colspan="2"><input type="button" id="caSave" name="cataSave" value="Submit"/></td>
</tr>
</table>
</div>
<div id="editProduct">
<table cellspacing="2px" cellpadding="0" class="adminTable" style="border:1px solid #dadada;">
<tr>
<td style="font-weight:bold;">Product Name</td>
<td><input type="text" id="peName" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Product SubName</td>
<td><input type="text" id="peSubName" /></td>
</tr>
<tr>
<td style="font-weight:bold;"> Product Description</td>
<td><input type="text" id="peDesc" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Price</td>
<td><input type="text" id="pePrice" /></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Vegetarian</td>
<td>Yes <input type="radio" id="peVegY" name="proeVeg" value="y"/> No <input type="radio" id="peVegN" name="proeVeg" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Spicy</td>
<td>Yes <input type="radio" id="peSpicyY" name="proeSpicy" value="y"/> No <input type="radio" id="peSpicyN" name="proeSpicy" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Is Active</td>
<td>Yes <input type="radio" id="peActiveY" name="proeActive" value="y"/> No <input type="radio" id="peActiveN" name="proeActive" value="n"/></td>
</tr>
<tr>
<td style="font-weight:bold;">Category</td>
<td>
<form:select path="categoryList" multiple="single" id="peCat">
<form:option value="" label="--"/>
<form:options items="${productManagerVO.categoryList}" itemValue="catId" itemLabel="catName"/>
</form:select>
</td>
</tr>
<tr><td>
<td colspan="2"><input type="button" id="peSave" name="proeSave" value="Submit" onClick="editSaveProduct();"/></td>
<input type="text" id="peId"/></td>
</tr>
</table>
</div>
</div>
</form:form>

Try removing the selected=selected on your first item. I don't think its necessary as the list will display in the order you specified - unless you want -- to be the default selection if the form is submitted without this select being touched?

Try this:
<form:select path="categoryList" multiple="single">
<form:option value="" label="--"/>
<form:options items="${categoryList}" itemValue="catId" itemLabel="catName"/>
</form:select>
I've only changed the multiple attribute and removed the selected attribute from the option. This works for me...and i think, must also work for you.
edit:
It seems to be okay, only your last <tr> is wrong...you have two <td> in a row, without </td>
<tr>
<td>
<td colspan="2">
<input type="button" id="peSave" name="proeSave" value="Submit" onClick="editSaveProduct();"/>
</td>
<input type="text" id="peId"/>
</td>
</tr>
must be something like
<tr>
<td>
<input type="button" id="peSave" name="proeSave" value="Submit" onClick="editSaveProduct();"/>
</td>
<td colspan="2">
<input type="text" id="peId"/>
</td>
</tr>
Second, why are you using c:out? You can replace <td><c:out value="${categoryListVO.catName}" /></td> with <td>${categoryListVO.catName}</td>...
Third - this construction
<td><c:if test="${productListVO.fActive}">Yes</c:if>
<c:if test="${!productListVO.fActive}">No</c:if></td>
can you replace with
<c:choose>
<c:when test="${productListVO.fActive}">
Yes
</c:when>
<c:otherwise>
No
</c:otherwise>
</c:choose>
I find this way better...the rest seems to be okay, i can't find anything, what can cause the problem. Search for other not properly closed tags. Is there any warnings/messages from the jsp editor?

I had this problem, and after a lot of digging around in Spring I found what was causing it for me. It was something very specific in my case but there is a general point, which is this.
Spring goes to a great deal of trouble to try to work out what the selected option should be. I started digging around in the OptionWriter and then moved down into the SelectedValueComparator. This tries all manner of comparisons to work out if the current option value should be selected. In the end it falls back to the Propertyeditors and Converters (which is where my mistake was).
So I wonder if your CategoryList class had a badly implemented equals method or a converter that doesn't convert properly (mine always converted into the same object)?

Related

Fckeditor to ckeditor4

Issue:
Starting off my issue is that my content does not appear for me to edit.
I can see it on my front end, but not the backend.
Likely due to the old fckedit program.
Im trying to figure out the next step to replace the old FCKeditor within my page with ckeditor4.
My site was custom built from scratch (I didn't build it). I have the ckeditor4 loaded in my include folder and I was able to test it using my URL.
However, I can't get it to work on the page or show my content that is not reachable on the backend.
Here is my page coding:
{include file='siteadmin/header.tpl'}
{include file='siteadmin/left.tpl'}
<h1>{if $action eq 'add'}Add{else}Edit{/if} Page</h1>
<form method="post" action="{$_conf_vars.ADMIN_URL}index.php?opt={$opt}&a={$action}{$qstr}" name="frm" id="frm" enctype="multipart/form-data">
{if $show_msg ne ''}
{$show_msg}
{/if}
<input type="hidden" name="page_id" id="page_id" value="{$page_id}" />
<input type="hidden" name="alias_id" id="alias_id" value="{$alias_id}" />
<input type="hidden" name="page_title" id="page_title" value="{$page_title|#StripSlash}" />
<input type="hidden" name="adapters" id="adapters" value="1" />
<input type="hidden" name="btn" value="{$action}" />
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="listdata">
<tr>
<td><div align="right">Page Title:<span class="star">*</span></div></td>
<td><input type="text" id="page_title" name="page_title" value="{$page_title|#StripSlash}" maxlength="300" style="width:532px;"/></td>
</tr>
<tr>
<td><div align="right">Page Alias:<span class="star">*</span></div></td>
<td><input type="text" name="page_alias" maxlength="100" id="page_alias" value="{$page_alias|#StripSlash}" size="60" />
<em>(a-z, 0-9, hyphen (-) only)</em></td>
</tr>
<tr>
<td valign="top"><div align="right">Description:<span class="star">*</span></div></td>
<td>
{php}
$sBasePath = $_conf_vars['ROOT_URL'].'include/fckeditor/';
$oFCKeditor = new FCKeditor('page_body') ;
$oFCKeditor->BasePath = $sBasePath ;
$oFCKeditor->ToolbarSet ="Default";
$oFCKeditor->Value = StripSlash($this->get_template_vars('page_body')) ;
$oFCKeditor->Height = 500;
$oFCKeditor->Width = 700;
$oFCKeditor->Create() ;
{/php}
</tr>
<tr>
<td width="31%"><div align="right">Meta Title:</div></td>
<td width="69%"><textarea name="meta_title" id="meta_title" rows="4" cols="100">{$meta_title|#StripSlash}</textarea></td>
</tr>
<tr>
<td><div align="right">Meta Keywords:</div></td>
<td><textarea name="meta_keywords" id="meta_keywords" rows="4" cols="100">{$meta_keywords|#StripSlash}</textarea>
<br/><small> <small>Separated by commas</small></small></td>
</tr>
<tr>
<td><div align="right">Meta Description:</div></td>
<td><textarea name="meta_desc" id="meta_desc" rows="4" cols="100">{$meta_desc|#StripSlash}</textarea></td>
</tr>
<tr>
<td width="270"> </td>
<td width="689" align="right"> {if $action eq "add" or $action eq "more"}
<button type="submit" onclick="document.frm.btn.value = 'success';">Add and Go To Listing</button>
<button type="submit" onclick="document.frm.btn.value = 'more';">Add More</button>
{else}
<button type="submit" onclick="document.frm.btn.value = 'update';">Update and Go To Listing</button>
{/if}
<button type="button" onclick="window.location.href='index.php?opt={$opt}{$qstr}'">Cancel</button></td>
</tr>
</table>
</form>
{include file='siteadmin/footer.tpl'}
Thank you,
leon

how to remove validation message created by validator when reseting form in laravel octobercms

form validation:
Component
public function onContact()
{
$input = post();
//$contact = Contact::create($input);
$rules = [
'name' => 'required|alpha',
'designation' => 'required',
'note' => 'required',
'contactNo' => 'required|numeric|max:10',
'emailIdText' => 'required|email',
'companyName' => 'required'
];
$validator = Validator::make($input, $rules);
if ($validator->fails()) {
throw new ValidationException($validator);
} else {
$contact = new Contact;
$contact->name = $input['name'];
$contact->designation = $input['designation'];
$contact->note = $input['note'];
$contact->inquiry_about = $input['option'];
$contact->email_id = $input['emailIdText'];
$contact->contact_no = $input['contactNo'];
$contact->company_name = $input['companyName'];
$contact->save();
}
}
default.htm
<form id="myform" autocomplete="off" action="{{ 'contactUs'|page }} "
data-request="{{ __SELF__ }}::onContact" data-request-validate data-request-flash
method="post" name="myform" class="contact-form">
<table height="" cellpadding="0" cellspacing="15" class="contactUs">
<tbody>
<tr >
<td class="Fieldname" >Inquiry About : </td>
<td valign="top" >
<select class="comboFieldontact" name="option" id="option" >
<option value="Existing Client" selected>Existing Client</option>
<option value="Prospect">Prospect</option>
<option value="Media">Media</option>
<option value="Investor">Investor</option>
<option value="Association">Association</option>
<option value="Career">Career</option>
</select>
<span class="Error" data-validate-for="inquiry_about" id="optionTextError" ></span>
</td>
</tr>
<tr>
<td valign="top" class="Fieldname">Name :</td>
<td valign="top">
<input type="text" id="name" name="name" class="textFieldContact">
<span class="Error" data-validate-for="name" id="nameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Email : </td>
<td valign="top">
<input type="text" id="contactemailIdText" name="emailIdText" class="textFieldContact" >
<span class="Error" data-validate-for="emailIdText" id="contactemailIdTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Contact No :
</td>
<td valign="top">
<input type="text" maxlength="15" id="contactNo" name="contactNo" class="textFieldContact"
>
<span class="Error" data-validate-for="contactNo" id="contactNoTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Company Name :</td>
<td valign="top">
<input type="text" id="companyName" name="companyName" class="textFieldContact"
>
<span class="Error" data-validate-for="companyName" id="companyNameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Designation :</td>
<td valign="top">
<input type="text" id="designation" name="designation" class="textFieldContact" >
<span class="Error" data-validate-for="designation" id="designationTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"> Note :</td>
<td valign="top">
<textarea class="textarea" name="note" id="note" style="color: #000;" ></textarea>
<span class="Error" data-validate-for="note" id="fromTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"></td>
<td valign="top">
<input type="submit" class="contactBtn" value="Submit" >
<input type="reset" id="resetbtn" class="contactBtn" value="Reset">
</td>
</tr>
</tbody>
</table>
</form>
form validation is perfectly fine but i want to reset form along with validation error message how can i do this?
when clicking to reset button input in input fields resets but error msgs are still shown......................................................
what should i do
Here, use this JavaScript code to clear out all of your tags that have an error class.
<script>
function clearErrors() {
var form = document.getElementById('myform').querySelectorAll('span.Error');
for (i=0; i<=form.length; i++) {
form[i].innerText = '';
}
}
</script>
<form id="myform" autocomplete="off" action="{{ 'contactUs'|page }} "
data-request="{{ __SELF__ }}::onContact" data-request-validate data-request-flash
method="post" name="myform" class="contact-form">
<table height="" cellpadding="0" cellspacing="15" class="contactUs">
<tbody>
<tr >
<td class="Fieldname" >Inquiry About : </td>
<td valign="top" >
<select class="comboFieldontact" name="option" id="option" >
<option value="Existing Client" selected>Existing Client</option>
<option value="Prospect">Prospect</option>
<option value="Media">Media</option>
<option value="Investor">Investor</option>
<option value="Association">Association</option>
<option value="Career">Career</option>
</select>
<span class="Error" data-validate-for="inquiry_about" id="optionTextError" ></span>
</td>
</tr>
<tr>
<td valign="top" class="Fieldname">Name :</td>
<td valign="top">
<input type="text" id="name" name="name" class="textFieldContact">
<span class="Error" data-validate-for="name" id="nameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Email : </td>
<td valign="top">
<input type="text" id="contactemailIdText" name="emailIdText" class="textFieldContact" >
<span class="Error" data-validate-for="emailIdText" id="contactemailIdTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Contact No :
</td>
<td valign="top">
<input type="text" maxlength="15" id="contactNo" name="contactNo" class="textFieldContact"
>
<span class="Error" data-validate-for="contactNo" id="contactNoTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Company Name :</td>
<td valign="top">
<input type="text" id="companyName" name="companyName" class="textFieldContact"
>
<span class="Error" data-validate-for="companyName" id="companyNameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Designation :</td>
<td valign="top">
<input type="text" id="designation" name="designation" class="textFieldContact" >
<span class="Error" data-validate-for="designation" id="designationTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"> Note :</td>
<td valign="top">
<textarea class="textarea" name="note" id="note" style="color: #000;" ></textarea>
<span class="Error" data-validate-for="note" id="fromTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"></td>
<td valign="top">
<input type="submit" class="contactBtn" value="Submit" >
<button type="reset" onclick="clearErrors()">Reset</button>
</td>
</tr>
</tbody>
</table>
</form>
Did you try to hide the elements with the class 'error' with jQuery by clicking on the reset button ?
Another method is to change the reset button with an empty href. By clicking on the button it will refresh the page and the form I guess.

Extracting and restricting time from the date object in a textbox

I have searched everywhere but cannot find an answer for this particular question that I have.
I'm making a pizza ordering website and instead of having a simple drop-down option for the time of pick-up or delivery field, we are required to have a text field so that the customer can manually enter the time themselves. I then need to validate the value of time by using DATE object to make sure it is between 6am and 11pm. Time must include am or pm.
Here is what I have so far:
<html>
<head>
<title>
Pizza Form
</title>
</head>
<body>
<script>
//Creating the function to extract the time
function getTime() {
var d = new Date();
d.setHours();
document.getElementById("pickTime").innerHTML = d;
}
}
</script>
<h1>Pizza Order Form</h1>
<form>
<fieldset><Legend>Is this for delivery or carryout?</legend>
<table >
<tr>
<td><input type="radio" name="DoC" id="forDelivery">Delivery <font color="red" size="1.px">extra 30% of total</font></input></td>
<td><input type="radio"name="DoC" id="forCarry">Carryout</td>
</tr>
<tr>
<td>Delivery/Pickup Time</td>
<td><input type="text" id="pickTime" value= "" onkeypress="return getTime()"> <font color="red" size="1.px" >Time should be between 6am and 11pm</font></td>
</tr>
</table>
</fieldset>
<fieldset><legend>Customer Info</legend>
<table >
<tr>
<td>First and Last Name</td>
<td><input type="text" id="flname"></td>
</tr>
<tr>
<td align="left">Address<br/ ><font color="red" size="1.px" id="address">Not required if takeout</font></td>
<td><textarea rows="4" cols="50" id="address"></textarea></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="text" id="phonenumber"></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" id="email"></td>
</tr>
</table>
</fieldset>
<fieldset><legend>Choose Size and Crust</legend>
<table style="width:100%" >
<tr>
<th align="left">Hand Tossed</th>
<th align="left">Handmade Pan</th>
<th align="left">Crunchy Thin crust</th>
<th align="left">Brooklyn Style</th>
</tr>
<tr>
<td><input type="radio"name="type" id="SHT" value="8">Small (10"-$8)</td>
<td><input type="radio"name="type" id="MHP" value"10">Medium (12"-$10)</td>
<td><input type="radio"name="type" id="MCTC" value="10">Medium (12"-$10)</td>
<td><input type="radio"name="type" id="LBS" value="13">Large (14"-13$)</td>
</tr>
<tr>
<td><input type="radio"name="type" id="MHT" value="9">Medium (12"-$9)</td>
<td></td>
<td><input type="radio"name="type" id="LCTC" value="12">Large (14"-$12)</td>
<td><input type="radio"name="type" id="XLBS" value="15">X-Large (16"-$15)</td>
</tr>
<tr>
<td><input type="radio"name="type" id="LHT" value="10">Large (14"-$10)</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="radio"name="type" id="XLHT" value="11">X-Large (16"-$11)</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</fieldset>
<fieldset><legend> Choose Cheese & Sauce</legend>
<table >
<tr>
<td width="58%">Cheese?</td>
<td>Sauce?</td>
</tr>
<tr>
<td>
<select size="6">
<option id="nocheese" value="0">No Cheese</option>
<option id="lightcheese" value="1">Light - $1.00</option>
<option id="normalcheese" value="1.25">Normal - $1.25</option>
<option id="extracheese" value="1.5">Extra - $1.50</option>
<option id="dblcheese" value="1.75">Double - $1.75</option>
<option id="tplcheese" value="2">Triple - $2.00</option>
</select>
</td>
<td valign="top">
<select size="4">
<option id="nosauce" value="0">No Sauce</option>
<option id="lightsauce" value="0.5">Light - $0.50</option>
<option id="normalsauce" value="1">Normal - $1.00</option>
<option id="extrasauce" value="1.5">Extra - $1.50</option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset><legend> Toppings (You can choose more than one - $2 each)</legend>
<table >
<tr>
<td width="50%"
><input type="checkbox" id="pepporoni" value="2">Pepporoni</td>
<td><input type="checkbox" id="blackolive" value="2">Black Olives</td>
</tr>
<tr>
<td><input type="checkbox" id="mushroom" value="2">Mushrooms</td>
<td><input type="checkbox" id="greenpepper" value="2">Green Peppers</td>
</tr>
<tr>
<td><input type="checkbox" id="onions" value="2">Onions</td>
<td><input type="checkbox">Pineapple</td>
</tr>
<tr>
<td><input type="checkbox" id="sausage" value="2">Sausage</td>
<td><input type="checkbox" id="spinach" value="2">Spinach</td>
</tr>
<tr>
<td><input type="checkbox" id="bacon" value="2">Bacon</td>
</table>
</fieldset>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
Here's what the website looks like so far
If you are using HTML5 you can use a time input, like this:
<INPUT id="MyId" name="MyName" type="time">
More information on HTML5 input types.
If you are not using HTML5, you'll have to write a bit of script, or use one of many jquery time picker plugins available freely.

reCAPTCHA keep saying incorrect-captcha-sol

I have this form
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<tr>
<td width="32%" valign="top"> <strong class="main_title">Select Category: </strong></td>
<td width="68%" valign="top" class=""><? $qu="SELECT `id`,`name` FROM `linkvideos_category` WHERE `status` = '1'"; $rs=$Q($qu); ?>
<select name="category" class="blacktext" >
<option>Choose Category</option>
<? while($dis=$F($rs)) { ?>
<option value="<?=$dis['id']?>"> <?=$dis['name'];?></option>
<? } ?>
</select></td>
</tr>
<tr>
<td colspan="2" valign="top" class=""> </td>
</tr>
<tr>
<td valign="top"> <strong class="main_title">Upload Image: </strong></td>
<td valign="top" class=""><input type="file" name="imagefile" /> </td>
</tr>
<tr>
<td colspan="2" valign="top" class=""> </td>
</tr>
<tr>
<td valign="top"> <strong class="main_title"> Your Link : </strong></td>
<td valign="top" class=""><input name="link" type="text" size="50" /></td>
</tr>
<tr>
<td colspan="2" valign="top" class=""> </td>
</tr>
<tr>
<td valign="top"> <strong class="main_title"> Link Title : </strong></td>
<td valign="top" class=""><input name="linkname" type="text" size="50" /></td>
</tr>
<tr>
<td colspan="2" valign="top" class=""> </td>
</tr>
<tr>
<td valign="top"> <strong class="main_title">Description:</strong></td>
<td valign="top"><label>
<textarea name="desc" cols="40" rows="10"></textarea>
</label></td>
</tr>
<tr>
<td valign="top"> <strong class="main_title">Security Code:</strong></td>
<td valign="top">
<? if ($error==3) { ?>
<font color="red">Invalid Code Entered</font>
<?}?>
<?php
require_once('captcha/recaptchalib.php');
echo recaptcha_get_html($public_key);
?></td>
</tr>
<tr>
<td colspan="2" valign="top" class=""> </td>
</tr>
<tr>
<td colspan="2" valign="top" class=""> </td>
</tr>
<tr>
<td colspan="2" align="center" valign="top" class=""><input type="submit" name="Submit" value="Submit" class="btns" onclick="javascript:return check();" /></td>
</tr>
</form>
and i'm verifying the captcha with this
$resp = recaptcha_check_answer ($private_key,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
$error = 3;
echo"<script>window.location='submit_linkvideo.php?error=3';</script>";
}
and every time it's telling me the captchas invalid and saying incorrect-captcha-sol, am I missing something? I've tested it and the recaptcha values arn't being submitted.
Fixed it by ending a table before the form then starting the table again once inside the form.

Coldfusion forms and image upload with cffile

I'm learning some Coldfusion, and I'm having trouble with this small form based application I'm building for a coworker.
Here is the first page: http://pastebin.com/aLPYHPsF
As you can see, what I want to do is get the user input and take that input and output it to html. The text stuff works fine, but I can't get the image to upload! What I want to do is have the user click upload, get a confirmation, then click submit and they are sent to the generated html (cfm) page. On the page is a resized version of the image they uploaded.
Please tell me what I'm doing wrong! Right now when "upload" is clicked, the form just dumps.
It's because of you forgot to assign enctype="multipart/form-data" to your first cfform. I've edited some of your coding. Check it out.
<cfset strPath = ExpandPath( "./" ) />
<cfset strPath = GetDirectoryFromPath(GetCurrentTemplatePath()) />
<table width="100%">
<tr>
<td align="center">
<cfform name="ecaform" action="ecagenerator.cfm" enctype="multipart/form-data">
<table style="font-family: arial; font-size: 9pt">
<tr><td height="30px" align="center" colspan="2" style="background-color: #020058; color: #FFFFFF; font-family: arial;">
<b>ECA Newsletter Creation Form</b>
</td>
</tr>
<tr><td height="20"></td></tr>
<tr>
<td>Earned from:</td>
<td>
<cfinput
type="radio"
name="earnedfrom"
value="UC">
UC
<cfinput
type="radio"
name="earnedfrom"
value="ECA">
ECA
</td>
</tr>
<tr>
<td>First Name:</td>
<td>
<cfinput
name="firstname">
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<cfinput
name="lastname">
</td>
</tr>
<tr>
<td>Instructor's Name:</td>
<td>
<cfinput
name="instructorname">
</td>
</tr>
<tr>
<td>Date (MM/DD/YYYY):</td>
<td>
<cfinput
name="date">
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<cfinput
type="radio"
name="sex"
value="male">
Male
<cfinput
type="radio"
name="sex"
value="female">
Female
</td>
</tr>
<tr>
<td>Certificate Type:</td>
<td>
<cfinput
type="radio"
name="certtype"
value="Private">
Private
<cfinput
type="radio"
name="certtype"
value="Recreational">
Recreational
<cfinput
type="radio"
name="certtype"
value="Commercial">
Commercial
</td>
</tr>
</table>
<table style="font-family: arial; font-size: 9pt; margin-top: 20 px;">
<tr>
<td>
Upload the photo:
</td>
</tr>
<tr>
<td>
<cfif isDefined("form.fileUpload")>
<cffile action="upload"
fileField="fileUpload"
destination="#strPath#"
accept="image/*">
<cfimage action="resize"
width="200"
height="200"
source="#strPath##file.serverfile#"
destination="#strPath##file.serverfile#"
overwrite="yes">
<img src="<cfoutput>#file.serverfile#</cfoutput>">
</cfif>
</td>
</tr>
<tr>
<td>
<form enctype="multipart/form-data"
method="post">
<input type="file"
name="fileUpload" /><br /><br />
<input type="submit"
value="Submit"
action="ecagenerator.cfm" />
</form>
</td>
</tr>
</table>
<table style="margin-top: 20px;">
<tr>
<td>
<cfinput
type="submit"
name="Submit"
value="Submit">
</td>
</tr>
</table>
</cfform>
</td>
</tr>
</table>
You might want to look into using <cfdiv> for the image upload section. Basically you want the form for image uploading be inside the <cfdiv>, so that the form is submitted through ajax. Have the image form action post to a previewImage.cfm that uses <cffileupload>, validate with isImageFile() if it is an image file, then use <cfimage> to resize it and display a thumbnail (may use action="writetobrowser"). The easiest way to associate the uploaded image with the parent form would be storing the file path in Session I guess, if you don't want to code up extra Javascript.

Resources