JavaScript - Dynamic Input Field Generation

I'm new in web-development. I've searched it but it's not found. I make a input then how i get value of it for javascript value?

I have a form that has a pretty complicated combo box - a user starts typing text, it queries a database for matches, and displays the results to the user.

The user can then select the match they desire and it has a value id, which I am currently sending to a hidden field in the form.

So, for example: user starts typing in a movie name, Seven - it returns Seven and user selects it. The form submits the id of the movie seven (say 12) to a hidden field.

Where I am stumped: Once a user selects a movie title, I have another drop down select box that is to display the available formats of the movie by querying my database based on the product id (12) and returning the available formats in the list:

DVD
BLUERAY
VHS

I am pretty good at programming, but I cannot figure this out - how to make the select box fire and return results once the value for the textbox has been captured.

Can anyone help me?

I'm building a template editor and need some help changing some of the variables.

Part 1.

Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s

I need to be able to fill out two fields to change DEALERNAME and 00/00/00.
I found a way to do this but it required the output to be in a field. I need it the output to look no different than before.


Part 2.

I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3.

Head
Code:

<script language="javascript" type="text/javascript">
        function detail1a(){
        document.getElementById("detail1").innerHTML = "Up to 5 Quarts";
        }
        function detail1b(){
        document.getElementById("detail1").innerHTML = "Synthetic Oil Extra";
        }
		function detail1c(){
        document.getElementById("detail1").innerHTML = "Lube Chassis";
        }
		function detail2a(){
        document.getElementById("detail2").innerHTML = "Up to 5 Quarts";
        }
        function detail2b(){
        document.getElementById("detail2").innerHTML = "Synthetic Oil Extra";
        }
		function detail2c(){
        document.getElementById("detail2").innerHTML = "Lube Chassis";
        }
		function detail3a(){
        document.getElementById("detail3").innerHTML = "Up to 5 Quarts";
        }
        function detail3b(){
        document.getElementById("detail3").innerHTML = "Synthetic Oil Extra";
        }
		function detail3c(){
        document.getElementById("detail3").innerHTML = "Lube Chassis";
        }
        </script>

Body
Code:

					
<span style="font-weight: bold;">Offer Details</span><br />
					<p style="margin: 8px 10px">
					Detail 1<br />
					<input type="radio" name="on/off" onclick="detail1a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail1b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail1c();" />Lube Chassis<br />
					</p>
					<p style="margin: 8px 10px">
					Detail 2<br />
					<input type="radio" name="on/off" onclick="detail2a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail2b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail2c();" />Lube Chassis<br />
					</p>
					<p style="margin: 8px 10px">
					Detail 3<br />
					<input type="radio" name="on/off" onclick="detail3a();" />Up to 5 quarts<br />
					<input type="radio" name="on/off" onclick="detail3b();" />Synthetic Oil Extra<br />
					<input type="radio" name="on/off" onclick="detail3c();" />Lube Chassis<br />
					</p>

Output
Code:

										
<ul>
<li><span id="detail1">Detail 1</span></li>
<li><span id="detail2">Detail 2</span></li>
<li><span id="detail3">Detail 3</span></li>
</ul>

Below is my previous code I had working in the manner it would change the price, sub_total, tax, sh, total, and total_paid input fields to 0. There are two problems with this...

1. When it outputs to the input fields, the value displays as 0 instead of 0.00.
2. I need to have it only react when the value typed into the input field "trees_sold" is "0". If any higher, I would like it to ignore the statement.

Code:

<!-- Comp all prices to zero value -->
<SCRIPT LANGUAGE="JavaScript">
var trees_sold = 0.00;

function InitSaveVariables(form) {
	price = form.price.value;
	sub_total = form.sub_total.value;
	tax = form.tax.value;
	sh = form.sh.value;
	total = form.total.value;
	total_paid = form.total_paid.value;
}

function CompPrices(form) {
	if (trees_sold == 0.00) {
	InitSaveVariables(form);
	form.price.value = 0.00;
	form.sub_total.value = 0.00;
	form.tax.value = 0.00;
	form.sh.value = 0.00;
	form.total.value = 0.00;
	form.total_paid.value = 0.00;
	}
}
</script>

Code:

<input name="trees_sold" id="trees_sold" size="15" onkeyup="javascript:CompPrices(this.form);" maxlength="15" />

Below is my current code I'm working with that I can't seem to get to function properly. I've modified the first two lines of code here, and am attempting to pull any data that is typed in and automatically take into consideration if it is a "0" value, it reacts as my code below says "if (trees_sold == 0.00)" and if anything else, it will not do anything. This is not working unfortunately.

Code:

<!-- Comp all prices to zero value -->
<SCRIPT LANGUAGE="JavaScript">
form.trees_sold.value = "";
trees_sold = form.trees_sold.value;

function InitSaveVariables(form) {
	price = form.price.value;
	sub_total = form.sub_total.value;
	tax = form.tax.value;
	sh = form.sh.value;
	total = form.total.value;
	total_paid = form.total_paid.value;
}

