|
JavaScript - How To Do Same As Phpmyadmin Add New Fields, Keeping Current Data In Fields.
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>
<?
}
?>
Similar TutorialsSo i have a form with fields (30+), and about 5 of them are fields that need to pass into my dropdown (actually a dynmaic dropdown, select SOURCE, then whatever source u select it'll show options that are mysql source=$source), so it can go into my mysql query, and filter out the best results. (i.e date_of_birth, min_credits, state, etc). Needs to be done without submitting, hence javascript. Im echo'ing my query and its saying the variables i'm trying to pass are UNDEFINED. Am I not passing the vars correctly? do i need to prep the vars to "grab" them in the current field? this is what i have in my <head> Code: <script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getSchool(id,hs_grad_year,dob_day,dob_month,dob_year,min_credits,state) {
var strURL="findSchool.php?source="+id+"&hs_grad_year="+hs_grad_year+"&dob_day="+dob_day+"&dob_month="+dob_month+"&dob_year="+dob_year+"&min_credits="+min_credits+"&state="+state;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('schooldiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getSub(id,cid) {
var strURL="findSub.php?source="+id+"&cid="+cid;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('subdiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
The only var that is passing is SOURCE, and that's because its the name of the first dropdown I'm VERY new to javascript, do i need to set up like a GET method on my RECEIVING page? or can i just pass variables through? Do i need to get the "existing" data in the fields first? Thanks in advance, JT 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 2 types of addresses 1. Permanent address > Postal code, Street, City, State, Country 2. Current address > Postal code, Street, City, State, Country and a check box 'Copy from Permanent address' with Current address when i checked that check box then all values from 'Permanent address' will be copy to 'Current address' Please send me the code I have here a code that will automatically generate two text fields (Title & Price) when "Add another article" is pressed. I got this from the web, but I want instead of using a text field, I want it to create a drop down menu based on a mysql table, then update the price automatically (also based on the mysql table) on the other text field once a selection has been made on the drop down menu. Code: <link rel="stylesheet" type="text/css" media="screen" />
<style type="text/css"></style>
<script type="text/javascript">
var elCount = 2;
function add() {
var parent = document.getElementById('parent');
var article = document.createElement('DIV');
article.id = 'article_' + elCount;
article.name = 'article_' + elCount; // NEW LINE
var article_title_label = document.createElement('LABEL');
article_title_label.appendChild(document.createTextNode('Title ' + elCount + ': '));
var article_title_text = document.createElement('INPUT');
article_title_text.id = 'article_' + elCount + '_title';
article_title_text.name = 'article_' + elCount + '_title'; // NEW LINE
var article_textarea_label = document.createElement('LABEL');
article_textarea_label.appendChild(document.createTextNode('Price ' + elCount + ': '));
var article_textarea = document.createElement('INPUT');
article_textarea.id = 'article_' + elCount + '_price';
article_textarea.name = 'article_' + elCount + '_price'; // NEW LINE
article.appendChild(article_title_label);
article.appendChild(article_title_text);
article.appendChild(article_textarea_label);
article.appendChild(article_textarea);
parent.appendChild(article);
elCount++;
}
</script>
<body>
<div id="parent">
<div id="article_1">
<label for="article_1_title">Title 1: </label><input type="text" name="article_1_title" id="article_1_title" />
<label for="article_1_price">Price: </label><input type="text" name="article_1_price" id="article_1_price" />
</div>
</div>
any ideas? Thanks 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++) {?>
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. 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 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! 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] 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! 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 I have a table that has 20 or so columns. The last 5 columns need to be color coded. The numbers will be populated in those columns, and for example.. column 1 = (for any field in this column) >50 red 45-50 yellow <=40 green each of the last 5 columsn have to be like this except with different numbers. can someone help with this ? Hi So, I have a working single autocomplete function, but I want to use the same function on different fields.... this is my code: Code:
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<div>
<form>
<script type="text/javascript">
var index = '1';
</script>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
I know the id's are the same in this, but I tried changing them and it still seems to make little difference.. I did wonder if I could add something variable to the id's and pass that in the function call, but could not figure it out.... the above gives me autocomplete on two fields, but will only fill one of them... Any suggestions would be appreciated Hi guys, I created a form that contains about 10 form fields and would like to add the option to dynamically add more sets of those 10 fields if a user clicks a word or a button but I need help. I'm a beginner when it comes to JavaScript and would appreciate any help. This is what I need to generate dynamically. Can someone give me an idea of how to get started please? Code: <div id="dynamicInput"> <ul> <li>1</li> <li><input name='textfield1' type='text' size='10' /></li> <li><select name='commodity' width='100' style='width: 100px'> <option>Option 1</option> </select></li> <li><input name='textfield2' type='text' size='5' /></li> <li><input name='textfield3' type='text' size='10' /></li> <li><input name='textfield4' type='text' size='10' /></li> <li><input name='textfield5' type='text' size='10' /></li> <li><input name='textfield6' type='text' size='5' /></li> <li><input name='textfield7' type='text' size='5' /></li> <li><input name='textfield8' type='text' size='5' /></li> </ul> </div> I would appreciate assistance with the following case. Thank you in advance. I have two fields with values, e.g. Field1: 123456-1- 01 Field2: 01 -0001 I need to compare the last two digits of Field1( 01 ) against the First two digits of Field2 ( 01 ) I would assume OnChange moving from Field2. If the two do not match throw an alert. Thanks!! A PHP/JS application that runs fine on the live server misbehaves on localhost. All the prefilled fields are showing empty. Any help would be appreciated. Thanks. Will update the thread with the code soon. Please let me know if there is a configuration error or general JS error. One error I get is something like : "Object does not support this method " or so.... Pls help I have been looking around on the webs but have not found anything. I can find how to add multiple fields, but what if they reside on different forms on the same page? For example, here is my code with two forms: Code: <FORM name="form1"> <b>Size</b><input type="text" size="12" value="" name="size">* <b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"> <b>-</b> <input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> <input type="text" size="15" value="" name="xtra">* <input type="hidden" size="4" value="304.8" name="b1"> <input type="hidden" value="0" name="ans1" size="10"> <input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b> <input type="text" size="7" value="0" name="tw1" readonly="readonly"><b>Total Lbs<b> </FORM> <FORM name="form2"> <b>Size</b><input type="text" size="12" value="" name="size">* <b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"> <b>-</b> <input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> <input type="text" size="15" value="" name="xtra">* <input type="hidden" size="4" value="304.8" name="b1"> <input type="hidden" value="0" name="ans1" size="10"> <input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b> <input type="text" size="7" value="0" name="tw1"><b>Total Lbs<b> </FORM> In this example, I want to sum the two fields named "tw1" (the last field on each form) into a text box. Is this possible? hi guys kindly assist in this i have the code below used to generate additional dynamic fields how can i save data entered in mysql??? <HTML> <HEAD> <TITLE>New Task</TITLE> <link rel="stylesheet" href="style1.css" type="text/css"/> <meta http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = rowCount + 1; newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } </SCRIPT> </HEAD> <BODY> <br> <br> <h2>INPUT NEW TASK</h2> <table border="1" width="100%"> <tr> <td> <fieldset> <legend></legend> <table border="0" width="100%"> <tr> <td>User:</td> <td><input type="text" size="20" name=""disabled></td> <td>Start Date:</td> <td><input type="text" size="20"></td> </tr> <tr> <td>Client name:</td> <td><select name=""></select></td> <td>Process</td> <td><select name=""></select></td> <td>Day?</td> <td><input type="text" size="5"></td> </tr> </table> </fieldset> <fieldset> <legend>Tasks</legend> <table border="0" width="100%"> <th width="5">select</th><th width="5">No</th><th width="150">Task</th><th width="400">Description</th><th width="100">Start Time</th> <th width="100">End Time</th><th width="100">Worked hrs</th><th width="90">Action</th> <tr> </table> <TABLE id="dataTable" width="100%" border="1"> <TD><INPUT type="checkbox" name="chk"/></TD> <td width="5"><input type="text" size="5"name=""disabled></td> <td width="150"><select name=""></select></td> <td><textarea rows="2" cols="30"></textarea></td> <td><input type="text" size="10"name=""></td> <td><input type="text" size="10"name=""enabled></td> <td><input type="text" size="10"name=""disabled></td> <td><input type="button"type="button" value="+" onclick="addRow('dataTable')"></td> <td><input type="button"type="button" value="-" onclick="deleteRow('dataTable')"></td> </tr> </table> </fieldset> <table border="0" width="100%"> <tr> <td width="122"><input type="button" value="SAVE"></td> <td></td> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </BODY> </HTML> |
|||||||