Dynamically generated text-box using jQuery - javascript

I have the below working script to create 2 dynamic text-box where user enters min and max values. There is a hidden text box where entered values are comma separated. But I am trying to add comma after two values.
Example:
User clicks on Add Element --> Two dynamic boxes are generated. Asking him to enter Min and Max values.
Let's imagine he enters 103 in first text box and 209 in second. I want the output in my text box (Configsize) to be as 103 - 209 Sqft.
Also want to join this Sqft.. by default. This should be appended.
This is my working website : https://getrightproperty.com/post_property.php
Text box code:
<textarea name="configsize" id="configsize"/></textarea>
J-Query code:
<script>
$(document).ready(function() {
var iCnt = 0;
// CREATE A "DIV" ELEMENT AND DESIGN IT USING jQuery ".css()" CLASS.
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '170px', border: '1px dashed',
borderTopColor: '#999', borderBottomColor: '#999',
borderLeftColor: '#999', borderRightColor: '#999'
});
$('#btAdd').click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Min Size ' + iCnt + '" />');
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Max Size ' + iCnt + '" />');
// SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
if (iCnt == 1) {
var divSubmit = $(document.createElement('div'));
$(divSubmit).append('<input type=button class="bt"' +
'onclick="GetTextValue()"' +
'id=btSubmit value=Submit />');
}
// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);
}
// AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
// (20 IS THE LIMIT WE HAVE SET)
else {
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
});
// REMOVE ONE ELEMENT PER CLICK.
$('#btRemove').click(function() {
if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }
if (iCnt == 0) {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
}
});
// REMOVE ALL THE ELEMENTS IN THE CONTAINER.
$('#btRemoveAll').click(function() {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
iCnt = 0;
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
});
});
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
function GetTextValue() {
$(divValue)
.empty()
.remove();
values = '';
var values = [];
$('.input').each(function() {
values.push(this.value);
});
$("#configsize").text(values.join(','));
}
</script>
Here is the Code::
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function (e) {
$("#form1").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function()
{
}
});
}));
});
</script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var text_max = 300;
$('#textarea_count').html(text_max + ' characters remaining');
$('#comment').keyup(function() {
var text_length = $('#comment').val().length;
var text_remaining = text_max - text_length;
$('#textarea_count').html(text_remaining + ' characters remaining');
});
});
$(document).ready(function() {
var text_max = 300;
$('#textarea_count1').html(text_max + ' characters remaining');
$('#comment1').keyup(function() {
var text_length = $('#comment1').val().length;
var text_remaining = text_max - text_length;
$('#textarea_count1').html(text_remaining + ' characters remaining');
});
});
$(document).ready(function() {
var text_max = 600;
$('#textarea_count2').html(text_max + ' characters remaining');
$('#comment2').keyup(function() {
var text_length = $('#comment2').val().length;
var text_remaining = text_max - text_length;
$('#textarea_count2').html(text_remaining + ' characters remaining');
});
});
</script>
<script>
$(document).ready(function() {
var iCnt = 0;
// CREATE A "DIV" ELEMENT AND DESIGN IT USING jQuery ".css()" CLASS.
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '170px', border: '1px dashed',
borderTopColor: '#999', borderBottomColor: '#999',
borderLeftColor: '#999', borderRightColor: '#999'
});
$('#btAdd').click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Min Size ' + iCnt + '" />');
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Max Size ' + iCnt + '" />');
// SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
if (iCnt == 1) {
var divSubmit = $(document.createElement('div'));
$(divSubmit).append('<input type=button class="bt"' +
'onclick="GetTextValue()"' +
'id=btSubmit value=Submit />');
}
// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);
}
// AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
// (20 IS THE LIMIT WE HAVE SET)
else {
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
});
// REMOVE ONE ELEMENT PER CLICK.
$('#btRemove').click(function() {
if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }
if (iCnt == 0) {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
}
});
// REMOVE ALL THE ELEMENTS IN THE CONTAINER.
$('#btRemoveAll').click(function() {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
iCnt = 0;
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
});
});
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
function GetTextValue() {
$(divValue)
.empty()
.remove();
values = '';
var values = [];
$('.input').each(function() {
values.push(this.value);
});
$("#configsize").text(values.join(','));
}
</script>
<script type="text/javascript">
function updateTextArea() {
var allVals = [];
$('#mydiv :checked').each(function () {
allVals.push($(this).val());
});
$('#txtValue').val(allVals)
}
$(function () {
$('#mydiv input').click(updateTextArea);
updateTextArea();
});
</script>
</head>
<!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>Untitled Document</title>
</head>
<body>
Logout
<form action="upload.php" method="post" name="form1" id="form1" enctype="multipart/form-data">
<table border="1" align="center" cellpadding="15" cellspacing="15">
<tr valign="baseline">
<td nowrap="nowrap" align="right">Builder Name:</td>
<td><input type="text" name="property_builder" value="" class="form-control" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Name:</td>
<td><input type="text" name="property_name" value="" class="form-control" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Location:</td>
<td><input type="text" name="property_location" value="" class="form-control" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property City:</td>
<td><input type="text" name="property_city" class="form-control" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property RERA Id:</td>
<td><input type="text" name="property_rera_id" class="form-control" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property For:</td>
<td><select name="property_for" class="form-control">
<option value="Sale" <?php if (!(strcmp("Sale", ""))) {echo "SELECTED";} ?>>Sale</option>
<option value="New" <?php if (!(strcmp("New", ""))) {echo "SELECTED";} ?>>New</option>
<option value="Re-Sale" <?php if (!(strcmp("Re-Sale", ""))) {echo "SELECTED";} ?>>Re-Sale</option>
</select></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Type:</td>
<td><select name="property_type" class="form-control">
<option value="Apartment" <?php if (!(strcmp("Apartment", ""))) {echo "SELECTED";} ?>>Apartment</option>
<option value="Villa" <?php if (!(strcmp("Villa", ""))) {echo "SELECTED";} ?>>Villa</option>
<option value="Plot" <?php if (!(strcmp("Plot", ""))) {echo "SELECTED";} ?>>Plot</option>
</select></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Status:</td>
<td>
<select name="property_status" class="form-control">
<option value="Under-Construction" <?php if (!(strcmp("Under-Construction", ""))) {echo "SELECTED";} ?>>Under-Construction</option>
<option value="Pre-Launch" <?php if (!(strcmp("Pre-Launch", ""))) {echo "SELECTED";} ?>>Pre-Launch</option>
<option value="Read to move in" <?php if (!(strcmp("Read to move in", ""))) {echo "SELECTED";} ?>>Read to move in</option>
</select>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Possession:</td>
<td><input class="form-control" type="text" name="property_possession" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Configuration:</td>
<td><input class="form-control" type="text" name="property_configuration" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Price Range:</td>
<td><input class="form-control" type="text" name="property_price_range" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Launch Date:</td>
<td><input class="form-control" type="text" name="property_launch_date" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Discription 1st Para:<br /><br />
<div id="textarea_count" class="badge pull-right"></div></td>
<td><textarea class="form-control" name="1stpara" id="comment" rows="5" maxlength="300"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Discription 2nd Para:<br /><br />
<div id="textarea_count1" class="badge pull-right"></div></td>
<td><textarea class="form-control" name="2ndpara" id="comment1" rows="5" maxlength="300"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Discription 3rd Para:<br /><br />
<div id="textarea_count2" class="badge pull-right"></div></td>
<td><textarea class="form-control" name="3rdpara" id="comment2" rows="5" maxlength="600"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Amenities (List all the amenities by comma seperated values)</td>
<td><textarea name="amenities" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Select Photo (one or multiple): <br /> Note: Upload 3 Images ( Supported image format: .jpeg, .jpg, .png, .gif )</td>
<td>
<div id="uploadFormLayer">
<input name="userImage" id="inp_file" type="file" class="inputFile" /><br/>
<input id="userImage" name="userImage" type="hidden" value="">
<input name="userImage1" type="file" class="inputFile" /><br/>
<input name="userImage2" type="file" class="inputFile" /><br/>
<input name="userImage3" type="file" class="inputFile" /><br/>
<input name="userImage4" type="file" class="inputFile" /><br/>
</div>
</div>
</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Configurations</td>
<td>
<div id="mydiv">
<input type="checkbox" name="1 RK Apartment" id="1 RK Apartment" value="1 RK" onClick="dynInput(this);"/> 1 RK Apartment<br />
<input type="checkbox" name="1 BHK Apartment" id="1 BHK Apartment" value="1 BHK" onClick="dynInput(this);" /> 1 BHK Apartment<br />
<input type="checkbox" name="1.5 BHK Apartment" id="1.5 BHK Apartment" value="1.5 BHK" onClick="dynInput(this);" /> 1.5 BHK Apartment<br />
<input type="checkbox" name="2 BHK Apartment" id="2 BHK Apartment" value="2 BHK" onClick="dynInput(this);" /> 2 BHK Apartment<br />
<input type="checkbox" name="2.5 BHK Apartment" id="2.5 BHK Apartment" value="2.5 BHK" onClick="dynInput(this);" /> 2.5 BHK Apartment<br />
<input type="checkbox" name="3 BHK Apartment" id="3 BHK Apartment" value="3 BHK" onClick="dynInput(this);" /> 3 BHK Apartment<br />
<input type="checkbox" name="3.5 BHK Apartment" id="3.5 BHK Apartment" value="3.5 BHK" onClick="dynInput(this);" /> 3.5 BHK Apartment <br />
<input type="checkbox" name="4 BHK Apartment" id="4 BHK Apartment" value="4 BHK" onClick="dynInput(this);" /> 4 BHK Apartment <br />
<input type="checkbox" name="4+ BHK Apartment" id="4+ BHK Apartment" value="4+ BHK" onClick="dynInput(this);" /> 4+ BHK Apartment <br />
<textarea id="txtValue" name="config"></textarea>
</div>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Configuration Sizes</td>
<td> <div id="main">
<input type="button" id="btAdd" value="Add Element" class="bt" />
<input type="button" id="btRemove" value="Remove Element" class="bt" />
<input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br />
</div>
<textarea name="configsize" id="configsize"/></textarea>
</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Youtube Link</td>
<td><textarea name="youtubelink" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Facebook Page Link:</td>
<td><input class="form-control" type="text" name="fblink" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Twitter Page Link:</td>
<td><input class="form-control" type="text" name="TwitterPagelink" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Pincode</td>
<td><textarea name="property_pincode" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Address</td>
<td><textarea name="property_address" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Google Maps URL:</td>
<td><input class="form-control" type="text" name="property_maps_url" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Latitude:</td>
<td><input class="form-control" type="text" name="property_lat" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Longitude:</td>
<td><input class="form-control" type="text" name="property_log" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Floor Plans:</td>
<td><div id="uploadFormLayer">
1 RK Apartment <input name="userImage6" type="file" class="inputFile" /><br/>
1 BHK Apartment <input name="userImage7" type="file" class="inputFile" /><br/>
1.5 BHK Apartment <input name="userImage8" type="file" class="inputFile" /><br/>
2 BHK Apartment <input name="userImage9" type="file" class="inputFile" /><br/>
2.5 BHK Apartment<input name="userImage10" type="file" class="inputFile" /><br/>
3 BHK Apartment <input name="userImage11" type="file" class="inputFile" /><br/>
3.5 BHK Apartment <input name="userImage12" type="file" class="inputFile" /><br/>
4 BHK Apartment <input name="userImage13" type="file" class="inputFile" /><br/>
4+ BHK Apartment <input name="userImage14" type="file" class="inputFile" /><br/>
</div></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Logo:</td>
<td><input type="file" name="image" /><br/>
</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right"> </td>
<td> </td>
</tr>
<tr valign="baseline">
<td colspan="2" align="right" nowrap="nowrap"><input type="submit" class="form-control btn-primary" value="Insert record" /></td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form1" />
</form>
<p> </p>
</body>
</html>