function CompPrices(form) {
	if (trees_sold == 0.00) {
	InitSaveVariables(form);
	form.price.value = 0.00;
	form.sub_total.value = 0.00;
	form.tax.value = 0.00;
	form.sh.value = 0.00;
	form.total.value = 0.00;
	form.total_paid.value = 0.00;
	}
}
</script>

Code:

<input name="trees_sold" id="trees_sold" size="15" onkeyup="javascript:CompPrices(this.form);" maxlength="15" />

Anyone have any ideas?

Thank you.

i was wondering what event would clear an input field that has a value in it...

so a user can type their own value....

any examples?

Hi everyone, im new to javascript and I have created two forms.. a value will be put in the first field and the second field should display either $20 or $35 depending on the value of the first field.

Im doing something wrong here.. but I cant see what. Any help is appreciated.


<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Distance from Depot</title>
</head>

<body>

<form id="distanceform">
<ul>
<li>
<label for="Distance from EverWarm Depot">Distance from Depot (km):</label>
<input type="text" id="distance" class="large"/>
</li>
</ul>
</form>

<input name="Button1" type="button" value="calculate" onclick="deliverycost()"/>

<form id="deliverycostform">
<ul>
<li>
<label for="Delivery Cost" >Delivery Cost:</label>
<input type="text" id="deliverycost" class="large"/>
</li>
</ul>
</form>

<script>

function deliverycost()
{
/*
Here is the delivery cost:
less than or equal to twenty kilometres is $20.00
greater than twenty kilometres is $35.00
*/

var distance = document.forms["neworder"]["distance"].value;

if(distance<20)
{
document.getElementById('deliverycost').innerHTML="$20";
}
else
{
document.getElementById('deliverycost').innerHTML="$35";
}

}
</script>

</body>

</html>

How do I insert this javascript: <script language="JavaScript" type="text/javascript" src="http://www.ABC.com/members/display.php?token=email"></script>

Into the values of this:
<input id="Email" name="Email" type="text" size="30" /><input name="emailagent" type="HIDDEN" class="textfield" id="emailagent" value=''INSERT JAVASCRIPT" />

hey friend i am trying to use automatic html input creation using java script for my new project ....


my problem is the field "type propositon 1:is it answer? ignore this one:" not come into input variable such as $_POST['prop1']


i used PHP Code:
pint_r($_POST) 


and the result was
Code:

Array ( [radio1] => on [cid] => 65 [desc] => dfdfdfdfd [submit] => Submit )

why my javascript created input field come into role?


my php html code is

PHP Code:
<table>
  <form  action="new.php" method="post">
   
   
 <tr><td>
 question type:<br />
True or False:<input type="radio" name="radio1">
Objective:<input type="radio" name="radio2">
Other:<input type="radio" name="radio3" >
</td></tr>
<textarea name="desc" rows="6" cols="35" ></textarea> <br />
<a href="javascript:add()" ><b>add proposition</b></a> 
<div id="cat"></div>
<div id="num" style="display:none;"></div>
<br> </table> 


and the java script is ...

PHP Code:
  <script language="javascript" type="text/javascript">
   
    function add()
    {   
        k=document.getElementById("num").innerHTML
        k=parseInt(k);
         if(!k)
        {document.getElementById("num").innerHTML=1;
        k=1;} 
        else{
           document.getElementById("num").innerHTML=k+1;
           k++;
        }  
         document.getElementById("cat").innerHTML+="<tr><td>type propositon "+(k)+":<input type=\"text\" name=\"prop"+k+"\"><td>is it answer? </td> <td> <input type=\"checkbox\" name=\"ans"+k+"\"></td><td><td>     ignore this one:</td><input type=\"checkbox\" name=\"ign"+k+"\"></td></td></tr><br>"            
       
    }


</script> 

can someone help me isolate this input script to 1 designated input field? it just removes any pre-existing value in the field but does so to all input text types now.

Code:

// Home Page Search Box Input Clear 
function initInputs () {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++ ){
        if(inputs[i].type == "text" ) {
            inputs[i].valueHtml = inputs[i].value;
            inputs[i].onfocus = function (){
                this.value = "";
            }
            inputs[i].onblur = function (){
                this.value != ""? this.value = this.value: this.value = this.valueHtml;
            }
        }
    }
}

if (window.addEventListener){
    window.addEventListener("load", initInputs, false);
}
else if (window.attachEvent){
    window.attachEvent("onload", initInputs);
}

I have a script where I move randomly users from one multiple selectfield to another and that part works perfectly, but...

When I want to submit the form I don't get any users passed along, course they are not "selected". I have then read around on the net and I need to create an elemet with a hidden input field where all the randomly selected users is inserted to with comma separation, but dont know how?!?!

This is what I got:
Code:

function randomusers(){
	
	var given = 3, used = {}, randnum, opts = $('#select1 option'), olen = opts.length;
		function ran() { // generate a unique random number
		  randnum = Math.floor(Math.random() * olen);
		  return used['u'+randnum] ? ran() : randnum;
		}
		for (var i = 0; i < given; i++) { // get the correct quantity of randoms
		  used['u'+ran()] = true;
		}
		opts.filter(function(index) { // remove all options that are not one of the randoms
		  return !!used['u'+index];
		}).appendTo('#select2');
	
}

