how to change the page subtitle by choosing a select

Asked

Viewed 109 times

2

Guys, it’s really simple, I have a form that can be used for various services. I need the page subtitle to change according to the choice (in a select) of the service.

I’m using the following a bit of code

<header class="jumbotron">
    <h1>
        <img src="img/logo.png">
    </h1>
    <h2>Pedido de Serviço de importação</h2>
    <h3><h3> //AQUI FICARIA O SUBTITULO DA PAGINA
</header>

<fieldset class="campos">
<legend>Dados do serviço</legend>
<div class="form-group">
<label for="servico">Tipo de serviço</label>
<select name="servico" class="form-control" id="servico">
<option value=""></option>
<option value="DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO">DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO</option>
<option value="DESOVA DIRETA">DESOVA DIRETA</option>
<option value="DESPALETIZAÇÃO">DESPALETIZAÇÃO</option>
<option value="ETIQUETAGEM">ETIQUETAGEM</option>
<option value="FOTOS">FOTOS</option>
<option value="MONITORAMENTO DE TOMADA ELETRICA">MONITORAMENTO DE TOMADA ELETRICA</option>
<option value="OVAÇÃO ">OVAÇÃO </option>
<option value="PALETIZAÇÃO">PALETIZAÇÃO</option>
<option value="PESAGEM DE VOLUMES">PESAGEM DE VOLUMES</option>
<option value="POSICIONAMENTO DE CARGA">POSICIONAMENTO DE CARGA</option>
</select>

2 answers

1

See if that helps you:

servico.onchange = function() {
  subtitulo.innerHTML = this.value;
}
<header class="jumbotron">
    <h1>
        <img src="img/logo.png">
    </h1>
    <h2>Pedido de Serviço de importação</h2>
    <h3 id="subtitulo"><h3>
</header>

<fieldset class="campos">
<legend>Dados do serviço</legend>
<div class="form-group">
<label for="servico">Tipo de serviço</label>
<select name="servico" class="form-control" id="servico">
<option value=""></option>
<option value="DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO">DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO</option>
<option value="DESOVA DIRETA">DESOVA DIRETA</option>
<option value="DESPALETIZAÇÃO">DESPALETIZAÇÃO</option>
<option value="ETIQUETAGEM">ETIQUETAGEM</option>
<option value="FOTOS">FOTOS</option>
<option value="MONITORAMENTO DE TOMADA ELETRICA">MONITORAMENTO DE TOMADA ELETRICA</option>
<option value="OVAÇÃO ">OVAÇÃO </option>
<option value="PALETIZAÇÃO">PALETIZAÇÃO</option>
<option value="PESAGEM DE VOLUMES">PESAGEM DE VOLUMES</option>
<option value="POSICIONAMENTO DE CARGA">POSICIONAMENTO DE CARGA</option>
</select>

First I put an id on your h3 (subtitling):

<h3 id="subtitulo"><h3>

Then I assign a function to the event onchange of your select:

servico.onchange = function() {
    subtitulo.innerHTML = this.value;
}

Every time the select for updated it will pick up the value and play inside the element with id=subtitulo.

  • I tried to use it this way it didn’t work. But the guy up there already gave me the help. Thanks for the attention friend

1

Follow a pure and simple javascript for this. hope it helps

   <header class="jumbotron">
        <h1>
            <img src="img/logo.png">
        </h1>
        <h2>Pedido de Serviço de importação</h2>
        <h3 id="subtitulo"><h3> //AQUI FICARIA O SUBTITULO DA PAGINA
    </header>

    <fieldset class="campos">
    <legend>Dados do serviço</legend>
    <div class="form-group">
    <label for="servico">Tipo de serviço</label>
    <select name="servico" class="form-control" id="servico" onchange="drop()">
    <option value=""></option>
    <option value="DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO">DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO</option>
    <option value="DESOVA DIRETA">DESOVA DIRETA</option>
    <option value="DESPALETIZAÇÃO">DESPALETIZAÇÃO</option>
    </select>

    <script>
    function drop(){
        document.getElementById("subtitulo").innerText = document.getElementById("servico").value;
        }
    </script>
  • worked well friend. Thank you very much!!!

  • Legal tmj :) abs

Browser other questions tagged

You are not signed in. Login or sign up in order to post.