You need to change the "$("#configsize").text()" line as follows. Here is the fiddle https://jsfiddle.net/wrpteuak/
function GetTextValue() {
$(divValue).empty().remove();
values = '';
var values = [];
$('.input').each(function() {
values.push(this.value);
});
$("#configsize").text(values.join(' - ') + " Sqft.");
}

Related

HTML How do I show output for multiple selection?

I am creating an enquiry form for which user can input their information and display all the data in pop up windows.
Everything can show up except for multiple choice selection which only show a single output.
I want to show all the output which I select.
For example: When I select Green and Blue as the color, It only show 1 color which is Green.
Look at this image screenshot here:
Hoping someone can help me, here is my HTML and Javascript code.
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<b>Your form has been submitted! </b>"
message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
message += "<li><b>Address: </b>" + document.form1.address.value;
message += "<li><b>Email: </b>" + document.form1.email.value;
message += "<li><b>Favourite Color: </b>" + document.form1.eyeColor.value;
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Enquiry Form</h1>
<form name="form1">
<table>
<tr>
<td valign="top">
<label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
</td>
<td valign="top">
<select name="enquiryType" id="enquiryType" >
<option value="General Infomation">General Information</option>
<option value="Reservations">Reservations</option>
<option value="Rates">Rates</option>
</td>
</tr>
<tr>
<td valign="top">
<label for="Salutation">Salutation</label>
</td>
<td valign="top">
<label for="Mr">Mr</label>
<input type="radio" name="salutation" id="Mr" value="Mr">
<label for="Mrs">Mrs</label>
<input type="radio" name="salutation" id="Mrs" value="Mrs">
<label for="Miss">Miss</label>
<input type="radio" name="salutation" id="Miss" value="Miss">
<label for="male">Dr</label>
<input type="radio" name="salutation" id="Dr" value="Dr">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="20" NAME="yourname">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Adress: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="30" NAME="address">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Phone Number: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="15" NAME="phone">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="FavColor">Favourite Color</label>
</td>
<td valign="top">
<select name="eyeColor" id="eyeColor" multiple>
<option value="Green">Green</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Red">Yellow</option>
</option>
</select>
</td>
</tr>
</table>
</p>
<p><input TYPE="BUTTON" VALUE="Submit" onClick="display();"></p>
</form>
</body>
</html>

