Script using the <title> attribute displays the supplier and product key in <select> instead of their names

Asked

Viewed 75 times

1

My code has a <script> who must display the name of the supplier and the name of the product in each <select> using the attribute <title>, only instead displays the value of the key.

  • Error example: Instead of showing off Você escolheu o fornecedor Roupas & CIA in the legend created by <title> display Você escolheu o fornecedor 1.

I wanted to understand how show your name instead of your key.

// Script que mostra uma legenda personalizada com o nome do fornecedor e nome do produto em cada <select>, porém está errado aqui.
<script>
        function onChangeSelect(select) {
            document.getElementById("cd_fornecedor").title = "Você escolheu o fornecedor " + select.value;       
            document.getElementById("cd_produto").title = "Você escolheu o produto " + select.value;
        }
    </script>

// Resto do código em PHP
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Cadastrar item de compra</title>
    <link rel="stylesheet" href="/WEB/css/css.css">
</head>
<body>
    <?php  
        require_once '../conexao/conexao.php'; 
        if (isset($_POST['Inserir'])) {
            $cd_fornecedor = $_POST['cd_fornecedor'];
            $cd_produto = $_POST['cd_produto'];
            try {
                $insercao = "INSERT INTO itens_compra_fornecedor (cd_fornecedor,cd_produto,data_compra) 
                VALUES (:cd_fornecedor,:cd_produto,CURRENT_TIMESTAMP())";
                $insere_dados = $conexao->prepare($insercao);
                $insere_dados->bindValue(':cd_fornecedor',$cd_fornecedor);
                $insere_dados->bindValue(':cd_produto',$cd_produto);
                $insere_dados->execute();
            } catch (PDOException $falha_insercao) {
                echo "A insercão não foi feita".$falha_insercao->getMessage();
            }
        }
        $seleciona_fornecedor = $conexao->query("SELECT cd_fornecedor, nome FROM fornecedor");
        $resultado_fornecedor = $seleciona_fornecedor->fetchAll();

        $seleciona_produto = $conexao->query("SELECT cd_produto, nome FROM produto");
        $resultado_produto = $seleciona_produto->fetchAll();
    ?>
    <form method="POST" onsubmit="exibirNome()">
        <p> Fornecedor:
            <select name="cd_fornecedor" id="cd_fornecedor" onchange="onChangeSelect(this)" required="" title="Escolha o fornecedor">
                <option value="" title="Por padrão a opção é vazia, escolha abaixo o fornecedor"> </option>
                <?php
                    foreach ($resultado_fornecedor as $v1) {
                        echo "<option value='{$v1['cd_fornecedor']}'>{$v1['nome']}</option>";
                    }
                ?>
            </select>
        </p>
        <p> Produto:
            <select name="cd_produto" id="cd_produto" required="" title="Escolha a peça de roupa">
                <option value="" title="Por padrão a opção é vazia, escolha abaixo a peça de roupa desejada"> </option>
                <?php
                    foreach ($resultado_produto as $v2) {
                        echo "<option value='{$v2['cd_produto']}'>{$v2['nome']}</option>";
                    }
                ?>
            </select>
        </p>
        <button name="Inserir" title="Botão para cadastrar o item de compra"> Cadastrar item de compra </button>
    </form>
</body>
</html>
php javascript

  • @Leocaracciolo where more or less the title in the <option>?

2 answers

1


@Vorbbel, this one works! Although I don’t understand where you use it, it should be in the function that runs when submitting the form onsubmit="displayName()" who did not post in the question!

function onChangeSelect(obj)
{
/* armazena titulo original */
if(!obj.originalTitle){

   obj.originalTitle = obj.title;

}    

let prependTexto = "Você escolheu";

let textoSelecionado = obj.options[obj.selectedIndex].value != "" ? prependTexto + " " + obj.options[obj.selectedIndex].text : obj.originalTitle;

  
/* mudo o title do select */
obj.title = textoSelecionado;

}
<p> Fornecedor:
<select name="cd_fornecedor" id="cd_fornecedor" onChange="onChangeSelect(this);" required="" title="Escolha o fornecedor">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo o fornecedor"> </option>
  <option value='1'>Fornecedor UM</option>
  <option value='2'>Fornecedor DOIS</option>
</select>
</p>

<p> Produto:
<select name="cd_produto" id="cd_produto" onChange="onChangeSelect(this);" required="" title="Escolha a peça de roupa">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo a peça de roupa desejada"> </option>
  <option value='cd_01'>CALÇA</option>
  <option value='cd_02'>VESTIDO</option>
</select>
</p>

  • There is an inconvenience in your code, when the <select> or <input> is empty when it is deleted is the legend, because I changed obj.title = textoSelecionado; for obj.title = "Você escolheu " + textoSelecionado;

  • I mean, it doesn’t go back to the title field pattern.

  • See if that’s what you needed!

0

You can take the text of the option this way options[cd_produto.selectedIndex].text

Functional example click to run after the code

function onChangeSelect()
{
let fornecedor = document.getElementById("cd_fornecedor").options[cd_fornecedor.selectedIndex].text;

let roupa = document.getElementById("cd_produto").options[cd_produto.selectedIndex].text;


   /* #### no seu script tem que ser #######################################

 document.getElementById("cd_fornecedor").title = "Você escolheu o fornecedor " + fornecedor;

 document.getElementById("cd_produto").title = "Você escolheu o produto " + roupa; 

  #####################################################################  */

/* #### esse trecho é só pra exibir no executar ########## */
    if(fornecedor!=""){
       console.log (fornecedor);
    }

    if(roupa!=""){
      console.log (roupa);
   }
/* ####################################################### */

}
<p> Fornecedor:
<select name="cd_fornecedor" id="cd_fornecedor" onChange="onChangeSelect();" required="" title="Escolha o fornecedor">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo o fornecedor"> </option>
  <option value='1'>Fornecedor UM</option>
  <option value='2'>Fornecedor DOIS</option>
</select>
</p>

<p> Produto:
<select name="cd_produto" id="cd_produto" onChange="onChangeSelect();" required="" title="Escolha a peça de roupa">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo a peça de roupa desejada"> </option>
  <option value='cd_01'>CALÇA</option>
  <option value='cd_02'>VESTIDO</option>
</select>
</p>

or so (select.options[select.selectedIndex].text)

Functional example click to run after the code

function onChangeSelect1(select) {
  let fornecedor =(select.options[select.selectedIndex].text);
  console.log(fornecedor);
}
function onChangeSelect2(select) {
  let roupa =(select.options[select.selectedIndex].text);
  console.log(roupa);
}
        
<p> Fornecedor:
<select name="cd_fornecedor" id="cd_fornecedor" onChange="onChangeSelect1(this);" required="" title="Escolha o fornecedor">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo o fornecedor"> </option>
  <option value='1'>Fornecedor UM</option>
  <option value='2'>Fornecedor DOIS</option>
</select>
</p>

<p> Produto:
<select name="cd_produto" id="cd_produto" onChange="onChangeSelect2(this);" required="" title="Escolha a peça de roupa">
  <option value="" title="Por padrão a opção é vazia, escolha abaixo a peça de roupa desejada"> </option>
  <option value='cd_01'>CALÇA</option>
  <option value='cd_02'>VESTIDO</option>
</select>
</p>

Browser other questions tagged php javascript

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