I have a form inside an html table.
I am dynamically adding input fields to a form through jquery. When I took var dump while submitting the form, the $_POST array does not have the added fields. Why is it happening?
Here is how my js looks like:
$('#add-more-del-areas').live('click',function(e){
var del_area_count = $('[name=number_of_delivery_areas]').val();
var new_count = (parseInt(del_area_count)+1);
var tr_html = '<tr>'+
'<td style="padding:10px 0px 0px 10px;"><strong>Delivery Area '+new_count+'</strong></td>'+
'<td>'+
'<input name="d_area'+new_count+'" type="text" size="50" value=""/>'+
'<div class="area-display-container" id="test'+new_count+'-display"></div>'+
'<div>'+
'<input class="auto-suggest-input" type="text" autocomplete="off" id="test'+new_count+'"/>'+
'<div class="test-content" id="test'+new_count+'-content"></div>'+
'</div>'+
'</td>'+
'</tr>'+
'<tr id="del_area-'+new_count+'" bgcolor="#FF9933">'+
'<td style="padding:10px 0px 0px 10px;"><strong>Dilivery charges for area '+new_count+'</strong></td>'+
'<td><input name="m_order'+new_count+'" type="text" size="50" value="0"></td>'+
'</tr>';
//$('#del_area-'+del_area_count).after(tr_html);
$(tr_html).insertAfter('#del_area-'+del_area_count);
big_cms.auto_suggest_({id: 'test'+new_count,input_field: 'd_area'+new_count});
$('[name=number_of_delivery_areas]').val(new_count);
e.preventDefault();
});
Though html is pathetic and too long still, here it is:
<table width="840" border="0" cellpadding="0" cellspacing="0" style="border: #57414D 4px Solid; margin:auto;">
<tr>
<td height="20px" bgcolor="#57414D" align="center" colspan="2"><span style="font-family:arial; font-size:13px; color:#ffffff"><b>You can add/edit Restaurant/Management content here!!</b></span></td>
</tr>
<?php
if ($bgclass == "bgExtraLightGray")
$bgclass = "bgWhite";
else
$bgclass = "bgExtraLightGray";
?>
<form name="frmCatPopup" method="POST" enctype="multipart/form-data" onSubmit="return ValidateContactForm();">
<tr align="center" bgcolor="#FF9933" class="<?php echo($bgclass); ?>">
<td colspan="2" class="note"> <?php echo($errMsg); ?></td>
</tr>
<tr>
<td width="40%" class="heading1" style="padding-left:10px"><strong>Register Name</strong></td>
<td width="60%" style="padding-bottom:4px;"><select name="name" class="restar_txtbox" style="width:326px;">
<?php
$quer_l="select * from ".$tableprefix."restaurant_sign_up";
$cmd_l=mysql_query($quer_l);
while($res_l=mysql_fetch_array($cmd_l))
{
?>
<option value="<?php echo $res_l['fld_id']; ?>" <?php if($rs['signup_id']==$res_l['fld_id']) echo"selected";?>><?php echo $res_l['fld_contact_person']; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr bgcolor="#FF9933">
<td width="40%" class="heading1" style="padding-left:10px"><strong>Restaurant Name</strong></td>
<td><input type="text" name="rest_name" size="50" value="<?php echo $rs['fld_name'];?>"/></td>
</tr>
<tr>
<td class="heading1" style="padding:4px 0 4px 10px;"><strong>Address</strong></td>
<td style="padding:4px 0 4px 0;">
<textarea rows="3" cols="38" name="address" id="address" value="<?php echo($rs["fld_address"]); ?>" size="50">
<?php echo($rs["fld_address"]); ?>
</textarea>
</td>
</tr>
<tr bgcolor="#FF9933">
<td class="heading1" style="padding-left:10px"><strong>Location</strong></td>
<td>
<select name="loc" style="width:326px;" ><!--onchange="locat(this.value)"-->
<option>Select Location</option>
<?php
$quer_l="select * from ".$tableprefix."location where location_status='1'";
$cmd_l=mysql_query($quer_l);
while($res_l=mysql_fetch_array($cmd_l))
{
?>
<option value="<?php echo $res_l['location_id']; ?>" <?php if($rs['location_id']==$res_l['location_id']) echo"selected";?>><?php echo $res_l['name']; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td style="padding:4px 0 4px 10px;"><strong>Area</strong></td>
<td style="padding:4px 0 4px 0;">
<?php /*?><div id="area"><select name="area" style="width:326px;">
<option value="asap">Select Location First</option>
</select>
</div><?php */?>
<select name="area" style="width:326px;">
<?php
$quer_a="select * from ".$tableprefix."area where status='1'";
$cmd_a=mysql_query($quer_a);
while($res_a=mysql_fetch_array($cmd_a))
{
?>
<option value="<?php echo $res_a['area_id']; ?>" <?php if($rs['area_id']==$res_a['area_id']) echo"selected";?>><?php echo $res_a['area_name']; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding-left:10px"><strong>Opening Time</strong></td>
<td><input name="openingtime_start" type="text" id="openingtime_start" value="
<?php
$q1=$rs["fld_openingtime_start"];
$q=strlen($rs["fld_openingtime_start"]);
$S=substr("$q1","-$q","-2");
$S4=substr("$q1","-2","2");
echo $S;
?>">
<select name="start">
<option value="am" <?php if($S4=="am"){echo "selected";}?>>am</option>
<option value="pm" <?php if($S4=="pm"){echo "selected";}?>>pm</option>
</select>
</td>
</tr>
<tr>
<td style="padding:4px 0 4px 10px;"><strong>Closing Time</strong></td>
<td style="padding:4px 0 4px 0;">
<input name="closingtime_start" type="text" class="restar_txtbox" id="closingtime_start" value="
<?php
$q6=$rs["fld_closingtime_start"];
$q7=strlen($rs["fld_closingtime_start"]);
$S3=substr("$q6","-$q7","-2");
$S4=substr("$q6","-2","2");
echo $S3;
?>">
<select name="end">
<option value="am"<?php if($S4=="am"){echo "selected";}?>>am</option>
<option value="pm" <?php if($S4=="pm"){echo "selected";}?>>pm</option>
</select>
</td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding:4px 0 4px 10px;"><strong>Opening Time</strong></td>
<td style="padding:4px 0 4px 0;">
<input name="openingtime_start1" type="text" class="restar_txtbox" id="openingtime_start1" value="
<?php
$q4=$rs["fld_openingtime_start1"];
$q5=strlen($rs["fld_openingtime_start1"]);
$S2=substr("$q4","-$q5","-2");
$S4=substr("$q4","-2","2");
echo $S2;
?>">
<select name="start1">
<option value="am" <?php if($S4=="am"){echo "selected";}?>>am</option>
<option value="pm" <?php if($S4=="pm"){echo "selected";}?>>pm</option>
</select>
</td>
</tr>
<tr>
<td style="padding:4px 0 4px 10px;"><strong>Closing Time</strong></td>
<td style="padding:4px 0 4px 0;">
<input name="closingtime_start1" type="text" class="restar_txtbox" id="closingtime_start1" value="
<?php
$q2=$rs["fld_closingtime_start1"];
$q3=strlen($rs["fld_closingtime_start1"]);
$S1=substr("$q2","-$q3","-2");
$S4=substr("$q4","-2","2");
echo $S1;
?>">
<select name="end1">
<option value="am" <?php if($S4=="am"){echo "selected";}?>>am</option>
<option value="pm" <?php if($S4=="pm"){echo "selected";}?>>pm</option>
</select>
</td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding-left:10px"><strong>Delivery Fee</strong></td>
<td>
<input type="text" name="delivery_fee" value="<?php echo($rs["fld_deliveryfee"]); ?>" size="50">
</td>
</tr>
<tr>
<td style="padding:4px 0 4px 10px;"><strong>Cuisines</strong></td>
<td style="padding:4px 0 4px 0;">
<select name="cuisines[]" id="cuisines[]" style="width:326px;" multiple="multiple">
<?php
$quer_l="select * from ".$tableprefix."cuisines where status='1'";
$cmd_l=mysql_query($quer_l);
$allCuisines = array();
while($row = mysql_fetch_assoc($cmd_l))
{
$allCuisines[] = $row;
}
//[BIG-3] In case there are multiple cuisines selected, they were not being pulled back from DB for display at frontend.
$cuisineIds = explode(',',$rs['fld_cuisines']); // In the $cuisineIds, all the cuisines selected from DB get stored
foreach( $allCuisines as $res_l) //Looping on all cuisines as they all need to be echoed once, as well as comparing the condition for a match to the Cuisines originally associated with restaurant
{
?>
<option value="<?php echo $res_l['cuisines_id']; ?>"
<?php
foreach ( $cuisineIds as $cuisId )
{
if($cuisId ==$res_l['cuisines_id'])
echo"selected";
}
?> >
<?php echo $res_l['cuisines_name']; ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td style="padding-left:10px"><strong>Pure Veg</strong></td>
<td>
<input type="checkbox" name="veg_flag"
<?php
if(isSet($rs["veg_flag"]) && $rs['veg_flag']==1)
echo("checked='checked'");
?> value="1"/>
</td>
</tr>
<!--</td> </tr> -->
<tr bgcolor="#FF9933">
<td style="padding-left:10px"><strong>Min Order</strong></td>
<td>
<input type="text" name="min_order" value="
<?php echo($rs["fld_minorder"]); ?>" size="50"/>
</td>
</tr>
<tr>
<td style="padding:4px 0 4px 10px;"><strong>Phone</strong></td>
<td style="padding:4px 0 4px 0;"><input name="phone" type="text" id="phone" size="50" value="<?php echo($rs["fld_phone"]); ?>"></td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding-left:10px"><strong>Upload 1</strong></td>
<td><input name="photos" type="file" size="38" id="photos" /></td>
</tr>
<tr>
<td style="padding:4px 0 4px 10px;"><strong>upload 2</strong></td>
<td style="padding:4px 0 4px 0;"><input name="videos" type="file" id="videos" /></td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding-left:10px"><strong>Rating</strong></td>
<td><input name="rating" type="text" id="rating" value="<?php echo($rs["fld_rating"]); ?>" size="50"></td>
</tr>
<!--</td></tr> -->
<tr bgcolor="#fff001">
<td class="heading1" style="padding-left:10px"><strong>Restaurent Close Day</strong></td>
<td>
<select name="day" style="width:200px;" ><!--onchange="locat(this.value)"-->
<option value="0">Select Day</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
</td>
</tr>
<tr>
<td style="padding:4px 0 4px 10px;"><strong>Description</strong></td>
<td style="padding:4px 0 4px 0;"><textarea name="desc" type="text" id="desc" cols="38" rows="3" ><?php echo($rs["fld_desc"]); ?></textarea></td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding-left:10px"><strong>Info</strong></td>
<td><textarea name="info" type="text" id="info" cols="38" rows="3" > <?php echo($rs["fld_info"]); ?></textarea></td>
</tr>
<tr>
<td style="padding:4px 0 4px 10px;"><strong>Specilialities</strong></td>
<td style="padding:4px 0 4px 0;"><input type="text" name="specialities" value="<?php echo($rs['fld_specialities']) ?>" size="50" /></td>
</tr>
<tr bgcolor="#FF9933" >
<td style="padding-left:10px"><strong>Delivery Time</strong></td>
<td><input name="delivery_time" type="text" id="delivery_time" size="50" value="<?php echo($rs["fld_deliverytime"]); ?>"></td>
</tr>
<tr>
<td style="padding:10px 0px 0px 10px;"><strong>Tax</strong></td>
<td><input name="tax" type="text" id="tax" size="50" value="<?php echo($rs["fld_tax"]); ?>"></td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding:10px 0px 0px 10px;"><strong>Cost For One</strong></td>
<td><input name="cost" type="text" id="cost" size="50" value="<?php echo($rs["fld_cost"]); ?>"></td>
</tr>
<tr>
<td style="padding-left:10px"><strong>Packaging Charge</strong></td>
<td><input name="p_charge" type="text" size="50" value="<?php echo($rs["p_charge"]); ?>"></td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding:10px 0px 0px 10px;"><strong>Label for Tax</strong></td>
<td><input name="label_t" type="text" size="50" value="<?php echo($rs["label_t"]); ?>"></td>
</tr>
<?php
if(isset($_GET['fld']))
{
$delivery_area_data = Task::getDeliveryAreaData($_GET['fld']);
$no_of_del_areas = sizeof($delivery_area_data);
if($no_of_del_areas > 0)
{
echo '<tr><td><input type="hidden" name="number_of_delivery_areas" value="'.$no_of_del_areas.'"/></td></tr>';
for($i=1;$i<=$no_of_del_areas;$i++)
{
$min_id = $i;
$min_order = $delivery_area_data[$i]['min_order'];
$area_id_str = implode(',',$delivery_area_data[$i]['area_ids']);
$area_name_str = '';
$j = 0;
foreach($delivery_area_data[$i]['area_names'] as $name)
{
$tmp_area_id = $delivery_area_data[$i]['area_ids'][$j];
$area_name_str .= '<span class="area-label" id="test'.$min_id.'-area-'.$tmp_area_id.'">
'.$name.'
<span class="test'.$min_id.'-delete-area delete-x" id="delete-area-'.$tmp_area_id.'">X</span>
</span>';
$j++;
}
echo '<tr>
<td style="padding:10px 0px 0px 10px;"><strong>Delivery Area '.$min_id.'</strong></td>
<td>
<input name="d_area'.$min_id.'" type="text" size="50" autocomplete="off" value="'.$area_id_str.'"/>
<div class="area-display-container" id="test'.$min_id.'-display">'.$area_name_str.'</div>
<div>
<input class="auto-suggest-input" type="text" autocomplete="off" id="test'.$min_id.'"/><br/>
<div class="test-content" id="test'.$min_id.'-content"></div>
</div>
</td>
</tr>
<tr id="del_area-'.$min_id.'" bgcolor="#FF9933">
<td style="padding:10px 0px 0px 10px;"><strong>Dilivery charges for area '.$min_id.'</strong></td>
<td><input name="m_order'.$min_id.'" type="text" size="50" value="'.$min_order.'"></td>
</tr>
';
}
echo '<tr>
<td>
<button id="add-more-del-areas">Add more</button>
</td>
</tr>';
}
else
{
?>
<tr>
<td style="padding:10px 0px 0px 10px;"><strong>Delivery Area 1</strong></td>
<td>
<input name="d_area1" type="text" size="50" autocomplete="off" value=""/>
<div class="area-display-container" id="test1-display"></div>
<div>
<input class="auto-suggest-input" type="text" autocomplete="off" id="test1"/><br/>
<div class="test-content" id="test1-content"></div>
</div>
</td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding:10px 0px 0px 10px;"><strong>Dilivery charges for area 1</strong></td>
<td><input name="m_order1" type="text" size="50" value=""/></td>
</tr>
<tr>
<td style="padding:10px 0px 0px 10px;"><strong>Dilivery area 2</strong></td>
<td>
<input name="d_area2" type="text" size="50" value=""/>
<div class="area-display-container" id="test2-display"></div>
<div>
<input class="auto-suggest-input" type="text" autocomplete="off" id="test2"/>
<div class="test-content" id="test2-content"></div>
</div>
</td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding:10px 0px 0px 10px;"><strong>Dilivery charges for area 2</strong></td>
<td><input name="m_order2" type="text" size="50" value=""/></td>
</tr>
<tr >
<td style="padding:10px 0px 0px 10px;"><strong>Dilivery area 3</strong></td>
<td>
<input name="d_area3" type="text" size="50" value=""/>
<div class="area-display-container" id="test3-display"></div>
<div>
<input class="auto-suggest-input" type="text" autocomplete="off" id="test3"/><br/>
<div class="test-content" id="test3-content"></div>
</div>
</td>
</tr>
<tr id="del_area-3" bgcolor="#FF9933">
<td style="padding:10px 0px 0px 10px;"><strong>Dilivery charges for area 3</strong></td>
<td><input name="m_order3" type="text" size="50" value=""/></td>
</tr>
<tr>
<td>
<button id="add-more-del-areas">Add more</button>
</td>
</tr>
<?php
}
}
else
{
?>
<tr>
<td style="padding:10px 0px 0px 10px;"><strong>Delivery Area 1</strong></td>
<td>
<input name="d_area1" type="text" size="50" autocomplete="off" value=""/>
<div class="area-display-container" id="test1-display"></div>
<div>
<input class="auto-suggest-input" type="text" autocomplete="off" id="test1"/><br/>
<div class="test-content" id="test1-content"></div>
</div>
</td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding:10px 0px 0px 10px;"><strong>Dilivery charges for area 1</strong></td>
<td><input name="m_order1" type="text" size="50" value="<?php //echo($rs["m_order1"]); ?>"></td>
</tr>
<tr>
<td style="padding:10px 0px 0px 10px;"><strong>Dilivery area 2</strong></td>
<td>
<input name="d_area2" type="text" size="50" value=""/>
<div class="area-display-container" id="test2-display"></div>
<div>
<input class="auto-suggest-input" type="text" autocomplete="off" id="test2"/>
<div class="test-content" id="test2-content"></div>
</div>
</td>
</tr>
<tr bgcolor="#FF9933">
<td style="padding:10px 0px 0px 10px;"><strong>Dilivery charges for area 2</strong></td>
<td><input name="m_order2" type="text" size="50" value="<?php //echo($rs["m_order2"]); ?>"></td>
</tr>
<tr >
<td style="padding:10px 0px 0px 10px;"><strong>Dilivery area 3</strong></td>
<td>
<input name="d_area3" type="text" size="50" value=""/>
<div class="area-display-container" id="test3-display"></div>
<div>
<input class="auto-suggest-input" type="text" autocomplete="off" id="test3"/><br/>
<div class="test-content" id="test3-content"></div>
</div>
</td>
</tr>
<tr id="del_area-3" bgcolor="#FF9933">
<td style="padding:10px 0px 0px 10px;"><strong>Dilivery charges for area 3</strong></td>
<td><input name="m_order3" type="text" size="50" value="<?php //echo($rs["m_order3"]); ?>"></td>
</tr>
<tr>
<td>
<button id="add-more-del-areas">Add more</button>
</td>
</tr>
<?php
}
?>
<tr>
<td colspan="9" align="center" style="padding-top:5px">
<input type="submit" value="Save" name="btnSave" />
<a href="#" onClick="window.close()"><input type="button" value="cancel"></a>
</td>
</tr>
</form>
</table>
<div class="clr"></div>
</div>
</div>
<div class="restar_bottom"></div>
</div>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="cms.js"></script>
</body>
</html>
The HTML is invalid.
You cannot have a form inside a
<table>but outside a<td>or<th>that is part of that table.Some browsers error correct by moving the form somewhere it is valid (while leaving all the controls behind).
Use a validator to find this sort of markup error.