You need to replace document.form1.eyeColor.value; by Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value); then you can got selected value. From this map() method to get whole selected value.
Note: window.open() method is not working in this editor so I used alert() method for render fill-up result.
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<b>Your form has been submitted! </b>"
message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
message += "<li><b>Address: </b>" + document.form1.address.value;
message += "<li><b>Email: </b>" + document.form1.email.value;
message += "<li><b>Favourite Color: </b>" + Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value);
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
alert(message);
DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Enquiry Form</h1>
<form name="form1">
<table>
<tr>
<td valign="top">
<label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
</td>
<td valign="top">
<select name="enquiryType" id="enquiryType" >
<option value="General Infomation">General Information</option>
<option value="Reservations">Reservations</option>
<option value="Rates">Rates</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<label for="Salutation">Salutation</label>
</td>
<td valign="top">
<label for="Mr">Mr</label>
<input type="radio" name="salutation" id="Mr" value="Mr">
<label for="Mrs">Mrs</label>
<input type="radio" name="salutation" id="Mrs" value="Mrs">
<label for="Miss">Miss</label>
<input type="radio" name="salutation" id="Miss" value="Miss">
<label for="male">Dr</label>
<input type="radio" name="salutation" id="Dr" value="Dr">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="20" NAME="yourname">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Adress: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="30" NAME="address">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Phone Number: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="15" NAME="phone">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="FavColor">Favourite Color</label>
</td>
<td valign="top">
<select name="eyeColor" id="eyeColor" multiple="multiple">
<option value="Green">Green</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Red">Yellow</option>
</select>
</td>
</tr>
</table>
<p><input type="button" value="Submit" onclick="display()"></p>
</form>
</body>
</html>

