Question

I’m looking to put together a form on our website that would feature a preview sentence based on a series of input boxes and drop down menus. I know how to change text based on the input of a drop down menu. However, how do you change the entire sentence (not just the variable) if something in particular is selected? Do you know how to accomplish something like this?

For example (3 input questions to make up a sentence):

1) School name (text field)
2) What would best describe you? (drop down menu)
Sophmore
Senior
Professor
Masters Degree Holder
3) What are you [studying, teaching, have studied]? (text field)

If ‘Sophmore’ is selected, the preview sentence should look like this:
[Sophmore] at [Harvard] studying [Math]

But if the user selects ‘professor’, then it would go like this:
[Professor] at [Harvard] teaching [Math]

And if the user selects ‘Masters Degree Holder’, it would go like this:
[Masters Degree Holder] for [Math] at [Harvard]

Any ideas on how to make this happen?

Thanks!

Answer 1

Something like this would work. You can monitor the inputs one at a time and set the text of the sentence. Or perhaps you want to use a complete button and just build it at the end. Either way the concepts are the same. In your html assign id’s to the inputs. For your sentence you can use spans with ids. Then use document.getElementById to retrieve the values of the inputs. When they are changed update the sentence. You can use innerHTML to set a new value on an element.

http://jsfiddle.net/pktMJ/

<select id="description">
    <option></option>
    <option>Sophmore</option>
    <option>Senior</option>
    <option>Professor</option>
</select>
<br />
<input id="school" type="text" />
<br />
<input id="study" type="text" />
<div >
    <span id="a"></span> at <span id="b"></span> studying <span id="c"></span>.
</div>

 

document.getElementById('description').onchange = function() {

    document.getElementById('a').innerHTML = this.value;

    var verb = '';
    switch (this.value) {
    case 'Professor':
        verb = 'teaching';
        break;
    case 'Sophomore':
        verb = 'studying';
        break;
    case 'Senior':
        verb = 'studying';
        break;
    }

    document.getElementById('d').innerHTML = verb;
};

document.getElementById('school').onblur = function() {
    document.getElementById('b').innerHTML = this.value;
};

document.getElementById('study').onblur = function() {
    document.getElementById('c').innerHTML = this.value;
};