PDA

Click to See Complete Forum and Search --> : Populating textfeilds based on number selected

becka
01-08-2007, 03:40 AM
I'm trying to create part of a form which populates text feilds based on quantity selected in a previous drop down menu. There is a maximum of 5 entries.
So if '2' is selected from the drop down, 2 textfeilds will be vsisble and so forth.
If someone could point me in the right direction it would be much appreciated.
I already have a script running on the page - so i also need to make sure any further scripts dont clash.
Thanks :]
Dr.Flink
01-08-2007, 06:26 AM
Perhaps something like this?
js:
window.onload = function() {
var quantity = document.getElementById("quantity");
var result = document.getElementById("result");

quantity.onchange = function() {
if(parseInt(quantity.value)) appendFields(quantity.value, result);
}
}

function appendFields(quantity, result) {
result.innerHTML = "";
for(var i = 0; i < quantity; i++)
{
field = createField(i);
result.appendChild(field);
}
}

function createField(i) {
var field = document.createElement("input");
field.type = "text";
field.id = "field_" + i;
field.name = "field_" + i;
return(field);
}
html:
<div>
<select id="quantity">
<option>&nbsp;</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div id="result"></div>
becka
01-08-2007, 06:29 AM
Thanks!
I found something online but the scripts weren't working - this is working perfectly !
Thanks again :)
becka
01-08-2007, 07:29 AM
Sorry to be a pain - how would i go about creating two feilds one above the other when the quantities are selected?