You can use selected option to get selected options.
let selectedOptions= document.form1.eyeColor.selectedOptions;
let selectedValues = [];
for (let i=0; i < selectedOptions.length; i++) {
selectedValues[i] = selectedOptions[i].value;
}
console.log(selectedValues);
Hope this helps.

HTML Radio Button

I have typed the following code in Front Page and it gives error in displaying Radio Button Values (as undefined):
function f1() {
var fn = document.frm.T1.value;
var ln = document.frm.T2.value;
var ad = document.frm.S1.value;
var sex = document.frm.R1.value;
var nat = document.frm.D1.value;
var typ = document.frm.R2.value;
var typ1 = document.frm.C1.value;
var typ2 = document.frm.C2.value;
var typ3 = document.frm.C3.value;
var budg = document.frm.R3.value;
var mail = document.frm.T5.value;
var mob = document.frm.T3.value;
var resi = document.frm.T4.value;
var city = document.frm.D2.value;
var com = document.frm.S2.value;
document.write("Welcome Dear " + fn + " " + ln + "<br>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " +
" and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" +
" You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" +
" You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com);
}
body {
background-color: #222;
}
<p align="center"> </p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<p align="center"><span style="background-color: #FFFFFF">
<font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and
out Customer Support Team will contact you shortly!</font></span>
</p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<form method="POST" name="frm" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan -->
<input TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<!--webbot bot="SaveResults" i-checksum="43374" endspan -->
<div align="left">
<table border="1" width="39%">
<tr>
<td colspan="2">
<p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>First Name</b></font>
</td>
<td>
<input type="text" name="T1" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Last Name</b></font>
</td>
<td>
<input type="text" name="T2" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Postal Address</b></font>
</td>
<td>
<textarea rows="2" name="S1" cols="20"></textarea>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Gender</b></font>
</td>
<td>
<input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE
</font>
<input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF">
FEMALE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Nationality</b></font>
</td>
<td>
<select size="1" name="D1">
<option selected value="Indian">INDIAN</option>
<option value="British">BRITISH</option>
<option value="Canadian">CANADIAN</option>
<option value="Chinese">CHINESE</option>
<option value="Japanese">JAPANESE</option>
<option value="GCC">MID EASTERN</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Looking For</b></font>
</td>
<td>
<input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY
<input type="radio" name="R2" value="Lease">LEASE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Type</b></font>
</td>
<td>
<input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1
BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK
<input type="checkbox" name="C3" value="3 BHK">3 BHK</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Budget</b></font>
</td>
<td>
<input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30
LAKHS</font>
<p>
<input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60
LAKHS</font>
</p>
<p>
<input type="radio" name="R3" value="MORE
THAN 60 LAKHS"><font color="#FFFFFF">MORE
THAN 60 LAKHS</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">E-Mail ID</font>
</td>
<td>
<input type="text" name="T5" size="20">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">Phone Number</font>
</td>
<td>
<input type="text" name="T3" size="20">
<font color="#FFFFFF">Mob</font>
<p>
<input type="text" name="T4" size="20"><font color="#FFFFFF">
Res</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Preferred City</b></font>
</td>
<td>
<select size="1" name="D2">
<option selected value="Mumbai">MUMBAI</option>
<option value="Bangalore">BANGALORE</option>
<option value="Pune">PUNE</option>
<option value="Ahmedabad">AHMEDABAD</option>
<option value="Kochi">KOCHI</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Comments</b></font>
</td>
<td>
<textarea rows="2" name="S2" cols="20"></textarea>
</td>
</tr>
</table>
</div>
<p align="left">
<input type="submit" value="Inquire" name="B1" onclick="f1()">
<input type="reset" value="Reset" name="B2">
</p>
</form>
<p align="center">
<a href="Home.htm">
<img border="0" src="home_1.png" width="75" height="72">
</a>
</p>
Rest of the things are working except radio buttons. Kindly help with a solution for the same. Thank you in advance

<form>
What color do you prefer?<br>
<input type="radio" name="colors" id="red">Red<br>
<input type="radio" name="colors" id="blue">Blue
</form>
<button onclick="check()">Check "Red"</button>
<button onclick="uncheck()">Uncheck "Red"</button>
<script>
function check() {
document.getElementById("red").checked = true;
}
function uncheck() {
document.getElementById("red").checked = false;
}
</script>
link:-http://www.w3schools.com/jsref/prop_radio_checked.asp

All Radio Buttons has the same name. So you have to select the checked radio button by using document.querySelector('input[name=R1]:checked').value. I have even checked for unselected checkbox value as "Empty"
function f1() {
var fn = document.frm.T1.value;
var ln = document.frm.T2.value;
var ad = document.frm.S1.value;
var sex = document.frm.R1.value;
var nat = document.frm.D1.value;
var typ = document.frm.R2.value;
var typ1 = document.frm.C1.value;
var typ2 = document.frm.C2.value;
var typ3 = document.frm.C3.value;
var budg = document.frm.R3.value;
var mail = document.frm.T5.value;
var mob = document.frm.T3.value;
var resi = document.frm.T4.value;
var city = document.frm.D2.value;
var com = document.frm.S2.value;
document.write("Welcome Dear " + fn + " " + ln + "<br/>" + "Your Sex is " + ((document.querySelector('input[name=R1]:checked'))?document.querySelector('input[name=R1]:checked').value:"Empty") + "<br/>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " +
" and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" +
" You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" +
" You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com);
}
body {
background-color: #222;
}
<p align="center"> </p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<p align="center"><span style="background-color: #FFFFFF">
<font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and
out Customer Support Team will contact you shortly!</font></span>
</p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<form method="POST" name="frm" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan -->
<input TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<!--webbot bot="SaveResults" i-checksum="43374" endspan -->
<div align="left">
<table border="1" width="39%">
<tr>
<td colspan="2">
<p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>First Name</b></font>
</td>
<td>
<input type="text" name="T1" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Last Name</b></font>
</td>
<td>
<input type="text" name="T2" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Postal Address</b></font>
</td>
<td>
<textarea rows="2" name="S1" cols="20"></textarea>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Gender</b></font>
</td>
<td>
<input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE
</font>
<input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF">
FEMALE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Nationality</b></font>
</td>
<td>
<select size="1" name="D1">
<option selected value="Indian">INDIAN</option>
<option value="British">BRITISH</option>
<option value="Canadian">CANADIAN</option>
<option value="Chinese">CHINESE</option>
<option value="Japanese">JAPANESE</option>
<option value="GCC">MID EASTERN</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Looking For</b></font>
</td>
<td>
<input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY
<input type="radio" name="R2" value="Lease">LEASE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Type</b></font>
</td>
<td>
<input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1
BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK
<input type="checkbox" name="C3" value="3 BHK">3 BHK</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Budget</b></font>
</td>
<td>
<input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30
LAKHS</font>
<p>
<input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60
LAKHS</font>
</p>
<p>
<input type="radio" name="R3" value="MORE
THAN 60 LAKHS"><font color="#FFFFFF">MORE
THAN 60 LAKHS</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">E-Mail ID</font>
</td>
<td>
<input type="text" name="T5" size="20">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">Phone Number</font>
</td>
<td>
<input type="text" name="T3" size="20">
<font color="#FFFFFF">Mob</font>
<p>
<input type="text" name="T4" size="20"><font color="#FFFFFF">
Res</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Preferred City</b></font>
</td>
<td>
<select size="1" name="D2">
<option selected value="Mumbai">MUMBAI</option>
<option value="Bangalore">BANGALORE</option>
<option value="Pune">PUNE</option>
<option value="Ahmedabad">AHMEDABAD</option>
<option value="Kochi">KOCHI</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Comments</b></font>
</td>
<td>
<textarea rows="2" name="S2" cols="20"></textarea>
</td>
</tr>
</table>
</div>
<p align="left">
<input type="submit" value="Inquire" name="B1" onclick="f1()">
<input type="reset" value="Reset" name="B2">
</p>
</form>
<p align="center">
<a href="Home.htm">
<img border="0" src="home_1.png" width="75" height="72">
</a>
</p>

You can do this either by jQuery or jsvascript
In jQuery use $('input[name="R1"]:checked').val(); here R1 is your checkbox name
In javascript get the dom elements by name and loop through the elements to get the selection.
I have attached a sample code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function ChangeSelection() {
//Using Jquery
var selection = $('input[name="R1"]:checked').val();
console.log("jQuery Result - " + selection);
//Javascript
var radios = document.getElementsByName('R1');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
//Selected Radio
selection = radios[i].value;
// only one radio can be logically checked, don't check the rest
break;
}
}
console.log("JavaScript Result - " + selection);
}
</script>
</head>
<body>
<input type="radio" value="MALE" name="R1" onclick="ChangeSelection()"><font>MALE</font>
<input type="radio" value="FEMALE" name="R1" onclick="ChangeSelection()"><font>FEMALE</font>
</body>
</html>

