I have 2 submit buttons, one for submitting the form and the other for cancelling the submission and redirecting. When clicking the Cancel submit button, it doesn't simply cancel and go back to the processing PHP script. It requires the required fields to be filled for the cancel button to work. I don't understand what is wrong with this. Please check my code below and suggest possible solutions.
{include file="header.tpl" page_name='Amazon Order Adjustment' extra_javascript='<script language="JavaScript" src="includes/update_shipping_info.js"></script>'}
{literal}
<style type="text/css">
#loading-icon {
position: absolute;
top: 75px;
right: 250px; width:
32px; height: 32px;
display: none;
background: url('/images/lightbox/loading.gif');
}
</style>
{/literal}
{if isset($tpl_error_msg) }
<div id="message">{$tpl_error_msg}</div>
{/if}
{include file='view_order_snippet.tpl'}
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
{if !($update_shipping_info_flag)}
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
{else}
{section name=lineitems loop=$tpl_order_list}
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="{$tpl_order_list[lineitems].id}">
<input type="hidden" name="vendor_id_array[]" value="{$tpl_order_list[lineitems].vendor_fk}">
</td>
<td>{$tpl_order_list[lineitems].sku}
<td>{$tpl_order_list[lineitems].item_description}</td>
<td>{$tpl_order_list[lineitems].quantity}</td>
<td>{$tpl_order_list[lineitems].item_status}</td>
<td>{$tpl_order_list[lineitems].shipping_mode}</td>
{if $tpl_order_list[lineitems].shipping_tracking_no == ""}
<td>N/A</td>
{else}
<td>{$tpl_order_list[lineitems].shipping_tracking_no}</td>
{/if}
</tr>
{/section}
{/if}
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
{html_options options=$tpl_action_type}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
{html_options options=$tpl_adjustment_reason}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
{html_options options=$tpl_adjustment_type}
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
<option value="">Select Adjustment Buyer Price Type</option>
{html_options options=$tpl_adjustment_buyer_price}
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div class="row">
<input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="{$tpl_grand_total}">
<input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="{$tpl_tax}">
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
<input type="button" id="cancel_button" name="submit_action" value="Cancel" class="button">
</div>
</div>
</form>
{literal}
<script type="text/javascript">
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function () {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove required.
}
});
$(function() {
$('#cancel_button').click(function() {
$("#amazon_order_adjustment").submit();
});
});
});
</script>
{/literal}
{include file="footer.tpl"}
When your cancel button is clicked you can remove required attribute from all inputs and then submit your form in this way $_POST datas for input will also get send to server .
Demo Code :
$(function() {
$('#cancel_button').click(function() {
$("input , select ").removeAttr("required") //remove required attr
$("#amazon_order_adjustment").append("<input type='hidden' name='submit_action' value='Cancel'>") //add this to know which button click
$("#amazon_order_adjustment").submit(); //submit
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="1">
<input type="hidden" name="vendor_id_array[]" value="2">
</td>
<td>A
<td>B</td>
<td>5</td>
<td>ok</td>
<td>htm</td>
<td>N/A</td>
</tr>
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
<option value="ItemPriceAdjustments">ItemPriceAdjustments</option>
<option value="ItemPriceAdjustments1">5</option>
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<!--remove required from here-->
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
<option value="">Select Adjustment Buyer Price Type</option>
<option value="">A</option>
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div class="row">
<input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="{$tpl_grand_total}">
<input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="{$tpl_tax}">
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
<input type="button" id="cancel_button" name="submit_action" value="Cancel" class="button">
</div>
</form>
Use <input type="button" ...> instead that <input type="submit" ...> for cancel button
Related
I'm new to JS. I have a dynamic table (I didn't add the code for add and delete rows) which I want to show in another table. I try to clone every row. Everything is working but td tag with select element doesn't cloned properly. It shows the selected value or the first value if there is no selected. The idea of this clone is to show the table in modal form and the cloned table will be like a preview. Cloning happened when the modal foem is show. In code below I add the button for cloning table. I think, it doesn't matter in this case.
This is the Fiddle link.
Here is my code HTML:
<table class="table table-bordered" id="table" >
<thead>
<tr>
<td >#</td>
<td >Description</td>
<td >Qty</td>
<td >Units</td>
<td >Price without vat</td>
<td >Vat %</td>
<td >Total</td>
<td >Del</td>
</tr>
</thead>
<tr class="product">
<td class="cloned" width="4%" >
<input type="number" class="enumer" style="width:100%; border: none; padding: 0" disabled="disabled">
</td>
<td class="cloned" width="34%">
<input type="text" class="item_product" style="width:100%;" name="product[]">
</td>
<td class="cloned" width="18">
<input style="width:100%;" class="qty" id="qty" name="qty[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" type="text" value="0" required>
</td>
<td class="cloned" width="7%">
<input id="item_units[]" class="units" style="width:100%;" name="item_units[]" type="text" value="ks">
</td>
<td class="cloned" width="10%">
<input class="price" style="width:100%;" id='price' name="price_unit[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" value="0" type="text" required>
</td>
<td class="cloned" width="7%" id="vat_td">
<select class="vat" id="vat" name="vat[]" type="text">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
<input class="hidden" hidden value="1" id="payer_vat_hidden">
<td class="cloned" width="17%">
<input type="number" style="width:100%; background: #dddddd;" class="amount" id="amount" name="amounts[]" readonly>
</td>
<td class="delTD" width="5%">
<button type="button" style="width:100%;" id="deleteRow" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</table>
<button onclick="copyTable()">copy table</button>
<table class="table table-bordered" id="second_table" >
<thead>
<tr>
<th>#</th>
<th>DESCRIPTION</th>
<th class="text-center">QUANTITY</th>
<th class="text-center">UNITS</th>
<th class="text-right">PRICE</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Here is my code Javascript:
function copyTable(){
$("#second_table tr").remove();
$("#table tr").each(function() {
var $target = $("#second_table");
var $tds = $(this).children(),
$row = $("<tr></tr>");
$row.append($tds.eq(0).clone())
.append($tds.eq(1).clone())
.append($tds.eq(2).clone())
.append($tds.eq(3).clone())
.append($tds.eq(4).clone())
.append($tds.eq(5).clone())
.append($tds.eq(6).clone())
.appendTo($target);
});
}
I am writing an .html page which is to be used to perform a system checkout and verify functionality of various aspects of that system. The .html page features a table encapsulated in a form with each row of that table being a step to verify an aspect of the system (e.g. Step 1: Do something) while each column is different criteria for that checkout process (e.g. Step #, Step Instruction, Expected Result, Actual Result, and Comments).
For the Actual Result column, I have a selection for blank (Incomplete), Pass, Fail, and N/A. The Comments column features a disabled textarea box with a placeholder reading "No Comments".
HTML:
<form method="post" action="">
<table>
<thead>
<tr>
<th align="center"><strong>Step</strong></th>
<th align="left"><strong>Instruction</strong></th>
<th align="left"><strong>Expected Result</strong></th>
<th align="left"><strong>Actual Result</strong></th>
<th align="left"><strong>Comments</strong></th>
</tr>
</thead>
<tr>
<td align="center" valign="top">1.</td>
<td align="left" valign="top">Do something.</td>
<td align="left" valign="top">Something happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
<tr>
<td align="center" valign="top">2.</td>
<td align="left" valign="top">Do something else.</td>
<td align="left" valign="top">Something else happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>
Through JavaScript, I would like to set the textarea box in the "Comments" column to enabled and to be required should a "Fail" or "N/A" be selected in the preceding "Actual Results" column.
How would I scale this to support numerous rows each featuring a selection and textarea with similar functionality?
this code can help you.
let trc = document.getElementsByClassName("testResultClass")
for(let i = 0;i < trc.length;i++) {
let elem = trc[i]
elem.onchange = (e) => {
let txbx = elem.parentElement.parentElement.getElementsByClassName("testResultBoxClass")[0]
if(elem.value == "Fail" || elem.value == "N/A"){
txbx.disabled = false
txbx.required = true
} else
txbx.disabled = true
txbx.required = false
}
}
<form method="post" action="">
<table>
<thead>
<tr>
<th align="center"><strong>Step</strong></th>
<th align="left"><strong>Instruction</strong></th>
<th align="left"><strong>Expected Result</strong></th>
<th align="left"><strong>Actual Result</strong></th>
<th align="left"><strong>Comments</strong></th>
</tr>
</thead>
<tr>
<td align="center" valign="top">1.</td>
<td align="left" valign="top">Do something.</td>
<td align="left" valign="top">Something happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult" class="testResultClass">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" class="testResultBoxClass" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
<tr>
<td align="center" valign="top">2.</td>
<td align="left" valign="top">Do something else.</td>
<td align="left" valign="top">Something else happens.</td>
<td align="center" valign="top"><select id="testResult" name="testResult" class="testResultClass">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" class="testResultBoxClass" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>
You can follow this code.
function checkComment()
{
var select = document.getElementById('testResult').options[document.getElementById('testResult').selectedIndex].text
var comment = document.getElementById("userComments");
if(select === "Fail" || select === "N/A")
{
comment.disabled = false;
} else {
comment.value = "";
comment.disabled = true;
}
}
<form method="post" action="">
<table>
<thead>
<tr>
<th align="center"><strong>Step</strong></th>
<th align="left"><strong>Instruction</strong></th>
<th align="left"><strong>Expected Result</strong></th>
<th align="left"><strong>Actual Result</strong></th>
<th align="left"><strong>Comments</strong></th>
</tr>
</thead>
<tr>
<td align="center" valign="top">1.</td>
<td align="left" valign="top">Do something.</td>
<td align="left" valign="top">Something happens.</td>
<td align="center" valign="top">
<select id="testResult" name="testResult" onChange="checkComment()">
<option value="Incomplete" selected></option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="N/A">N/A</option>
</select>
</td>
<td align="center" valign="top"><textarea rows="4" cols="25" id="userComments" name="userComments" placeholder="No comments" disabled="disabled"></textarea></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" id="systemCheckout" name="systemCheckout">
</form>
I've been working on a form where I'm retrieving the city/state information using JSON file. I've reached to a stage where I can see the related city/state, when the user enters their PIN code. Now the bit that i'm stuck on is, on parsing this information to the database when the user submits the form.
The information on city/state is getting populated in the field on the form, immediately after filling in the PIN code but I'm not able to get this data entered into the database, despite trying multiple option (hidden field, trying to store in a variable).
So far, the form gets filled in easily and is taking all the information, except for the details getting populated in the field.
My form is as follows;
<?php
include("inc/dbconnect.php");
session_start();
$username=$_SESSION['username'];
if($username=="")
{
header("location:index.php");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add new lead</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="inc/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
.ui-autocomplete-loading {
background: white url("img/ui-anim_basic_16x16.gif") right center no-repeat;
}
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<script src="inc/jquery.min.js"></script>
<script src="inc/jquery-ui.min.js"></script>
<script>
$(document).ready(
function () {
$( "#datepicker" ).datepicker({
changeMonth: true,//this option for allowing user to select month
changeYear: true //this option for allowing user to select from year range
});
}
);
</script>
<script>
$(document).ready(
function () {
$( "#datepicker2" ).datepicker({
changeMonth: true,//this option for allowing user to select month
changeYear: true //this option for allowing user to select from year range
});
}
);
</script>
<script>
$(document).ready(
function () {
$( "#datepicker3" ).datepicker({
changeMonth: true,//this option for allowing user to select month
changeYear: true //this option for allowing user to select from year range
});
}
);
</script>
</head>
<body>
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30"><?php include("inc/header2.php")?></td>
</tr>
<tr>
<td style="padding:30px;"><form action="addlead.php" method="post" enctype="multipart/form-data" name="form" id="form">
<table width="660" border="0" align="center" cellpadding="1" cellspacing="1" class="resultborder">
<tr>
<td width="684" colspan="2" align="center" valign="middle" class="resultheading2">Add new lead</td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle" style="padding-top:5px;"><?php if(isset($msg)) {echo $msg;}?></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle" style="padding-top:5px;"><table width="660" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td align="left" class="fieldhome">Lead source</td>
<td align="left" valign="middle"><select name="source" id="source" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" required>
<option value="">Select lead source</option>
<option value="Sales ID">Sales ID</option>
<option value="Call back">Call Back</option>
<option value="Toll Free">Toll Free</option>
<option value="Walk-in">Walk-in</option>
<option value="Referral">Referral</option>
<option value="Exhibition">Exhibition Data</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">CEP reference (if any)</td>
<td align="left" valign="middle"><select name="cep_ref" id="cep_ref" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Select CEP reference</option>
<option value="NA">Not Applicable</option>
<option value="Pallavi">Pallavi</option>
<option value="Pooja">Pooja</option>
<option value="Rashmi">Rashmi</option>
<option value="Savita">Savita</option>
<option value="Shaily">Shaily</option>
</select> </td>
</tr>
<tr>
<td width="209" align="left" class="fieldhome">Lead date</td>
<td width="416" align="left" valign="middle"><input id="datepicker" name="inq_date" required="required" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Call date</td>
<td align="left" valign="middle"><input id="datepicker2" name="call_date" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Company Name</td>
<td align="left" valign="middle"><input type="text" name="company" id="company" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Customers Name</td>
<td align="left" valign="middle"><input type="text" name="name" id="name" required="required" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Mobile number</td>
<td align="left" valign="middle"><input type="text" name="mobile" id="mobile" required="required" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Landline number</td>
<td align="left" valign="middle"><input type="text" name="phone" id="phone" required="required" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Email</td>
<td align="left" valign="middle"><input type="text" name="email" id="email" required="required" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Designation</td>
<td align="left" valign="middle"><input type="text" name="designation" id="designation" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Nature of Industry</td>
<td align="left" valign="middle"><select name="nature_ind" id="nature_ind" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Select Nature of Industry</option>
<option value="Trader">Trader</option>
<option value="Manufacturer">Manufacturer</option>
<option value="Individual">Individual</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">Address</td>
<td align="left" valign="middle"><input type="text" name="address" id="address" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Pin Code</td>
<td align="left" valign="middle">
<div>
<input type="text" id="pin" name="pin" placeholder="Enter pincode" width="40%"><span style="color:red; font-size:9px;"> Enter at least 3 digit to show auto-complete.</span></div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#pin" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "pincodes.php",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
minLength: 3, // Set minum input length
select: function( event, ui ) {
//do something on select event
var vl = ui.item.id;
var data = vl.split("-");
console.log(data);
$("#city").html(data[2]);
$("#taluka").html(data[3]);
$("#state").html(data[4]);
//console.log(ui.item); // ui.item is responded json from server
},
open: function() {
// D0 something on open event.
},
close: function() {
// Do omething on close event
}
});
});
</script>
</td>
</tr>
<tr>
<td align="left" class="fieldhome">Taluka:</td>
<td align="left" valign="middle"><span id="taluka"></span> <?php $taluka='<span id="taluka"></span>'?></td>
</tr>
<tr>
<td align="left" class="fieldhome">City:</td>
<td align="left" valign="middle"><span id="city"></span> <input type="hidden" name="city" id="city" value="" />
</td>
</tr>
<tr>
<td align="left" class="fieldhome">State:</td>
<td align="left" valign="middle"><span id="state" name="state"></span></td>
</tr>
<tr>
<td align="left" class="fieldhome">Potential</td>
<td align="left" valign="middle"><select name="potential" id="potential" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Select lead potential</option>
<option value="High">High</option>
<option value="Medium">Medium</option>
<option value="Low">Low</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">Purchases what all?</td>
<td align="left" valign="middle"><textarea rows="2" cols="32" name="what_purchases" style="padding:2px; font-family:Arial; font-size:18px;"></textarea></td>
</tr>
<tr>
<td align="left" class="fieldhome">Other important contacts</td>
<td align="left" valign="middle"><textarea rows="2" cols="32" name="other_contacts" style="padding:2px; font-family:Arial; font-size:18px;"></textarea></td>
</tr>
<tr>
<td align="left" class="fieldhome">Turn over</td>
<td align="left" valign="middle"><select name="turnover" id="turnover" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Select Customer's Turnover</option>
<option value="Less than 50L">Less than 50L</option>
<option value="1Cr to 2Cr">1Cr - 2Cr</option>
<option value="2Cr to 5Cr">2Cr-5Cr</option>
<option value="5Cr to 10Cr">5Cr-10Cr</option>
<option value="10Cr plus">10Cr+</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">Total Employees</td>
<td align="left" valign="middle"><select name="employees" id="employees" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Total number of employees</option>
<option value="1">1</option>
<option value="2 to 5">2-5</option>
<option value="5 to 10">5-10</option>
<option value="10 to 100">10-100</option>
<option value="100 to 500">100-500</option>
<option value="500 plus">500+</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">New customer?</td>
<td align="left" valign="middle"><select name="new_cust" id="new_cust" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" required>
<option value="">Please choose if a new lead?</option>
<option value="Yes">Yes</option>
<option value="Existing-lat">Existing-LAT</option>
<option value="Existing-other">Existing-Other</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">Follow up date</td>
<td align="left" valign="middle"><input id="datepicker3" name="follow_up" class="addformtextfield" /></td>
</tr>
<tr>
<td align="left" class="fieldhome">Lead Status</td>
<td align="left" valign="middle"><select name="lead_status" id="lead_status" style="width:308px; height:30px; padding:2px; font-family:Arial; font-size:14px;" >
<option value="-">Select lead status</option>
<option value="Won-online">Won-online</option>
<option value="Won-offline">Won-offline</option>
<option value="Lost">Lost</option>
<option value="Regret">Regret</option>
<option value="Disqualified">Disqualified</option>
<option value="Not reachable">Not reachable</option>
<option value="Hold">Hold</option>
</select></td>
</tr>
<tr>
<td align="left" class="fieldhome">Remarks</td>
<td align="left" valign="middle"><textarea rows="8" cols="32" name="remarks" style="padding:2px; font-family:Arial; font-size:18px;"></textarea></td>
</tr>
<tr>
<td align="center" class="fieldhome"> </td>
<td align="left" valign="middle"><input type="submit" name="submit" value="Submit" style="width:80px; font-size:18px; padding:8px; font-weight:bold; font-family:Arial; color:#333333;" /></td>
</tr>
</table></td>
</tr>
</table>
</form></td>
</tr>
<tr>
<td><?php include "inc/footer.php"?></td>
</tr>
</table>
</body>
</html>
Problem may be with "multipart/form-data". Try to use "urlencoded" instead of "multipart/form-data" (remove enctype="multipart/form-data" from your form).
Not sure if I'm right but i think that when you do
$("#city").html(data[2]);
$("#taluka").html(data[3]);
$("#state").html(data[4]);
you are actually changing the HTML itself with data[] and not the value of the
<input type="hidden" name="city" id="city" value="" />
I have a form which contains 2 radio butttons & one of them is checked by default. I have disabled some fields & wanted to enable it when 2nd radio button is checked, and disable them (also wanted to regain CSS properties) when 1st radio button is checked.
Right now, I can do it only for input field without any script.
Any help will be appreciated.
input[disabled='disabled'], textarea[disabled='disabled'], select[disabled='disabled'] {
background: #ddddbb;
color: black;
cursor: default;
}
input[type="text"]:disabled, input[type="select"]:disabled {
background: #ddddbb;
}
<html>
<title>Form</title>
<body bgcolor="#FFFFFF" topmargin="20" leftmargin="50">
<input type="radio"
name="radSize"
id="generic_test"
value="false" checked="checked" onclick="document.getElementById('project_id').disabled=true;" />
<label for="generic_test">Generic Test</label>
<input type="radio"
name="radSize"
id="project_test"
value="true" onclick="document.getElementById('project_id').disabled=false;" /><label for="project_test">Project Test</label>
<table align="left">
<tr>
<tr>
<td width="126" height="24" align="left"
valign="middle">
<span class="f1">Project ID <span class="star">*</span></span>
</td>
<td width="126" height="24" align="left"
valign="middle">
<input type="text"
name="project_id" id="project_id" size="19"
value="" disabled="disabled">
</td>
</tr>
<tr>
<td height="24" width="50" align="left"
valign="middle">
<span class="f1"> Multiphase <span class="star">*</span></span>
</td>
<td align="left" valign="middle" nowrap="nowrap">
<select name="multiphase"
id="multiphase"
onchange="onChangeFunction();" disabled="disabled">
<option value='' selected></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<div>
<tr>
<td class="f1">Text Area<br><span class="star">*</span> </td>
<td>
<textarea id="textInputField3"
name="textInputField3"
style="resize:vertical; text-align:top; "
rows="5"
cols="52"
disabled="disabled"></textarea>
</td>
</tr>
</div>
</tr>
</table>
To let the css rule work, use removeAttribute for the Attribute disabled to enable the field or setAttribute to disable it. https://developer.mozilla.org/de/docs/Web/API/Element/removeAttribute
https://developer.mozilla.org/de/docs/Web/API/Element/setAttribute
function enable(enabled){
var project = document.getElementById('project_id'),
multiphase = document.getElementById('multiphase');
textInputField3 = document.getElementById('textInputField3');
if(enabled){
project.removeAttribute('disabled');
multiphase.removeAttribute('disabled');
textInputField3.removeAttribute('disabled');
} else {
project.setAttribute('disabled','disabled');
multiphase.setAttribute('disabled','disabled');
textInputField3.setAttribute('disabled','disabled');
}
}
input, textarea, select {
background: #fff;
color: black;
cursor: default;
}
input[disabled='disabled'], textarea[disabled='disabled'], select[disabled='disabled'] {
background: #ddddbb;
}
input[type="text"]:disabled, input[type="select"]:disabled {
background: #ddddbb;
}
<html>
<title>Form</title>
<body bgcolor="#FFFFFF" topmargin="20" leftmargin="50">
<input type="radio"
name="radSize"
id="generic_test"
value="false" checked="checked" onclick="enable(false)" />
<label for="generic_test">Generic Test</label>
<input type="radio"
name="radSize"
id="project_test"
value="true" onclick="enable(true)" /><label for="project_test">Project Test</label>
<table align="left">
<tr>
<tr>
<td width="126" height="24" align="left"
valign="middle">
<span class="f1">Project ID <span class="star">*</span></span>
</td>
<td width="126" height="24" align="left"
valign="middle">
<input type="text"
name="project_id" id="project_id" size="19"
value="" disabled="disabled">
</td>
</tr>
<tr>
<td height="24" width="50" align="left"
valign="middle">
<span class="f1"> Multiphase <span class="star">*</span></span>
</td>
<td align="left" valign="middle" nowrap="nowrap">
<select name="multiphase"
id="multiphase"
onchange="onChangeFunction();" disabled="disabled">
<option value='' selected></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<div>
<tr>
<td class="f1">Text Area<br><span class="star">*</span> </td>
<td>
<textarea id="textInputField3"
name="textInputField3"
style="resize:vertical; text-align:top; "
rows="5"
cols="52"
disabled="disabled"></textarea>
</td>
</tr>
</div>
</tr>
</table>
I'm absolutely new to PHP and i've gotten a contact form and application form created from a demo i downloaded offline (FancyForm). My question is how do i get each input field the user fills out to be in the email it sends me?
JS Fiddle of working POST tags
In this fiddle, you can see the working post session tags that work and send in the email, however, the last one noted doesn't send. Is it because another file doesn't have that included? A PHP file?
This is my form in HTML:
<form id="contact-form" name="contact-form" method="post" action="submit.php">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="15%"><label for="name">Name</label></td>
<td width="70%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
<td> </td>
</tr>
<tr>
<td width="15%"><label for="length">Telephone</label></td>
<td width="70%"><input type="text" class="validate[required,custom[onlyNumber]]" name="telephone" id="telephone" value="<?=$_SESSION['post']['telephone']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td><label for="subject">Subject</label></td>
<td><select name="subject" id="subject">
<option value="" selected="selected"> - Choose -</option>
<option value="Residential Job">Residential Job</option>
<option value="Commercial Job">Commercial Job</option>
<option value="Repair">Repair/Patch</option>
<option value="Complaint">Complaint</option>
<option value="Question">Question</option>
</select></td>
<td> </td>
</tr>
<tr>
<td valign="top"><label for="message">Message</label></td>
<td><textarea name="message" id="message" class="validate[required]" cols="35" rows="5"><?=$_SESSION['post']['message']?></textarea></td>
<td valign="top"> </td>
</tr>
<tr>
<td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>
<td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top"> </td>
<td colspan="2"><input type="submit" name="button" id="button" value="Submit" />
<?=$str?> <img id="loading" src="img/ajax-load.gif" width="16" height="16" alt="loading" /></td>
</tr>
</table>
</form>
<?=$success?>