& How could i label the feilds e.g http://img.photobucket.com/albums/v732/alphawaves_powercables/eight.jpg
Dr.Flink
01-08-2007, 07:54 AM
change the createField function to:
function createField(i) {
var fieldContainer = document.createElement("div");
var field1 = document.createElement("input");
var field2 = document.createElement("input");
var label1 = document.createElement("label");
var label2 = document.createElement("label");

fieldContainer.className = "fieldContainer";
field1.type = "text";
field1.id = "weight_" + i;
field1.name = "weight_" + i;
field2.type = "text";
field2.id = "dimensions_" + i;
field2.name = "dimensions_" + i;
label1.innerHTML = "Weight";
label1.setAttribute("for","weight_" + i);
label2.innerHTML = "Dimensions";
label2.setAttribute("for","dimensions_" + i);

fieldContainer.appendChild(label1);
fieldContainer.appendChild(field1);
fieldContainer.appendChild(label2);
fieldContainer.appendChild(field2);
return(fieldContainer);
}
...for style use should use a stylesheet:
css:
.fieldContainer { margin-bottom:20px; }
.fieldContainer label { font:bold 0.8em Verdana, Arial, Helvetica, sans-serif; }
.fieldContainer input { display:block; border:1px solid #ba8; }
*edit: changed the css-part
becka
01-08-2007, 07:56 AM
where does the css code go ?
Dr.Flink
01-08-2007, 08:06 AM
You can put it in the head section or as an external file named xxx.css:
In the head:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My page</title>

<style type="text/css">
.fieldContainer { margin-bottom:20px; }
.fieldContainer label { font:bold 0.8em Verdana, Arial, Helvetica, sans-serif; }
.fieldContainer input { display:block; border:1px solid #ba8; }
</style>

</head>

or as an external file:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My page</title>
<link href="myStylesheet.css" rel="stylesheet" type="text/css" />
</head
becka
01-08-2007, 08:22 AM
This is perfect - just one more little thing! how can i get the text feilds to display horizontally as opposed to vertically down the page?
The form needs to print off onto one sheet, so having the 5 weight/dimension boxes takes up a lot of room horizontally.
the boxes above eachother is perfect though :)
Dr.Flink
01-08-2007, 08:35 AM
Change .fieldContainer (the first line in the css) to:
.fieldContainer { margin:0 20px 20px 0; float:left; }
konithomimo
01-08-2007, 08:40 AM
Just put a div in the form, i will call it "mydiv", where you want the textboxes to go, then do something as simple as this:

function addText(num){
var t;
var d = document.getElementById('mydiv');
var de = d.getElementsByTagName('input');
var l = de.length;
if(l>num){
for(l;l>num;l--)
{
d.removeChild(de[l-1]);
}
}

else
{
for(var i=0;i<(num-l);i++)
{
t = document.createElement('input');
t.type='text';
d.appendChild(t);
}
}

return;
}

Just call that from the onchange of your select object and it will add/remove the fields as necessary.Then you can implement the text, but that all depends on what you want it to say. For that you can use a basic array and also create a span or label object.
becka
01-08-2007, 08:49 AM
Thankyou very much for all your help.
I'm not too sure i understand all the div things. I have completed the quantity of weight/dimension boxes and it looks fab. Thanks a lot for that.

I have quite a few elements in the form now that just need formatting in the sense that if x is selected a textbox will appear. This only needs to be done twice in the form, one where a drop down contains - EXW, CFS, CHP, DDU & DDP. If DDU or DDP is selected an additional text feild to write the delivery deadline & 2 radio buttons appear.
And another where if "yes" is selected from a drop down an additional text feild appears asking for the URN number.

Is there a simple-ish skeleton code i can use for this type of thing and then adapt it to what i'm after?
my knowledge of if's only stretch to conditional formatting in excel :o

I feel a bit silly asking on here for everything!
Dr.Flink
01-08-2007, 09:41 AM
You can do this in 2 different ways.
1. Write all the form-elements and put the style: display:none; to those elements that wont show up untill the user is making some kind of chose.
2. Make the elements that should show up on-the-fly. This is what my earlier script does. It creates the elements and then appends them to the document tree (DOM).

I'm not so sure of what it is you want to accomplish. But either way you do, it will contain som if-statements.
The user makes a choise and the script is reacting upon this chois:
function testing(value) {
if(value == 'a') {
alert("The value is A");
}
else if(value == 'b') {
alert("The value is B");
}
else if(value == 'c') {
alert("The value is C");
}
else alert("Please, select a value");
}
<select onchange="testing(this.value)">
<option>&nbsp;</option>
<option value='a'>A</option>
<option value='b'>B</option>
<option value='c'>C</option>
</select>
But, insted of alerts you can put something else. Like creating elements on the fly, or make one/many element that was hidden to show up:
code:
function testing(value) {
if(value == 'a') {
var divA = document.getElementById("divA");
divA.style.display = "block";
}
else if(value == 'b') {
var divB = document.getElementById("divB");
divB.style.display = "block";
}
else if(value == 'c') {
var divC = document.getElementById("divC");
divC.style.display = "block";
}
else alert("Please, select a value");
}
html:
<select onchange="testing(this.value)">
<option>&nbsp;</option>
<option value='a'>A</option>
<option value='b'>B</option>
<option value='c'>C</option>
</select>

<div id="divA" style="display:none">You picked A</div>
<div id="divB" style="display:none">You picked B</div>
<div id="divC" style="display:none">You picked C</div>
There is alot of this to read about on the web. Search for DOM-Script tutorials on google :).
becka
01-08-2007, 09:59 AM
Thats exactly what i'm after!
Thanks a lot for your help.
becka
01-08-2007, 10:16 AM
Can someone please take a look at the attached, It goes wrong where the 4th "next" button has to be pressed, i think it collides with the script i have for the "Terms" drop down.