Submitting Dynamic Form Fields to mysql via PHP

I have created a dynamic form and I am trying to send the form data to mysql through PHP but its not working. Data is not getting sent even from the very first row without adding a dynamic row. I'm new to this topic, so I'm out of ideas to solve it. How can I make this form a correct one and send accurate data to mysql?
In my form I have 3 fields that are not dynamic.
Here is the form code:
<form name="newbillform" method="POST" action="save_purchase_details.php">
<table style=" border:1px solid black" cellpadding="5px" cellspacing="0px" align="center" border="0">
<tr>
<td colspan="4" style="background:#0066FF; color:#FFFFFF; fontsize:20px" align="center">
ADD NEW PURCHASE RECORD
</td>
</tr>
<tr>
<td>Date:</td>
<td>
<input type="date" name="p_date"/>
</td>
</tr>
<tr>
<td>Invoice Number:</td>
<td>
<input type="text" name="invoice_no" size="50">
</td>
</tr>
<tr>
<td>Balance:</td>
<td>
<input type="text" name="balance" size="50">
</td>
</tr>
</table>
<h2 style="padding-left:10px;">Enter Product Details Below:-</h2>
<table id="product_details" style="margin-top:8px;" align='center' border='1' width="900px">
<tr id="row1">
<td>
<input type="text" name="qty[]" value="" placeholder="Quantity" size="6">
</td>
<td>
<input type="text" name="pack[]" value="" placeholder="Pack" size="6">
</td>
<td>
<input type="text" name="item_name[]" value="" placeholder="Item Name" size="16">
</td>
<td>
<input type="text" name="batch[]" value="" placeholder="Batch" size="6">
</td>
<td>
<input type="text" name="expiry[]" value="" placeholder="Expiry" size="6">
</td>
<td>
<input type="text" name="mrp[]" value="" placeholder="M.R.P" size="6">
</td>
<td>
<input type="text" name="rate[]" value="" placeholder="Rate" size="6">
</td>
<td>
<input type="text" name="vat[]" value="" placeholder="VAT" size="6">
</td>
<td>
<input type="text" name="discount[]" value="" placeholder="Discount" size="6">
</td>
<td>
<input type="button" class="button-add-row" onclick="add_row();" value="ADD ROW" size="8">
</td>
</tr>
</table>
<center>
<input type="submit" name="submit_row" value="SUBMIT">
</center>
</form>
Here is the javascript code:
<script type="text/javascript">
function add_row()
{
$rowno = $("#product_details tr").length;
$rowno = $rowno + 1;
$("#product_details tr:last").after("<tr id='row"+$rowno+"'><td><input type='text' name='qty[]' placeholder='Quantity' size='6'></td><td><input type='text' name='pack[]' placeholder='Pack' size='6'></td><td><input type='text' placeholder='Item Name' name='item_name[]' size='16'></td><td><input type='text' name='batch[]' placeholder='Batch' size='6'></td><td><input type='text' name='expiry[]' placeholder='Expiry' size='6'></td><td><input type='text' name='mrp[]' placeholder='M.R.P' size='6'></td><td><input type='text' name='rate[]' placeholder='Rate' size='6'></td><td><input type='text' name='vat[]' placeholder='VAT' size='6'></td><td><input type='text' name='discount[]' placeholder='Discount' size='6'></td><td><input type='button' class='button-add-row' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
$('#'+rowno).remove();
}
</script>
Here is the PHP code:
<?php
$connect = mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("store_records",$connect) or die(mysql_error());
if(isset($_POST['submit_row']))
{
$amount;
$grand_total;
for($i = 0; $i < count($_POST['item_name']); $i++)
{
$qty = $_POST['qty'][$i];
$p_date = $_POST['p_date'];
$invoice_no = $_POST['invoice_no'];
$balance = $_POST['balance'];
$pack = $_POST['pack'][$i];
$item_name = $_POST['item_name'][$i];
$batch = $_POST['batch'][$i];
$expiry = $_POST['expiry'][$i];
$mrp = $_POST['mrp'][$i];
$rate = $_POST['rate'][$i];
$vat = $_POST['vat'][$i];
$discount = $_POST['discount'][$i];
$amount = $balance+($qty*$rate)-$discount;
$grand_total = $amount+(($amount*$vat)/100);
$query =mysql_query("insert into bill_records values('', '$p_date', '$invoice_no', '$balance', '$qty','$pack','$item_name', '$batch', '$expiry', '$mrp', '$rate', '$vat', '$discount', '$amount', '$grand_total')");
}
}
?>
It would be of great help. Thank You..

A readonly textbox should be cleared on checkbox checked

<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)"/>
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="myFunction(this)" />
</td>
</tr>
</table>
I want to clear textbox when we corresponding checkboc is checked. Here is my Java script,
<script type="text/javascript" language="javascript">
function CheckCheckboxes1(chk){
if(chk.checked == true)
{
var txt = document.getElementById('TextBox1');
txt.value = "";
txt.disabled = false;
}
else
{
var txt = document.getElementById('TextBox1');
txt.value = "Enter Username";
txt.disabled = true;
}
}
</script>
Any idea?

