|
JavaScript - Multiplying Two Input Fields
Hello,
I would like to create a form that calculates the area of a floor or wall. The user will input the length/height and width dimensions into two input fields and then click calculate. I simply need a script that multiplies the two fields together and puts the answer in a third read-only field. Any help much appriciated Kind regards, Mike Similar TutorialsI am working on a job calculator. I have 2 txt input boxes titled "project_rate_field" and "project_time_field" as well as a third box .. "project_pay_total_field" for output.. I need to multiply the rate field and the time field and output the total into the third box. I've never really used javascript before so I dont know much about it or how to write it but im trying to learn. Here is my .js file ... Code: function project_pay_details()
{
var rate = document.getElementById("project_rate_field").value;
var time = document.getElementById("project_time_field").value;
var total = (rate * time);
project_pay_total_field.value = "$" + total;
}
And here is my .html file Code: <!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>
<script language="javascript" type="text/javascript" href="functions.js" />
<style>
.wrap { float: right; }
#project_pay { float: left; margin-right: 15px; line-height: 38px; font: 10px Arial, Helvetica, sans-serif; color: #bbb; }
#project_pay_details { border-top: 1px dotted #ddd; padding-bottom: 10px; margin-top: 10px; float: right; width: 100%; }
.field { border: none; line-height: 38px; font: 20px Arial, Helvetica, sans-serif; color: #666; width: 100px; font-weight: bold; margin-top: 6px; }
</style>
</head>
<body>
<form id="project_pay_details" name="form1" method="post" action="" class="editable">
<div class="wrap">
<div id="project_pay">Pay Rate<input type="text" name="project_rate_field" id="project_rate_field" class="field" value="10" />/ hr</div>
<div id="project_pay">Total Hours<input type="text" name="project_time_field" id="project_time_field" class="field" value="0" /></div>
<div id="project_pay">Project Total<input type="text" name="project_pay_total_field" id="project_pay_total_field" class="field" readonly="readonly" value="0" /></div>
<input name="project_pay_details_refresh" type="button" value="Refresh" onClick="project_pay_details()" /></input>
</div>
</form>
</body>
</html>
I need to know what im doing wrong because this obviously doesnt work. So I made myself this code so I could have a file upload input field, and the option to add more fields. but it got really big, and I have a fixed number of fields, can't quickly change the number I want. here's my javascript: Code: function new_field(id) {
var f = document.getElementById(id);
if(f.style.display == 'none')
f.style.display = 'block';
}
function hide_mais(id) {
var g = document.getElementById(id);
g.style.display = 'none';
}
and the html: Code: <form>
<div id="file_a" style="display:block"><input type="file" /><a href="#" id="link_a" onclick="new_field('file_b');hide_mais('link_a')">mais</a></div>
<div id="file_b" style="display:none"><input type="file" /><a href="#" id="link_b" onclick="new_field('file_c');hide_mais('link_b')">mais</a></div>
<div id="file_c" style="display:none"><input type="file" /><a href="#" id="link_c" onclick="new_field('file_d');hide_mais('link_c')">mais</a></div>
<div id="file_d" style="display:none"><input type="file" /><a href="#" id="link_d" onclick="new_field('file_e');hide_mais('link_d')">mais</a></div>
<div id="file_e" style="display:none"><input type="file" /><a href="#" id="link_e" onclick="new_field('file_f');hide_mais('link_e')">mais</a></div>
<div id="file_f" style="display:none"><input type="file" /><a href="#" id="link_f" onclick="new_field('file_g');hide_mais('link_f')">mais</a></div>
<div id="file_g" style="display:none"><input type="file" /><a href="#" id="link_g" onclick="new_field('file_h');hide_mais('link_g')">mais</a></div>
<div id="file_h" style="display:none"><input type="file" /><a href="#" id="link_h" onclick="new_field('file_i');hide_mais('link_h')">mais</a></div>
<div id="file_i" style="display:none"><input type="file" /><a href="#" id="link_i" onclick="new_field('file_j');hide_mais('link_i')">mais</a></div>
<div id="file_j" style="display:none"><input type="file" /><a href="#" id="link_j" onclick="new_field('file_k');hide_mais('link_j')">mais</a></div>
<div id="file_k" style="display:none"><input type="file" /><a href="#" id="link_k" onclick="new_field('file_l');hide_mais('link_k')">mais</a></div>
<div id="file_l" style="display:none"><input type="file" /><a href="#" id="link_l" onclick="new_field('file_m');hide_mais('link_l')">mais</a></div>
<div id="file_m" style="display:none"><input type="file" /><a href="#" id="link_m" onclick="new_field('file_n');hide_mais('link_m')">mais</a></div>
<div id="file_n" style="display:none"><input type="file" /><a href="#" id="link_n" onclick="new_field('file_o');hide_mais('link_n')">mais</a></div>
<div id="file_o" style="display:none"><input type="file" /><a href="#" id="link_o" onclick="new_field('file_p');hide_mais('link_o')">mais</a></div>
<div id="file_p" style="display:none"><input type="file" /><a href="#" id="link_p" onclick="new_field('file_q');hide_mais('link_p')">mais</a></div>
<div id="file_q" style="display:none"><input type="file" /><a href="#" id="link_q" onclick="new_field('file_r');hide_mais('link_q')">mais</a></div>
<div id="file_r" style="display:none"><input type="file" /><a href="#" id="link_r" onclick="new_field('file_s');hide_mais('link_r')">mais</a></div>
<div id="file_s" style="display:none"><input type="file" /><a href="#" id="link_s" onclick="new_field('file_t');hide_mais('link_s')">mais</a></div>
<div id="file_t" style="display:none"><input type="file" /><a href="#" id="link_t" onclick="new_field('file_u');hide_mais('link_t')">mais</a></div>
<div id="file_u" style="display:none"><input type="file" /><a href="#" id="link_u" onclick="new_field('file_v');hide_mais('link_u')">mais</a></div>
<div id="file_v" style="display:none"><input type="file" /><a href="#" id="link_v" onclick="new_field('file_w');hide_mais('link_v')">mais</a></div>
<div id="file_w" style="display:none"><input type="file" /><a href="#" id="link_w" onclick="new_field('file_x');hide_mais('link_w')">mais</a></div>
<div id="file_x" style="display:none"><input type="file" /><a href="#" id="link_x" onclick="new_field('file_y');hide_mais('link_x')">mais</a></div>
<div id="file_y" style="display:none"><input type="file" /><a href="#" id="link_y" onclick="new_field('file_z');hide_mais('link_y')">mais</a></div>
<div id="file_z" style="display:none"></div>
</form>
any suggestions of a more efficient way to do that? also a button to reset form into initial state, with one field only, without having to refresh the page would be cool. thanks in advance Hi, i've got a calculator/quotation script i've made. Once the calculation is complete, i want the user to click a button which will copy some of the field data to new fields for printing. This is fine and i can do easily, however i then want the user to be able to reset the form and do another calculation, click the same button and it copy the new data to new fields too. So in effect you end up with all of your calculations listed somewhere for printing. how would i attempt this? any help appreciated Hello Everyone, I am inexperienced in JavaScript. I have an html page with several numeric input fields which are an array. At the bottom of the screen is a running total of the numbers entered. The html is like: <INPUT TYPE=TEXT NAME='array[0]' onchange='addup()'> <INPUT TYPE=TEXT NAME='array[1]' onchange='addup()'> etc..... <INPUT TYPE=TEXT NAME='array[9]' onchange='addup()'> <INPUT TYPE=TEXT NAME='arraytotal'> The javascript is: function addup() { var total = 0; for (var i=0; i<=10; i++) { total += Number(document.forms["formname"]["array["+i+"]"].value); } document.forms["formname"]["arraytotal"].value = total; } This works ok, but I don't want the field arraytotal to be an input field. How can I do this please? Hi to all, I have a dynamic form, when a button is clicked 3 more fields appear, the function is to colect for example from date [02/02/2010] to date [10/02/2010] equals price [250$] per week and if you want another period just click the button and 3 more fields appear. How do I get all this data to PHP? Code: <script type="text/javascript">
var counter = 3;
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('input');
newText.type = "text";
newText.value = "DD/MM/AAAA";
newText.name = counter++;
var newText1 = document.createElement('input');
newText1.type = "text";
newText1.value = "DD/MM/AAAA";
newText1.name = counter++;
var newText2 = document.createElement('input');
newText2.type = "text";
newText2.value = "0";
newText2.name = counter++;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Delete";
// Append new text input to the newDiv
newDiv.appendChild(newText);
newDiv.appendChild(newText1);
newDiv.appendChild(newText2);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
}
}
</script>
<table style="margin-left:200px" border="0">
<tr><!-- Row 1 -->
<td width="140"><b>Start Date</b></td><!-- Col 1 -->
<td width="142"><b>End Date</b></td><!-- Col 2 -->
<td width="140"><b>Price per week</b></td><!-- Col 3 -->
</tr>
</table>
<div style="margin-left:200px" id="mainContainer"><div><input value="DD/MM/AAAA" name="0" type="text" ><input value="DD/MM/AAAA" name="1" type="text" ><input value="0" name="2" type="text" ><input type="button" value="New price" onClick="addNew()"></div>
I have a registration form that I am working on in which I need to assign a price to each option in a selection box then write that price in the document. Then I have a radio button that will add (different amounts based on selection) to that price before it is written. Then I have another radio button that just needs to write a price based on its selection. Both of these values will be written and then totaled. (See below for a less confusing explanation) On HTML form: >drop down list (name courseName, value of selections 1,2,3,4) > radio button (name returnStudent, value of selections 1,2) > radio button (name bookNeeded, value of selections 1,2) Table (name totalprice) at the bottom of the form: price1: price of courseName plus returnStudent (td with name tuitionprice) price2: price of bookNeeded (td with name bookprice) Total of the above (td with name totalprice) This is what I am trying to make work... Code: var selectedCourse = document.onsiteRegistration.courseName.value;
var selectedStudent = document.onsiteRegistration.returnStudent.value;
function setTuition()
{
if (selectedCourse == "1" && selectedStudent =="1")
{
document.write("12345");
}
if (selectedCourse == "1" && selectedStudent =="2")
{
document.write("54321");
}
}
Then in my HTML I have simply put this to call the function and write it where I need it to be placed. <script>setTuition()</script> I am trying to find some examples of something like this but all I am coming up with is shopping carts and that is not what I need here. I am fairly confident that I can program the second part (totaling) if I can only get the selections to populate the different prices for me. If someone could point me in the right direction I would be very grateful! Hi Within a classic asp webform (using vbscript) I would like part of the form (input boxes within table structure) to be specific/displayed depending on the users selection from the combo box in the row above. I think the best solution would be using Javascript can anyone suggest a solution or example code? Many thanks Sarah The simplified code below works, and should give you an idea of what Im trying to achieve. The final version will have dozens of input fields so you can see why the below method stinks Code: <html><head><title>Values</title>
<script type="text/javascript">
<!--
function getid() {
var myNum = document.frm1.field1.value;
if(myNum == "A"){
document.frm1.field2.value = "1"
} else if(myNum == "B"){
document.frm1.field2.value = "2"
} else {
document.frm1.field2.value = ""
}
var myNum2 = document.frm1.field3.value;
if(myNum2 == "A"){
document.frm1.field4.value = "1"
} else if(myNum2 == "B"){
document.frm1.field4.value = "2"
} else {
document.frm1.field4.value = ""
}
}
//-->
</script>
</head><body>
<form name="frm1" id="frm1">
<input type="text" size="40" name="field1" id="field1" onChange="JavaScript:getid();" /><input type="text" size="4" id="field2" name="field2" /> <br>
<input type="text" size="40" name="field3" id="field3" onChange="JavaScript:getid();" /><input type="text" size="4" id="field4" name="field4" /> <br>
</form>
</body>
</html>
Each text input will have A or B written in by the user, which should automatically place that letters associated ID in its partner field. If any other letter is entered the ID will automatically be left blank. With the above code I'd need to repeat it over and over for each of the dozens of input fields. The final version wont be using simply A/B either but around 50 possible inputs each with their own ID which would make around 1000 possible variations. What am I missing here that will simplify the process? Thanks Hi there, I was hoping for some advice, not really answers as this is part of an assignment. What I have been given is two arrays and I need to multiply the elements in the first with the corresponding value in the second and then save the result into a third array. I am very very new to this and have tried every option i can think of to do this, I entered the result values into the third array just to check the rest of my code is right, this is the only part that has me stumped. Any tips would be hugely appreciated, thank you ) The page loads and existing data is put in their correct fields. When I click 'add more' to add more fields to the form it does so and I am able to add new data. If on adding a new fields and its data I click 'add more' again it clears out the recently added data from the fields. The existing data that was present when the page first loaded is still their but all the new fields added data is cleared. how can I get it so the data stays, like in phpmyadmin when adding new fields. JS Code: function addmore(addwhat) {
// count existing boxes to find out next number to use.
// ?
if (addwhat == 'addresses') {
fieldid = 'addressesdiv';
}
if (addwhat == 'namesnumbers') {
fieldid = 'namesdiv';
}
var dv = document.getElementById(fieldid).innerHTML;
var lines = dv.match(/<br>/ig).length;
if (addwhat == 'addresses') {
document.getElementById('addressesdiv').innerHTML += '<textarea name="address' + lines + '" cols="30" rows="2"></textarea><br>';
}
if (addwhat == 'namesnumbers') {
document.getElementById('namesdiv').innerHTML += '<textarea name="name' + lines + '" cols="30" rows="2"></textarea><br>';
document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile' + lines + '" cols="30" rows="2"></textarea><br>';
}
}
PHP Code: <?
if ($_POST['Submit'] == 'Submit') {
echo("sent<br>");
for ($c = 1; $c <= (count($_POST)-1)/2; $c++) {
echo("name" . $c . " = " . $_POST['name'.$c] ." mobile" . $c . " = " . $_POST['mobile'.$c] . "<br>");
}
}
$customer_id = "11";
// get existing data.
// if not yet sent get data from databases
$ok = "no";
if ($_POST['Submit'] != "Submit") {
echo("<br>not sent<br>");
$res = db_query("SELECT * FROM `customer_client_names` WHERE `customer_id` = '". $customer_id ."'");
$maincount = mysql_num_rows($res);
echo("<br>number of clients = ".$maincount."<br>");
for ($c = 1; $c <= $maincount; $c++) {
$_POST['name'.$c] = mysql_result($res, $c-1, "client_name");
$_POST['mobile'.$c] = mysql_result($res, $c-1, "client_mobile");
echo("cn = ".$_POST['name'.$c] . " cm = ".$_POST['mobile'.$c] . "<br>");
}
} else {
// display last posted info
echo("<br>sent<br>");
$ok = "yes";
// check if info was entrted correctly or not.
for ($c = 1; $c <= ((count($_POST)-1)/2); $c++) {
if ($_POST['name'.$c] != "" && $_POST['mobile'.$c] == "") {
echo("<br>" . $_POST['name'.$c] ." was not given a mobile number<br>");
$ok = "no";
$maincount ++;
}
if ($_POST['name'.$c] == "" && $_POST['mobile'.$c] != "") {
echo("<br>" . $_POST['mobile'.$c] ." mobile was not given a name<br>");
$ok = "no";
$maincount ++;
}
}
}
if ($ok == "no") {
?>
<form name="form1" method="post" action="?ac=<?=$menu_item;?><? echo("&phpsession=" . $phpsession); ?>">
<div style="width: 850px;">
<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
?>
<textarea name="<?='name'.$c;?>" cols="30" rows="2"><?=$_POST['name'.$c];?></textarea><br>
<?
}
} ?>
</div>
<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
?>
<textarea name="<?='mobile'.$c;?>" cols="30" rows="2"><?=$_POST['mobile'.$c];?></textarea><br>
<?
}
} ?>
</div>
</div>
<br style="clear: both;">
<a href="#" onClick="javascript:addmore('namesnumbers'); return false;" >Add more</a>
<input type="hidden" name="customer_id" value="<?=$customer_id;?>">
<input type="submit" name="Submit" value="Submit">
</form>
<?
}
?>
I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution? Code: <script language="Javascript" type="text/javascript">
<!--
//Add more fields dynamically.
function addField(area,field,limit) {
if(!document.getElementById) return; //Prevent older browsers from getting any further.
var field_area = document.getElementById(area);
var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
//Find the count of the last element of the list. It will be in the format '<field><number>'. If the
// field given in the argument is 'friend_' the last id will be 'friend_4'.
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;
//If the maximum number of elements have been reached, exit the function.
// If the given limit is lower than 0, infinite number of fields can be created.
if(count > limit && limit > 0) return;
//Older Method
field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>";
}
//-->
</script>
<ol id="steps_area"><li>
<textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' />
</li>
</ol>
<input type="button" value="Add" onclick="addField('steps_area','',15);"/>
I have a problem with adding new inputs to a form (if and when required), Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank. JS: Code: fields = 0;
function addInput() {
if (fields != 100) {
document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />";
fields += 1;
} else {
document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed.";
document.form.add.disabled=true;}
}
form: Code: <form action="index.php" method="post"> <div id="input"> <input type="text" name="input[]" size="30" maxlength="15" /> </div> <!-- button --> <div id="more"> <input type="button" onclick="addInput()" name="add" value="More" /> </div> <!-- // button --> <input type="submit" name="submit" value="Submit" /> </form> as usual any help is appretiated .. I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. Hi, i want to set an input value to the same value as the input selected from another input on the same form so when the user selects input 1 i want the hidden input2 to get the same value im guessing i use onsubmit because its hidden so there wont be a focus or blur this would be part of the input Code: onsubmit="(this.value = this.othervalue)" othervalue being the other input name="othervalue" is that the correct syntax Hi, i have an input value array for customer ids, i also need to make a copy of that array into another input element on submit to use for another process. So far here is what i have come up with regarding the js the current html is this Code:
<!-- original input -->
<input id="cb<?php echo $i;?>" name="cid[]" value="<?php echo $commissions[$i]['id'];?>" onclick="isChecked(this.checked);" type="checkbox" />
<!-- this is new html input which is outside the $i loop that i need a copy of cid[] stored on submit
<input type="hidden" name="ids[]" onsubmit="valueTovalue();" />
<!-- here is the js so far -->
<script type="text/javascript">
function valueTovalue()
{
var valin = document.adminForm.cid.value; //cid is the array cid[]
document.adminForm.ids.value = valin; //copy the array to the new input element array ids
}
</script>
so basically if they click 1 cid then ids will also show 1, if they click all cid then ids will show all as well. will that work the way i have it, am i even close here.. thanks update: what i have seems to work fine for text values or string values but not for arrays, what am i missing that it wont copy an array? Array ( [cid] => Array ( [0] => 1 ) [task] => remarksonly [remark] => hhhyyy [boxchecked] => 1 [ids] => Array ( [0] => ) ) am i getting closer lol Code:
function valueTovalue()
{
var valin = cid.concat;
document.adminForm.ids.value = valin.concat;
return(true);
this has to be close i hope Code: document.adminForm.ids.value = [].concat(document.adminForm.cid); Hi all can someone guide me (total JS newbie) on this presumably pretty easy task? I have a "parent" page with some text inputs in it (a form). This is what I am after: -when the user clicks a link it pops open a new window via JS - "child" (this is working). -in the "child" window there are also some text inputs (another form) (done). -when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window. Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled! I set up a test page to make this all easy to talk about: http://www.yellow-turtle.com/testDumpMe_parent.html Please let me know! Thanks! -John ok I have a PHP form that I want to make Name Email and Phone required using javascript how would I do this here is my .php and html form. I can't get anything to work. Please Help Code: <?PHP
$to = "";
$subject = "Results from your Request Info form";
$headers = "From: Tampabaychartering.net";
$forward = 0;
$location = "";
$date = date ("l, F jS, Y");
$time = date ("h:i A");
$msg = "Below is the result of your feedback form. It was submitted on $date at $time.\n\n";
if ($_SERVER['REQUEST_METHOD'] == "POST") {
foreach ($_POST as $key => $value) {
$msg .= ucfirst ($key) ." : ". $value . "\n";
}
}
else {
foreach ($_GET as $key => $value) {
$msg .= ucfirst ($key) ." : ". $value . "\n";
}
}
mail($to, $subject, $msg, $headers);
if ($forward == 1) {
header ("Location:$location");
}
else {
header("Location: http://www.tampabaychartering.com/booking.html");
exit ();
}
?>
<hr>
<form action="booking.php" method="post" name="ContactForm" onsubmit="return ValidateContactForm();">
<p align="left">
<b><font face="Comic Sans MS" size="4" color="#003366">Type of Charter
<select size="1" name="type_of_charter">
<option selected>Flats Fishing</option>
<option>Inshore Fishing</option>
<option>Offshore Fishing</option>
</select></font></b></p>
<p align="left">
<b><font face="Comic Sans MS" size="4" color="#003366">Have you fished with me
before?
<select size="1" name="have_fished_with_you_before">
<option>yes</option>
<option selected>no</option>
</select></font></b></p>
<p align="left"><font face="Comic Sans MS" size="4" color="#003366"><b>How
many days do you want to fish? </b></font><b>
<font face="Comic Sans MS" size="4" color="#003366">
<select size="1" name="days_you_want_to_fish">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select> </font></b></p>
<p align="left"><b><font color="#003366" size="4" face="Comic Sans MS">How
Long of a trip do you want
<select size="1" name="how_long_do_you_want_to_fish">
<option selected>Full Day Flats $450</option>
<option>Full Day Inshore $450</option>
<option>Full Day Offshore $650</option>
</select></font></b></p>
<p align="left"><b><font face="Comic Sans MS" size="4" color="#003366">How
many people in your party? For parties of more than 4 please call before booking.<select size="1" name="how_many_people">
<option>1</option>
<option selected>2</option>
<option>3</option>
<option>4</option>
</select></font></b></p>
<p align="left" style="margin-top:">
<b><font face="Comic Sans MS" size="4" color="#003366">How many adults?
<select size="1" name="adults_in_group">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select> How Many children under 12? <select size="1" name="number_of_children">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select></font></b></p>
<p align="left"><b><font color="#003366" size="4" face="Comic Sans MS">Choose
the date Of your Charter.</font></b></p>
<p align="left"><b><font color="#003366" face="Comic Sans MS" size="4">
<select size="1" name="Charter_Date">
<option selected>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select size="1" name="day">
<option selected>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select> <select size="1" name="year">
<option selected="">2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
</select></font></b></p>
<p align="left"><b><font face="Comic Sans MS" size="4" color="#003366">Payment method preffered for deposit?<select size="1" name="Deposit_Payment_Method">
<option>Credit Card</option>
<option selected>Money Order</option>
</select></font></b></p>
<p><strong><font color="#003366" size="4" face="Comic Sans MS">How can I get in touch with you?</font></strong></p>
<dl>
<dd>
<table height="150">
<tr>
<td height="27">
<p align="left"><b>
<font size="4" face="Comic Sans MS" color="#003366">Name </font></b>
<td height="27">
<p align="left">
<font face="Comic Sans MS" size="4"><b><font color="#003366">
<input type="text" size="35" maxlength="256" name="name">
</font></b><font color="#FF0000">required</font><b><font color="#003366">
</font></b></font>
</tr>
<tr>
<td height="27">
<p align="left"><b>
<font size="4" face="Comic Sans MS" color="#003366">E-mail </font>
</b>
<td height="27">
<p align="left"><font face="Comic Sans MS" size="4"><b>
<font color="#003366">
<input type="text" size="35" maxlength="256" name="email">
</font></b></font>
</tr>
<tr>
<td height="27">
<p align="left"><b>
<font size="4" face="Comic Sans MS" color="#003366">Home </font></b>
<td height="27">
<p align="left">
<font face="Comic Sans MS" size="4"><b><font color="#003366">
<input type="text" size="35" maxlength="256" name="phone">
</font></b><font color="#FF0000">required 10 digits </font><font color="#003366">
</font></font></tr>
<tr>
<td height="27">
<b><font size="4" face="Comic Sans MS" color="#003366">Work</font></b><td height="27">
<font size="4" face="Comic Sans MS" color="#003366"><b>
<input type="text" size="35" maxlength="256" name="Work_number"></b></font></tr>
<tr>
<td height="27">
<p align="left"><b>
<font size="4" face="Comic Sans MS" color="#003366">Cell</font></b><td height="27">
<p align="left">
<font face="Comic Sans MS" size="4"><b><font color="#003366">
<input type="text" size="35" maxlength="256" name="User_cell ">
</font></b></font>
</tr>
</table>
</dd>
</dl>
<p align="left"><font face="Comic Sans MS"><b><font size="4" color="#003366">What is the best time to call?
</font></b>
<font color="#003366"><b><font size="4">From</font></b></font></font><font face="Comic Sans MS" size="4"><b><font color="#003366"><select size="1" name="best_time_to_call">
<option selected>8am</option>
<option>9am</option>
<option>10am</option>
<option>11am</option>
<option>12am</option>
<option>1pm</option>
<option>2pm</option>
<option>3pm</option>
<option>4pm</option>
<option>5pm</option>
<option>6pm</option>
<option>7pm</option>
<option>8pm</option>
<option>9pm</option>
<option>10pm</option>
</select> </font></b></font><font face="Comic Sans MS"> <b>
<font size="4" color="#003366">To </font></b></font>
<font face="Comic Sans MS" size="4"><b><font color="#003366"><select size="1" name="until">
<option>8am</option>
<option>9am</option>
<option>10am</option>
<option>11am</option>
<option>12am</option>
<option>1pm</option>
<option>2pm</option>
<option>3pm</option>
<option>4pm</option>
<option>5pm</option>
<option>6pm</option>
<option>7pm</option>
<option>8pm</option>
<option>9pm</option>
<option selected>10pm</option>
</select> </font></b></font>
<p align="left"><b><font face="Comic Sans MS" size="4" color="#003366">How
would you prefer to be contacted?
<select size="1" name="Prefer_to_be_contacted_by">
<option selected>Home Phone</option>
<option>Work Phone</option>
<option>Cell Phone</option>
<option>E-mail</option>
</select></font></b><p align="left"><b>
<font color="#003366" face="Comic Sans MS" size="4">What time zone are you in <select size="1" name="Time_zone">
<option selected>Eastern</option>
<option>Central</option>
<option>Mountain</option>
<option>Pacific</option>
<option>Out of USA</option>
</select></font></b><p align="left"><font color="#FF0000" size="4"><b>Questions or comments about your trip</b></font></p>
<p align="left"><textarea rows="5" name="Comments" cols="67"></textarea></p>
<p align="left"> </p>
<p align="left">
<b>
<font color="#003366" size="4" face="Comic Sans MS">We will contact you as soon as possible to finish Booking your fishing trip.</font></b></p>
<p>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"></p>
</form>
I want to be able to add fields to a form with JavaScript, already had a thread about this in the PHP section and someone gave me some code. But that didn't seem to work So here is some other code: JavaScript: Code: var my_div = null;
var newDiv = null;
function addElement()
{
// create a new div element
// and give it some content
newDiv = document.createElement("div");
newDiv.innerHTML = "<label for=\"column\">Column Name: </label><input style=\"margin-bottom:1em;\" type=\"text\" name=\"column[]\" id=\"column\">";
// add the newly created element and it's content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
HTML: Code: <div class="login">
<form name="tbCreate" method="post">
<label for="tableName">Table Name: </label>
<input type="text" name="tableName"><br />
</form>
<input type="button" name="addElement" onClick="addElement()" value="Add Column">
</div>
<div id='org_div1'></div>
Problem is, it only works if the org_div1 div not between any other tags apart from <body></body>. How can I make it so that the div can be put between the form tags? I am in need of some help. I have a request from a client to have four text fields added together as soon as they input the number. They want the numbers to add together with out having to hit a submit button or have the page change. I have seen and been able to get two out of the four to add together but i can't get the rest. I am pretty new to JS so please be gentle. But any help is greatly appreciated. this is the code i have been trying to work with: [CODE] function calc(A,B,SUM) { var one = Number(A); if (isNaN(one)) { alert('Invalid entry: '+A); one=0; } var two = Number(document.getElementById(B).value); if (isNaN(two)) { alert('Invalid entry: '+B); two=0; } document.getElementById(SUM).value = one + two; } <input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" /> and another number: <input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" /> Their sum is: <input name="sum" value="" id="result" readonly style="border:0px;"> [CODE] |
|||||||