JavaScript - Adding Fields.

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);"/>

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 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 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!

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 />&nbsp;&nbsp;&nbsp;&nbsp; <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 />&nbsp;&nbsp;&nbsp;&nbsp; <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 />&nbsp;&nbsp;&nbsp;&nbsp; <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, 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++) {?>

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&nbsp;
  <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>&nbsp;</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>&nbsp;&nbsp;
  <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>&nbsp; <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">
            &nbsp;</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?&nbsp;&nbsp;&nbsp;
  </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>&nbsp; </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">&nbsp;</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>

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 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

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>

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">
					&nbsp;
				</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

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)">&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" size="7" value="0" name="tw1" readonly="readonly"><b>Total Lbs<b>&nbsp;&nbsp;&nbsp;&nbsp;
</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)">&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" size="7" value="0" name="tw1"><b>Total Lbs<b>&nbsp;&nbsp;&nbsp;&nbsp;
</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,

I modified the below code to make a conditional statement. The condition is .. if a user selects Childs_Fullname then the BV_Choice-1 and BV_Choice_2 should be required fields. I am still able to save the form without the above conditional required fields. What am I doing wrong?? Can some point me in the right direction.
Thanks
Vinny
------------------------------------------------------------------
<script language="JavaScript" type="text/javascript">
function BV_Class_show() {
var val = document.getElementById("x_Child1_Fullname").value;
if (document.getElementById("x_Child1_Fullname").value != "") { // a name was selected
if (document.getElementById("x_Child1_BV_Choice_1") value == "")||(document.getElementById("x_Child1_BV_Choice_2") value == "" )) { // either not selected
alert ("You must make a selection from x_Child1_BV_Choice_1 and x_Child1_BV_Choice_2");
return false;
}
}
</script>

i have a script which i found on the internet. i modify that script according to my needs. what is in that script is there are three form fields with two buttons. one button is "Give me more fields" clicking on this button will give you more fields. and second button is submit so the data goes to server side and will be added to db. the problem is when i click give me more fields it gives me three more fields which is right but when i fill all these fields and click submit button it adds to the db but the data in the first three fields adds in the one row and the other three fields data adds in separate row which is not fine for me. so how can i do this so all the data will be added to only one row.

here is js code
Code:

var counter = 0;
//Start a counter. Yes, at 0
function add_phone() {
    counter++;
// I find it easier to start the incrementing of the counter here.
    var newFields = document.getElementById('addQualification').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
                newField[i].name = theName + counter;
// This will change the 'name' field by adding an auto incrementing number at the end. This is important.
        }
        var insertHere = document.getElementById('addQualification');
// Inside the getElementById brackets is the name of the div class you will use.
        insertHere.parentNode.insertBefore(newFields,insertHere);
}

here is my form
Code:

<form name="addAQualification" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="phone">
   Degree:
    <input type="text" name="degree_0" value="" /><br>
    CGPA/Grade:
    <input type="text" name="cgpa_0" value="" /><br>
    Institute:
    <input type="text" name="institute_0" value="" /><br>
</div>
<div id="addQualification" style="display: none;">
Degree:
    <input type="text" name="degree_" value="" /><br>
CGPA/Grade:
    <input type="text" name="cgpa_" value="" /><br>
Institute:
   <input type="text" name="institute_" value="" /><br>
</div>
<input type="button" id="add_phone()" onclick="add_phone()" value="Give me more fields!" /><br>
<input type="submit" name="submit" value="submit" />
</fieldset>
</form>

here is my php
Code:

<?php
    if(isset($_POST['submit']))
//This checks to make sure submit was clicked
    {
        echo "You clicked submit!<br>";
        echo "Here is your data<br>";
        echo "<br>";
        if ($_POST['cgpa_0'])
//This checks that the proper field has data
        {
                $continue = FALSE;
                $i = 0;
                while ($continue == FALSE)
                {
                    if (isset($_POST['degree_'.$i]))
//This looks for an entry after 0 and increments
                    {
                    echo $_POST['degree_'.$i] . " = " . $_POST['cgpa_'.$i] . "<br>";
//Echoing the data
                    $degree1 = $_POST['degree_'.$i];
                    $cgpa1 = $_POST['cgpa_'.$i];
               $institute1 = $_POST['institute_'.$i];
               $db = mysql_connect("localhost");
               mysql_select_db("test", $db);
                    $query = "INSERT INTO cv 
                                 (
                                 degree1, 
                                 cgpa1, 
                                 institute1
                                  ) 
                                 VALUES 
                                  (
                                  '$degree1', 
                                  '$cgpa1', 
                                  '$institute1'
                                  )";
                    $result = mysql_query($query);
//The four lines above is the example on how the data would be put into a MySQL database. It's not used here
                }
                else
                {
                    $continue = TRUE;
                }
                $i++;
            }
        }
    }
?>