I have tryied to insert this: appendTo('#select2' + '<input type="hidden" name="test[]" value="" />'); but that didn't seem right...

Please help :-)

Hi to all,

I have a dynamic form, when a button is clicked 3 more fields appear, the function is to colect for example from date [02/02/2010] to date [10/02/2010] equals price [250$] per week and if you want another period just click the button and 3 more fields appear.

How do I get all this data to PHP?

Code:

<script type="text/javascript">
			var counter = 3;
			function addNew() {
				// Get the main Div in which all the other divs will be added
				var mainContainer = document.getElementById('mainContainer');
				// Create a new div for holding text and button input elements
				var newDiv = document.createElement('div');
				// Create a new text input
				var newText = document.createElement('input');
				newText.type = "text"; 
				newText.value = "DD/MM/AAAA"; 
				newText.name = counter++;
				
				var newText1 = document.createElement('input');
				newText1.type = "text"; 
				newText1.value = "DD/MM/AAAA";
				newText1.name = counter++;
				
				var newText2 = document.createElement('input');
				newText2.type = "text";
				newText2.value = "0"; 
				newText2.name = counter++;

				// Create a new button input
				var newDelButton = document.createElement('input');
				newDelButton.type = "button";
				newDelButton.value = "Delete";

				// Append new text input to the newDiv
				newDiv.appendChild(newText);
				newDiv.appendChild(newText1);
				newDiv.appendChild(newText2);

				
				// Append new button input to the newDiv
				newDiv.appendChild(newDelButton);
				// Append newDiv input to the mainContainer div
				mainContainer.appendChild(newDiv);
				counter++;
				
				// Add a handler to button for deleting the newDiv from the mainContainer
				newDelButton.onclick = function() {
						mainContainer.removeChild(newDiv);
				}
			}
		</script>
<table style="margin-left:200px" border="0">
  <tr><!-- Row 1 -->
     <td width="140"><b>Start Date</b></td><!-- Col 1 -->
     <td width="142"><b>End Date</b></td><!-- Col 2 -->
     <td width="140"><b>Price per week</b></td><!-- Col 3 -->
  </tr>
  </table>
  
<div style="margin-left:200px" id="mainContainer"><div><input value="DD/MM/AAAA" name="0" type="text" ><input value="DD/MM/AAAA" name="1" type="text" ><input value="0" name="2" type="text" ><input type="button" value="New price" onClick="addNew()"></div>

I have an existing form with radio buttons and a text input field:

<input type="radio" name="recurringEnd" value="yes"> End after <input type="text" name="numberOccurrences" size="1"> occurrences

<input type="radio" name="recurringEnd" value="date"> End on <input type="text" name="endDate" size="8">

My client now wants it setup so that if the text field is filled in, the radiobox is automatically selected.

Any help on this would be greatly appreciated as I am not a JS programmer.

Hi, I am trying to write some code that will test if a user enters a non-numeric character in an input text field, and if so, replaces it with a '0'

Code:

<script type="text/javascript">
function IsNumVal (){
	for (J=1; J<=3; J++){
		if (isNaN(Number(document.getElementById('Intext' + J).value))){
			document.getElementById('Intext' + J).value = 0;
		}
	}
}
</script>

<Body>
<table border="1" cellspacing="1" id = "Numbers">
  <tr id="RowNum1">
    <td ><input type="text" size = "5" name="Intext1" id="Intext1" value = "3" 
 onkeyup="IsNumVal()" /></td>
  </tr>
  <tr id="RowNum2">
    <td><input type="text" size = "5" name="Intext2" id="Intext2" value = "9" 
 onkeyup="IsNumVal()" /></td>
  </tr>
  <tr id="RowNum3">
    <td><input type="text" size = "5" name="Intext3" id="Intext3" value = "18"
  onkeyup="IsNumVal()" /></td>
  </tr>
</table>
</Body>

document.getElementById('Intext' + J).value = 0; doesn't work
document.Schedule.'Intext' + J.value = 0; doesn't work
document.Schedule.Intext2.value = 0; works, but I need to test each text field while looping, so I can't "hard code" the ID.

Suggestions?

I searched the forum for an answer to this question, but found nothing that was able to answer my question. I have a form and I need to validate a field against three rules:

1) The field need to be between 6 and 12 characters
2) It can only have letters, numbers, and the underscore
3) It cannot contain a space or other special characters

I want the validate to happen in real-time. I have the first rule working great. Here is the code for that:
Code:

var username = document.getElementById('registerUsername');
if((username.value.length < 6) || (username.value.length > 12))
			{
			document.getElementById('usernameValidate').innerHTML="Incorrect.";
			}else{
			document.getElementById('usernameValidate').innerHTML="Correct.";
			}

How would I be able to incorporate checking for rules 2 and 3?