|
JavaScript - How To Add Four Text Fields
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] Similar TutorialsHi all, Please forgive me if this is a dumb question. Is it possible to highlight the contents of all text and/or textareas within one form simultaneously? I've tried to do it using the funciton below, it cycles through allright, but only highlights each field whilst it is in focus, then loses it when it moves to the next field. The result is that only the last text/textarea within the form is highlighted. My aim is to highlight all fields for subsequent spell checking. Any help would be appreciated. Code:
<html>
<head>
<script type="text/javascript">
function SelectText(){
var fields = document.getElementsByTagName("input");
for (var i = 0; i < fields.length; i++){
var node = fields[i];
if (node.getAttribute('type') == "text"){
node.focus();
node.select();
}
}
}
</script>
</head>
<body>
<form id="form1" action="">
<p></p>
<input type="text" id="one" style="width:500px;">
<p></p>
<input type="text" id="two" style="width:500px;">
<p></p>
<input type="button" value="Select Text" onclick="javascript:SelectText();">
</form>
</body>
</html>
Several posts here are almost what I need, but I can't put it all together.... thank you for your help, this is for a pet rescue charity! When selecting "mini" option, my form should should only allow typing in 6 out of 10 text input fields (the first 3 on the front, and the first 3 on the back too if its selected). Other sizes would allow typing in all 10. The NAME must be the same due to the shoppingcart used, but ID can be different. Also, if mini the maxlength of each should be 14, other sizes each maxlength is different. I will try to put the relevant code below, but one entire form is he http://wooftags.com/bone-iframe.html Code: <select name="product1[]">
<option value="mini">mini</option>
<option value="small">small</option>
<option value="medium">medium</option>
<option value="large">large</option>
</SELECT>
<input type="text" name="product1[]2" size="14" maxlength="14" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
<br />
<input type="text" name="product1[]2" size="18" maxlength="18" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
<br />
<input type="text" name="product1[]2" size="20" maxlength="20" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
<br />
<input type="text" name="product1[]2" size="25" maxlength="25" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
<br />
<input type="text" name="product1[]2" size="20" maxlength="20" style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" />
<INPUT TYPE="HIDDEN" NAME="price2" VALUE="1">
<input id="back1" type="text" name="product2[]2" size=14 maxlength=14 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
<br />
<input id="back2" type="text" name="product2[]2" size=18 maxlength=18 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
<br />
<input id="back3" type="text" name="product2[]2" size=20 maxlength=20 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
<br />
<input id="back4" type="text" name="product2[]2" size=25 maxlength=25 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
<br />
<input id="back5" type="text" name="product2[]2" size=20 maxlength=20 style='text-transform: uppercase;' onblur="this.value=this.value.toUpperCase()" disabled="disabled"/>
Hi to everyone, I'm kind of new to html/php/javascript but still I manage to create a nice looking form in wich the users have to fill some text fields and select items from drop list. But I now have a small problem. I need one of those text fields to be automaticly filled by the informations selected in 2 drop lists. This is how it would looks like : Machine-Name : __________ (empty text field) Drop-List1 : abc (the user selected the string "abc" from the list.) Machine-Name : abc- Drop-List 2 : zxy(the user selected the string "zxy" from the list.) Machine-Name : abc-zxy- I hope you understand what I mean. If needed, I can past those fields and list code, but I don't think that would be very useful since it is kind of trivial. So, in words, how would you guys proceed to achieve this goal? Hi. I need to fo a form and the content be sent to a database but i'm stuck... I knwo hot to do forms and also how to send data to mysql using php. But now i need something a bit more complex and i'm stuck. I need to make a form lets say with "parent name, age, child name, child age" Some people has 1 child some people has 2 3 4...and i need to have it separated and not just write like "joe, bob, jack" in the same line. How can i do this? And how should the database be structured? i can't put "id, parent, age, c_name, c_age" because some ppl will need to have more than 1 child in the database. Don't know what to do 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);"/>
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 am working on a page where the user will select a location from a dynamically generated dropdown list. I was able to create the php multidimensional array (tested and working) from a MySql database using the users information at login, but I'm having problems converting it to a javascript multidimensional array. I need to be able to access variables that I can pass to a number of text fields within an html form. For instance, if a user belongs to a company with multiple addresses, I need to be able to let them select the address they need to prepopulate specific text fields. php array creation: Code: if ($row_locations)
{
while ($row_locations = mysql_fetch_assoc($locations))
{
$mail[$row_locations['comp_id']]=array('mailto'=>$row_locations['mailto'], 'madd'=>$row_locations['madd'], 'madd2'=>$row_locations['madd2'], 'mcity'=>$row_locations['mcity'], 'mstate'=>$row_locations['mstate'], 'mzip'=>$row_locations['mzip'], 'billto'=>$row_locations['billto'], 'badd'=>$row_locations['badd'], 'badd2'=>$row_locations['badd2'], 'bcity'=>$row_locations['bcity'], 'bstate'=>$row_locations['bstate'], 'bzip'=>$row_locations['bzip']);
}
}
javascript function - this should create the array and send variables to text fields. Code: function updateAddress() {
var mail = $.parseJSON(<?php print json_encode(json_encode($mail)); ?>);
{
if (comp_id in mail) {
document.getElementById('mailto').value=mail.comp_id.mailto.value;
document.getElementById('madd').value=mail.comp_id.madd.value;
document.getElementById('madd2').value=mail.comp_id.madd2.value;
document.getElementById('mcity').value=mail.comp_id.mcity.value;
document.getElementById('mstate').value=mail.comp_id.mstate.value;
document.getElementById('mzip').value=mail.comp_id.mzip.value;
} else {
document.getElementById('mailto').value='';
document.getElementById('madd').value='';
document.getElementById('madd2').value='';
document.getElementById('mcity').value='';
document.getElementById('mstate').value='';
document.getElementById('mzip').value='';
}
}
}
Where is this breaking? Thanks in advance. As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! Hi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. 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>
Hi, i have this code that generate 10 rows with form fields: Code: <form>
<?php for($i=1;$i<=10;$i++) {?>
<div id="rowz-rep">
<div class="row1"><?=$i?></div>
<div class="row2a"><input name="title[]" type="text" class="fieldSubmit"/></div>
<div class="row3a"><input name="url[]" type="text" class="fieldSubmit"/></div>
<div class="row4a"><select name="type[]" class="dropSubmit"><? foreach($allowed_types as $at) { echo '<option value="'.$at.'">'.$at.'</option>'; }?></select></div>
</div>
<? }?>
</form>
I need that onclick with JS add 10 more rows so i get something like Code: <?php for($i=1;$i<=20;$i++) {?>
Hi all, I'm new to here and JS but I have question for you! So I have this form with inputs that are considered arrays in my PHP code: Code: <input type="checkbox" name="1" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="2" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="3" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="4" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="5" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="6" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="7" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="8" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="9" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="10" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="11" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="12" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="13" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="14" /> <input name="ii[]" type="text"> <br /> <input type="checkbox" name="15" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="16" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="17" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="18" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="19" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="20" /> <input name="i[]" type="text"> <br /> I don't want to keep adding in new spots every time a user want to add a new field. I would like them to be able to press a button that will add another one of those fields and so on. I'm not sure how this can be achieved but that's why I am turning to you! Thanks! 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? Hello I am building a registration page . If the user completes all the required field i load the info into the database but if there are missing fields I combined some javascript into php to display next to the empty field a note that it should be filled. This is my code : Code: <?php
if (isset($_POST['submit']))
{
$username =$_POST['username'];
$password =$_POST['password'];
$password2 =$_POST['password2'];
$firstname =$_POST['firstname'];
$lastname =$_POST['lastname'];
$email =$_POST['email'];
$address =$_POST['address'];
$city =$_POST['city'];
$state =$_POST['state'];
$zip =$_POST['zip'];
$dob =$_POST['dob'];
if (empty($username)){
?> <script language="javascript">
var user =true
</script> ;<?
}
if (empty($password)){
?> <script language="javascript">
var pass =true
</script><? ;
}
And it goes on................... Then next to the inpput box I display a text in case the user didn't fill in the info like this and by the way the above code is in my validate.php page wich i include in the main registration page Code: <?php include ('includes/validate.php');?>
<form action="registration.php" method= "post" >
<fieldset>
<legend>sitename Registration</legend>
<p>
<label for"username">Username</label>
<input type "text" name=username /> <script type="text/javascript">
if (user == true)
{
document.write("Please enter a Username of your choice");
}
</script>
</p>
<p>
<label for"password">Password</label>
<input type "password" name=password /> <script type="text/javascript">
if (pass == true)
{
document.write("Please choose a Password");
}
</script>
</p>
<p>
<label for"password2">Re-type Password</label>
<input type "pass2" name=password2 /> <script type="text/javascript">
if (pass2 == true)
{
document.write("Please re-type your Password");
}
</script>
</p>
And it goes on......for the rest of the input fields. I need some help with a solution for when the user fills in the info and pushes the "register" button the page refreshes and it whipes all the info the user already input but it does display the warnings where the user didn't input any data, so what would be the best way to go to keep the data that the user entered.Thank you. Hi folks. I am new to javascript so please go easy on me if this is a silly request Basically I have a table generated by a php script with a dynamic number of rows and columns. Here is a sample of the output from this script: Code: <tr> <td style='width:60px'><a href='index.php?inc_id=30' onclick='return confirmDelete(this)'>Remove</a></td> <td style='text-align:center'>test</td> <td ><input type='text' name='0inccol0' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol1' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol2' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol3' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol4' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol5' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol6' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol7' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> </tr> <tr> <td style='width:60px'><a href='index.php?inc_id=31' onclick='return confirmDelete(this)'>Remove</a></td> <td style='text-align:center'>test2</td> <td ><input type='text' name='1inccol0' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol1' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol2' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol3' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol4' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol5' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol6' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol7' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> </tr> <tr> <td style='width:60px'><a href='index.php?inc_id=32' onclick='return confirmDelete(this)'>Remove</a></td> <td style='text-align:center'>test3</td> <td ><input type='text' name='2inccol0' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol1' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol2' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol3' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol4' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol5' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol6' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol7' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> </tr> What I want to do is create a row of 'totals' fields at the bottom of this table that will sum the fields in the column above. Looking at the naming convention above, the first number is the row, the number at the end is the column so I will want to sum all of the input values with a name ending in 0 in the first 'total' field, all the input values with names ending in 1 in the next and so on. The number of rows and columns is dynamic based on the users selections prior to buiding the table. The reason I am using input fields is that I would also like an event (onChange/onBlur?) that will update the totals fields if a user manually changes the value in one of the inputs. Any advice on this will be appreciated! how can i copy the contents of the fields in this form so that i can just paste it anywhere? thanks! <!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"> function copy(other) { var tempval=eval("document."+other) tempval.focus() tempval.select() therange=tempval.createTextRange() therange.execCommand("Copy") } </script> </head> <body> <form id="other" name="other" method="post" action=""> <p>DSL Number: <input type="text" name="phonenumber" /> </p> <p>Full Name: <input type="text" name="fullname" /> </p> <p>Country: <input type="text" name="country"/> </p> <p> <textarea name="txtarea" id="txtarea" cols="45" rows="5"></textarea> </p> <p> <input type="button" value="Copy" onclick="copy();" /> </p> </form> </body> </html> 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 have absolutley no experience in using javascript so, if answering, please be gentle with me! I have a form (below) which I need the user to enter some/any data into every field. Can you please advise what code I need and where to put the code? Code: <form name="Contact Us" method="post" action="contact_form.php">
<p> </p>
<table width="90%" border="0" align="center">
<tr>
<td width="35%"><strong>Your Name:</strong></td>
<td width="65%"><input name="name" type="text" id="name" size="26"></td>
</tr>
<tr>
<td width="35%"><strong>House name/number:</strong></td>
<td width="65%"><input name="house" type="text" id="house" size="26"></td>
</tr>
<tr>
<td width="35%"><strong>Road name:</strong></td>
<td width="65%"><input name="road" type="text" id="road" size="26"></td>
</tr>
<tr>
<td width="35%"><strong>Town/City:</strong></td>
<td width="65%"><input name="town" type="text" id="town" size="26"></td>
</tr>
<tr>
<td width="35%"><strong>County:</strong></td>
<td width="65%"><input name="county" type="text" id="county" size="26"></td>
</tr>
<tr>
<td width="35%"><strong>Postcode:</strong></td>
<td width="65%"><input name="postcode" type="text" id="postcode" size="26"></td>
</tr>
<tr>
<td><strong>Telephone No:</strong> </td>
<td><label>
<input name="telephone" type="text" id="telephone" size="26">
</label></td>
</tr>
<tr>
<td><strong>Email Address:</strong> </td>
<td><label>
<input name="email" type="text" id="email" size="26">
</label></td>
</tr>
<tr>
<td><strong>Area of Interest: </strong></td>
<td><label>
<select name="interest" id="interest">
<option>Accommodation</option>
<option>Conferencing / Banqueting</option>
<option>Restaurant</option>
<option>Weddings</option>
<option>Other</option>
</select>
</label></td>
</tr>
<tr>
<td><strong>Your Enquiry:</strong></td>
<td><label>
<textarea name="enquiry" cols="30" rows="3" id="enquiry"></textarea>
</label></td>
</tr>
<tr>
<td colspan="2"><strong>Subscribe to Mail List: </strong> <input name="subscribe" type="checkbox" id="subscribe" value="yes" checked></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="submit" name="Submit" value="Submit">
</label>
<label for="Submit"></label>
<input type="reset" name="Submit2" value="Reset" id="Submit"></td>
</tr>
</table>
|
|||||||