[SOLVED] simple Javascript?

wkilc · April 12, 2008

Hello,

I'm using this script to create a second form value (Cost) that depends on the answer to another form value (Booth).

<head>
<script type="text/javascript">
function getIPut(val)
{
var state = document.getElementById('Booth1').value;
var loca;
if(booth == 'large - $950'){
	loca = '950';
}else if(booth == 'medium - $850'){
	loca = '850';
}else if(booth == 'small - $750'){
	loca = '750';
}
document.getElementById('Cost1').value = loca;
}
</script>
</head>

Booth type:
<label>
<select onchange="getIPut();" id="Booth1" name="Booth1">
<option value=""></option>
<option id="booth" value="large - $950">large - $950</option>
<option id="booth" value="medium - $850">medium - $850</option>
<option id="booth" value="small - $750">small - $750</option>
</select>
</label>

<input id="Cost2" type="hidden" name="Cost1" />

It works fine, until I try to duplicate it (two "Booths" and two "Costs")... I've tried hard-coding it as well as this:

<head>
<script type="text/javascript">
function getIPut(val)
{
for (var i = 1; i <= 2; i++ )
{
var state = document.getElementById('Booth'+i).value;
var loca;
if(booth == 'large - $950'){
	loca = '950';
}else if(booth == 'medium - $850'){
	loca = '850';
}else if(booth == 'small - $750'){
	loca = '750';
}
document.getElementById('Cost'+i).value = loca;
}
}
</script>
</head>

Booth type:
<label>
<select onchange="getIPut();" id="Booth1" name="Booth1">
<option value=""></option>
<option id="booth" value="large - $950">large - $950</option>
<option id="booth" value="medium - $850">medium - $850</option>
<option id="booth" value="small - $750">small - $750</option>
</select>
</label>

<input id="Cost2" type="hidden" name="Cost1" />

<p />

Booth type:
<label>
<select onchange="getIPut();" id="Booth2" name="Booth2">
<option value=""></option>
<option id="booth" value="large - $950">large - $950</option>
<option id="booth" value="medium - $850">medium - $850</option>
<option id="booth" value="small - $750">small - $750</option>
</select>
</label>

<input id="Cost2" type="hidden" name="Cost2" />

Nothing seems to work... I've tried renaming the "getIPut" events as well, in case they were conflicting.

I've been at this simple chore for hours.

Thanks for reading.

~Wayne

Psycho · April 13, 2008

Can't you just change the values of the options to fit your needs?

I.e.

<option value="950">large - $950</option>

By the way, you should not have IDs for your options. Even if you did, you cannot duplicate the same ID on a page. You also had the wrong ID for the first "Cost" field.

Anyway, here is some working code (although I would still go with having the appropriate value in the options to begin with)

<head>
<script type="text/javascript">
function getIPut(fieldObj)
{
    var fieldID = fieldObj.id.substr(fieldObj.id.length-1 ,1);
    var boothObj = document.getElementById('Booth'+fieldID);
    var state = boothObj[boothObj.selectedIndex].value;
    var loca='';

    if(state == 'large - $950')
    {
        loca = '950';
    }
    else if (state == 'medium - $850')
    {
        loca = '850';
    }
    else if(state == 'small - $750')
    {
        loca = '750';
    }
    document.getElementById('Cost'+fieldID).value = loca;
}
</script>
</head>
<body>
Booth type:
<label>
<select onchange="getIPut(this);" id="Booth1" name="Booth1">
<option value=""></option>
<option value="large - $950">large - $950</option>
<option value="medium - $850">medium - $850</option>
<option value="small - $750">small - $750</option>
</select>
</label>

<input id="Cost1" type="text" name="Cost1" />

<p />

Booth type:
<label>
<select onchange="getIPut(this);" id="Booth2" name="Booth2">
<option value=""></option>
<option value="large - $950">large - $950</option>
<option value="medium - $850">medium - $850</option>
<option value="small - $750">small - $750</option>
</select>
</label>

<input id="Cost2" type="text" name="Cost2" />

</body>
</html>

Or alternatively, you could use a regular expression to make it much simpler (assuming you always just want the numerical value from the option)

function getIPut(fieldObj)
{
    var fieldID = fieldObj.id.substr(fieldObj.id.length-1 ,1);
    var boothObj = document.getElementById('Booth'+fieldID);
    var loca = boothObj[boothObj.selectedIndex].value.replace(/[^\d]/g, '');
    document.getElementById('Cost'+fieldID).value = loca;
}

wkilc · April 13, 2008

Thank you!

The reason was that I need both values passed by the form, one that says the size of the booth WITH the cost, and one with just the numerical cost (for some calculations).

Problem... I tried both scripts, but they both only supply "Cost1"... "Cost2" is still an empty value.

~Wayne

Psycho · April 13, 2008

Then you have done something wrong. If you copy and paste the code I have above in its entirety it works perfectly. I'm thinking that there is still a problem with the IDs or field names. Show your code it you want more help.

If you are using this input for calculations, then I will assume that you are processing the code server-side with PHP or some other language. If that's the case, then you should still not use a secondary field. Just submit either the full text (and strip out the text for calculations) or just submit the number (and recreate the text for display purpose). By using two fields for essentially the same data you open yourself up to problems that can be difficult to debug. Youcould also make the value of the options something like this:

large - $950|950

And then split the value on the server side to the text and the value parts.

wkilc · April 13, 2008

Thank you again... my own silly mistake.

~Wayne

Sign In

[SOLVED] simple Javascript?

Recommended Posts

wkilc

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

wkilc

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

wkilc

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information