How to change the content of a page with javascript based on select input?

Question

Let's say I have a webpage like this:

    <div style="margin:auto;text-align:center;padding-top:10px;">
    <form action="" method="POST">
        <p style="text-align:center;">
        <select>
            <option value="blogs">blogs.php</option>
            <option value="portfolio">portfolio.php</option>
            <option value="contact">contact.php</option>
            <option value="home">home.php</option>
        </select>
        </p>
        <p style="text-align:center;">
            <input type="submit" name="submit" value="Submit"/>
        </p>
    </form>
</div>

<div class="pagetitle">
    <h5>Option Value (for example blogs)</h5>
</div>

As you can see, a user can choose from 4 options in the select menu. I want to know ,is there any way to change the content of this div => <div class="pagetitle"> with javascript onsubmit ? For example if a user choosed blogs.php ,the h5 tag will change to <h5>blogs</h5> & if he choosed portfolio.php ,it'll be changed to <h5>portfolio</h5> . I really appreciate if you know how to do this ... thanks in advance!

ckimbrell · Accepted Answer · 2016-01-25 19:47:31Z

1

You'll need to start by adding a javascript function to handle the event.

<script>
function changedSelect(x)
{
    document.getElementById('pageTitleDiv').innerHTML = "<h5>"+x+"</h5>";
}
</script>

And then you'll need to trigger the event when the "select" box is changed.

<select onchange="changedSelect(this.value)">

Finally, I would give the div an "ID" so that it is specifically altered.

<div class="pagetitle" id="pageTitleDiv">

answered Jan 25, 2016 at 19:47

ckimbrell

5273 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DinoMyte · Accepted Answer · 2016-01-25 19:46:00Z

0

You need to bind a jquery .change event to the select element and have it's selected value populated as the text of h5 tag

<script>
    $(document).ready(function(){
    $('select').change(function()
    {
        $('h5').text($(this).val());
    }).change(); // this is optional - it basically invokes the change event as soon as the function is registered.
});
</script>

Example : https://jsfiddle.net/DinoMyte/6x80vabm/4/

answered Jan 25, 2016 at 19:46

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

Comments

hisabimbola · Accepted Answer · 2016-01-25 20:01:45Z

Using vanilla javascript, I added an id to the select element and used javascript to get the value of the select option, then I updated the element on the DOM.

<div style="margin:auto;text-align:center;padding-top:10px;">
    <form action="" method="POST">
        <p style="text-align:center;">
        <select id="myselect">
            <option value="blogs">blogs.php</option>
            <option value="portfolio">portfolio.php</option>
            <option value="contact">contact.php</option>
            <option value="home">home.php</option>
        </select>
        </p>
        <p style="text-align:center;">
            <input type="submit" name="submit" onclick="myFunction()" value="Submit"/>
        </p>
    </form>
</div>
<div class="pagetitle">
    <h5>Option Value (for example blogs)</h5>
</div>
<script>
function myFunction() {
    var x = document.getElementById("myselect").selectedIndex;
    var _value = document.getElementsByTagName("option")[x].value;
    document.getElementsByTagName('h5')[0].innerText = _value
}
</script>

Note: This can be achieved in several ways using vanilla JS or libraries, but I think this answers your question.

Collectives™ on Stack Overflow

How to change the content of a page with javascript based on select input?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related