/    Sign up×
Community /Pin to ProfileBookmark

Form field auto fill

Copy linkTweet thisAlerts:
Jun 30.2006

Hello Everyone

I have a form with a select box ‘item’ where I need to give a value to another field ‘price’ based on the selected option value in the box: i.e.

<form method=’post’ name=’form’>
<select name=’item’>
<option value=’One’ >One</option>
<option value=’Two’>Two</option>
<option value=’Three’>Three</option>
</select>

<input type=”hidden” name=”price” value=””>
</form>

Say,
item One, price value needs to be $10
item Two, price value needs to be $20
item Three, price value needs to be $30

I thought that this would need a fairly simple piece of JavaScript but I can’t seem to get it to work.

Any suggestions?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@cjm771Jun 30.2006 — [code=html]<form method='post' name='form'>
<select name='item' onchange='document.form.price.value=10;document.form.price.value*=(this.selectedIndex+1);'>
<option value='One' >One</option>
<option value='Two'>Two</option>
<option value='Three'>Three</option>
</select>

<input type="hidden" name="price" value="">
</form>[/code]

this works fine. change type to "text" and add a size attribute if u want to test it ?
Copy linkTweet thisAlerts:
@PhilDogJun 30.2006 — Price needs to be what "such and such" in order to submit right?
Copy linkTweet thisAlerts:
@nzguyauthorJun 30.2006 — Hi cjm771

Thanks for your suggestion and, yes, I get that code working fine for the item prices with the 10 - 20 - 30 progression that I gave in my (not very good) example. Now my problem is that I have actual values that do not follow any sequence, i.e 19.95, 21.95, 25.95, 28.95 and so on.
Copy linkTweet thisAlerts:
@nzguyauthorJul 05.2006 — With a little internet research, I seem to have sorted out this problem and having seen how many people have been searching for a similar script, I thought I would post it here.

In the head:

<script language="javascript" type="text/javascript">

<!--

function populate() {

var itemname = new Array();

itemname[0] = new Array('');

itemname[1] = new Array('One');

itemname[2] = new Array('Two');

itemname[3] = new Array('Three');

var price = new Array();

price[0] = new Array('');

price[1] = new Array('19.95');

price[2] = new Array('21.95');

price[3] = new Array('25.95');

var box = document.chooseform.choose;

var number = box.options[box.selectedIndex].value;

var list = itemname[number];

var box2 = document.chooseform.itemname.value = list;

var list = price[number];

var box3 = document.chooseform.price.value = list;

}

// -->

</script>

and in the body:

<form method='post' name='chooseform'>

<select name='choose' onchange='javascript:populate()'>

<option value='0'>Select</option>

<option value='1'>One</option>

<option value='2'>Two</option>

<option value='3' >Three</option>

</select>

<input type='hidden' name='itemname'>

<input type='hidden' name='price'>

</form>

This actually populates two text boxes which works fine for my application. One of the boxes I had to rename from 'item' to 'itemname' as you can't use 'item' in the script.

To see this working, change input type 'hidden' to 'text'.

Enjoy!
Copy linkTweet thisAlerts:
@nzguyauthorJul 05.2006 — Not sure where the face came from in my previous post but this line should be:

<select name='choose' onchange='javascript:populate()'>
Copy linkTweet thisAlerts:
@nzguyauthorJul 05.2006 — I'll try again:

<select name='choose' onchange='javascript [colon] populate()'>

Perhaps somebody can tell me how to switch off !@#$! smilies.

Thanks
×

Success!

Help @nzguy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...