CODEWITHSUNDEEP
javascriptsplit
user24793
user24793

Reputation: 344

javascript form option value split into two different input values

Okay so I have been trying to figure this out but do not have the knowledge to proceed.

I have a form with select options. The options will have two values, input-value="value1/value2".

I have a script started that pulls out the value and creates an array. I need ti figure out how to separate the two values and print out into two separate input values.

<html>

<body>
<p>The Thank you page is  <b id='brochure'>is what?</b> </p> 
<p>This should print out the selected fid <script>document.getElementById('brochure').innerHTML = '<input id="" value="'+option_array[1]+'" />';</script></p>
<form>
Activity Level: <select id="activity_level">
            <option value="null">Please Choose One...</option>
            <option id="brochure" value="brochure/print">fid/sid</option>
            <option id="online" value="online/web">Three/Four</option>
            <option id="inPerson" value="inPerson">Five/Six</option>
            </select></br>

<input type='button' onclick='brochure_select()' value='Change Text'/>
<script type="text/javascript">

function brochure_select() {
var option_result = document.getElementById("activity_level").value;
var option_array=option_result.split("/");
document.getElementById('brochure').innerHTML = option_array[1];
}
</script>

// below is where I want to two value to show up.
<input type="hidden" name="fid" value="brochure" />
<input type="hidden" name="sid" value="print" />

</form>

</body>
</html>

I have tried the split function but I am not sure how to get it into the different input values.

Any ideas that I can research or code examples someone might have to share. I have gone through many different searches and have not found what I am looking for...

Thanks Tim

Upvotes: 0

Views: 4349

Answers (1)

rossipedia
rossipedia

Reputation: 59397

What you need is an id attribute for your hidden input elements, and to use the value property instead of innerHTML.

<form>
    Activity Level: 
    <select id="activity_level">
        <option value="null">Please Choose One...</option>
        <option id="brochure" value="brochure/print">fid/sid</option>
        <option id="online" value="online/web">Three/Four</option>
        <option id="inPerson" value="inPerson">Five/Six</option>
    </select><br />

    <input type='button' onclick='brochure_select()' value='Change Text'/>   
</form>

<input type="hidden" id="fid" name="fid" value="" />
<input type="hidden" id="sid" name="sid" value="" />
<script>
function brochure_select() {
    var option_result = document.getElementById("activity_level").value;
    var option_array=option_result.split("/");
    document.getElementById('fid').value = option_array[0];
    document.getElementById('sid').value = option_array[1];
}
</script>

Upvotes: 1

Related Questions