In order to get the corresponding textbox, you can't get it by ID. Instead you should get the inputs parent table row and then find the input from there, so that it is relative to the checkbox.
Working demo
function CheckCheckboxes1(chk){
var txt = chk.parentNode.parentNode.cells[2].getElementsByTagName('input')[0];
if(chk.checked == true)
{
txt.value = "";
txt.readOnly = false;
}
else
{
txt.value = "Enter Username";
txt.readOnly = true;
}
}
Notes:
Use txt.readOnly not txt.disabled because disabled is something different.
Use the checkbox onchange event not onclick.

Hi in order to disable and enable you need to assign the id's to both checkbox and textboxs. please look at the below code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript">
function CheckCheckboxes1(chk){
if(chk.checked == true)
{
var txt = document.getElementById('TextBox'+chk.id);
txt.value = "";
txt.disabled = false;
}
else
{
var txt = document.getElementById('TextBox'+chk.id);
txt.value = "Enter Username";
txt.disabled = true;
}
}
</script>
</head>
<body>
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox1" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" id="1" onclick="CheckCheckboxes1(this)"/>
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox2" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="2" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>`enter code here`
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox3" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="3" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox4" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="4" onclick="myFunction(this)" />
</td>
</tr>
</table>
</body>
</html>