http://www.fileshack.us/v/9584681/FullFormScript.txt.html
Dr.Flink
01-08-2007, 10:30 AM
Nice =). The only error I got from firefox was from function testing.
Try this instead (you've missed to rename some)
function testing(value) {
if(value == 'EXW') {
var divA = document.getElementById("divA");
divA.style.display = "block";
}
else if(value == 'FOB') {
var divB = document.getElementById("divB");
divB.style.display = "block";
}
else if(value == 'CFR') {
var divC = document.getElementById("divC");
divC.style.display = "block";
}

else if(value == 'DDU') {
var divD = document.getElementById("divD");
divD.style.display = "block";
}

else if(value == 'DDP') {
var divE = document.getElementById("divE");
divE.style.display = "block";
}

else alert("Please, select a value");
}
What kind of error do you experience?

..also, am I supposed to be able to select two different types of delivery deadlines?
becka
01-08-2007, 10:35 AM
This form will only be used in IE.
When it gets to the 4th "Next" button, i think it collides with the function testing thing for the "Terms" drop down. You have to click it about 7 times to get the next stage of the form to show up. I think it's almost clicking through the dropdown options.
& No only 1 'Term' is meant to be selected :o
Only DDU & DDP should bring up the Delivery Deadline boxes... but i dont want 2 showing up :( woops!
Dr.Flink
01-08-2007, 10:56 AM
Ok, now I noticed what you ment (same problem in ff). The reason for this is because you have a total of 9 divs with the display:none; attribute. What your function showHide() does is to make each div with display:none to change to display:block insted....each 9 that is.
Dr.Flink
01-08-2007, 11:21 AM
Check this out, I made a little test: Demo (http://drflink.stabilt.se/delete3.html)

Changed 2 things.

1. function showHide:
function showHide(id){
var element = document.getElementById(id);
element.style.display = "block";
}
We give the id from the submit button:
ex:<input type="button" onClick="showHide('company')" value="Next".... />
Clicking this button will tell the function to show a div with id="company".
<div id="company" style="display:none">
<center>&nbsp;<table border="0" width="90%" id="table1" bordercolor="#000000">
<tr>
<td><b><font face="Tahoma" size="2"><u>Shipper:</u><br>Company:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" style="border: 1px solid #FF9933" size="35" name="shipcomp"><br>FCL Keycode:
...
...
</div>

2. function testing():
function testing(value) {
var divD = document.getElementById("divD");
var divE = document.getElementById("divE");

if(value == 'EXW') {
var divA = document.getElementById("divA");
divA.style.display = "block";
divD.style.display = "none";
divE.style.display = "none";
}
else if(value == 'FOB') {
var divB = document.getElementById("divB");
divB.style.display = "block";
divD.style.display = "none";
divE.style.display = "none";
}
else if(value == 'CFR') {
var divC = document.getElementById("divC");
divC.style.display = "block";
divD.style.display = "none";
divE.style.display = "none";
}

else if(value == 'DDU') {
divD.style.display = "block";
divE.style.display = "none";
}

else if(value == 'DDP') {
divD.style.display = "none";
divE.style.display = "block";
}

else alert("Please, select a value");
}
Now, it makes sure that the DDU and DDP info is hidden as long as we don't realy want to show it. Perhaps you also need to make sure that the selections made is aborted. What I mean is that say I choose DDP and write a date in the Delivery Deadline. Then I change my mind and choose EXW insted. Then the Delivery Deadline is still typed in the textfield.
becka
01-09-2007, 04:26 AM
:) Thanks a lot!
i've had a little mess around with the form & have changed quite a few things - for instance when you select "method" on the first section - if its Air/Road/Courier 'Dest Airport' boxes come up. Whereas if it's 'Sea' - 'Dest Port' feilds come up.
Pretty chuffed with it seeing as it's the first time i've done something with javascript :)

Next i need to change the size of the 'weight/height/length/volume/width' boxes so they fit in with the rest of the form - and need to somehow get my head around writting the code out for automatically working out the volume from the weight/height/length :confused:

http://www.fileshack.us/v/9907493/FullFormScript1.txt.html
Dr.Flink
01-09-2007, 06:08 AM
You're a quick learner!
To change the size of the property boxes, all you have to do is to play around with the css. The textfields are inputs, so for example: giving the input a width and a margin will make the boxes appear a little different:
.fieldContainer input { width:200px; margin-right:10px; display:inline; border:1px solid #ff9933; }

Another thing to do is the validation. This you can do with javascript first, but always second that validation with a server side check (if else, the user only have to turn off javascript to get around it).
Let's say I write a wrong date input in the first form area. When I click the next button, a message (alert) telling me to type a correct date (yyyy-mm-dd ...or something like that). Another thing you see in forms is the asterics(*), telling the user that this field can't be left empty...else another message alerts the user. When the values are valid and the user clicks the next button, step 2 showes up.

Edit: Almost forgot,here's a link to some css examples and tutorials (http://www.w3schools.com/css/css_examples.asp).