As #Adil said it is easier if you use jQuery. You can give your textbox an id and your checkbox a cutstom attribute e.g.:
<td>
<input type="text" id="txt_1" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" specId="1" onclick="CheckCheckboxes1(this)"/>
</td>
function CheckCheckboxes1(chk){
var specId = $(chk).attr("specId");
var txt = $("#txt_"+specId);
if(chk.checked == true)
{
$(txt).val("");
$(txt).attr("disabled","disabled");
}
else
{
$(txt).val("Enter Username");
$(txt).removeAttr("disabled");
}
}
Hope it helps!

need to calculate 2 input fields and display in 3rd

I want to multiply the quantity by price and 'display' in total. Total needs to be named "amount" in order to transfer the total cost to the gateway. As you can see I'm trying to create a get around to be able to use quantity.
All information here is for test purposes so isn't personal.
<script type="text/javascript">
function totalprice() {
var qty = document.getElementById("quantity").value;
var price = 219999;
var total = (qty * price);
document.getElementById("tot").value = total;
}
</script>
<form action="https://gateway.charityclear.com/hosted/" method="post">
<input type="hidden" name="merchantID" value="0000992">
<input type="hidden" name="countryCode" value="826">
<input type="hidden" name="currencyCode" value="826">
<table>
<tr>
<td>Full Name </td><td><input type="text" name="customerName" value=></td></tr>
<tr>
<td>Full Shipping Address <br>(including Country)<br>(must be same as billing address)</td><td><textarea rows="4" name="customerAddress" value=></textarea></td></tr>
<tr>
<td>Post Code </td><td><input type="text" name="customerPostCode" value=></td> </tr>
<tr>
<td>Email Address </td><td><input type="text" name="customerEmail" value=></td> </tr>
<tr>
<td>Phone Number <br>(required for delivery)</td><td><input type="text" name="customerPhone" value=></td></tr>
<input type="hidden" name="redirectURL" value="http://www.UKRobstep.com/order- successful.html">
<tr><td></td>
</tr>
<tr><td><input type="hidden" name="orderRef" value="Colour">Colour</td>
<td>
<select name="orderRef">
<option value="Select a Colour">Select a Colour
<option value=" Robin M1 in Black">Black
<option value=" Robin M1 in White "> White
<option value=" Robin M1 in Red"> Red
<option value=" Robin M1 in Yellow ">Yellow
<option value=" Robin M1 in Silver/Grey "> Silver/Grey
</select></td>
</tr>
<tr><td>
Quantity</td><td><input type="text" name="quantity" id="quantity" class="field" value="1" /></td></tr>
<tr><td>Price Per Unit</td><td><input type="text" name="price" id="price" class="field" value="£2199.99" readonly="readonly"/>
<input type="hidden" name="amount" id="tot" class="field" value=""/>
</td></tr>
</table>
<INPUT TYPE="image" SRC="http://www.weebly.com/uploads/9/8/2/8/9828047/5792561_orig.png" BORDER="0" ALT="Pay Now" >
</form>
I hope someone can help, Thanks in advance.

use parseInt();
Example
function totalprice()
{
var qty = document.getElementById("quantity").value;
var price = 219999;
var total = (parseInt(qty) * price);
-------------^^^^^^^^^--------------
document.getElementById("tot").value = total;
}

Are you just trying a way to get value after user enters quantity? I'm not sure what you mean by "get around". Here's a way of returning value after enter key is pressed.
<script>
function totalprice() {
var KeyID = event.keyCode;
if(KeyID == 13){
var qty = document.getElementById("quantity").value;
var price = 219999;
var total = (qty * price);
document.getElementById("tot").value = total;
alert(total);
}
else{
}
}
</script>
<form action="https://gateway.charityclear.com/hosted/" method="post">
<input type="hidden" name="merchantID" value="0000992">
<input type="hidden" name="countryCode" value="826">
<input type="hidden" name="currencyCode" value="826">
<table>
<tr>
<td>Full Name </td><td><input type="text" name="customerName" value=></td></tr>
<tr>
<td>Full Shipping Address <br>(including Country)<br>(must be same as billing
address)</td><td><textarea rows="4" name="customerAddress" value=></textarea></td>
</tr>
<tr>
<td>Post Code </td><td><input type="text" name="customerPostCode" value=></td>
</tr>
<tr>
<td>Email Address </td><td><input type="text" name="customerEmail" value=></td> </tr>
<tr>
<td>Phone Number <br>(required for delivery)</td><td><input type="text"
name="customerPhone" value=></td></tr>
<input type="hidden" name="redirectURL" value="http://www.UKRobstep.com/order-
successful.html">
<tr><td></td>
</tr>
<tr><td><input type="hidden" name="orderRef" value="Colour">Colour</td>
<td>
<select name="orderRef">
<option value="Select a Colour">Select a Colour
<option value=" Robin M1 in Black">Black
<option value=" Robin M1 in White "> White
<option value=" Robin M1 in Red"> Red
<option value=" Robin M1 in Yellow ">Yellow
<option value=" Robin M1 in Silver/Grey "> Silver/Grey
</select></td>
</tr>
<tr><td>
Quantity</td><td><input type="text" name="quantity" id="quantity" class="field"
value="1" onkeydown="return totalprice(this, event);" /></td></tr>
<tr><td>Price Per Unit</td><td><input type="text" name="price" id="price"
class="field" value="£2199.99" readonly="readonly"/>
<input type="hidden" name="amount" id="tot" class="field" value=""/>
</td></tr>
</table><INPUT TYPE="image"
SRC="http://www.weebly.com/uploads/9/8/2/8/9828047/5792561_orig.png" BORDER="0"
ALT="Pay Now" > </form>

Categories

Resources