How to create a dynamic select to use in localhost

Question

How to create a dynamic select to use in localhost

Navigation

#1 by (0 votes)
#2 by (0 votes)

-1

I'm doing a restaurant management system, but I kind of want the select to be dynamic, so the customer does not always want a food, so I wanted to know how I can go about adding it every time I click on it. this system only works on the site, but I just want to use it on localhost and it does not work.

sourcecodebelow.

<html><head><body><h1>Peixaria</h1><ulclass="menu cf">
      <li><a href="secao.php">Início</a></li>
      <li><a href="pedidos.php">Pedidos</a></li>
      <li><a href="reserva.php">Reserva</a></li>
      <li><a href="relatorio.php">Relatório</a></li>
    </ul>
 <main>
      <form>
        <header>
          <h2>Fazer Pedido</h2>
        </header>
        <fieldset>
          <label>
           <span>Comanda:</span>
           <input type="text" value="" autofocus>
           </label>
            <label>
            <span>Mesa:</span>
            <input type="text" value="" autofocus>
          </label>
          <span>Refeições/Bebidas/Sobremesas:</span>
          <label>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="selecionar">
            <option selected isabled>Selecione</option>
            <option >Costela de Tambaqui sem Espinha</option> 
          <option  selected>Lombo de Tambaqui Frito sem Espinha</option>
          <option >Caldeirada de Tambaqui sem Espinha</option>
          <option >Caldeirada de Tucunaré</option> 
          <option  selected>Peixe no Tucupi com Camarão</option>
          <option >Escabeche de Pirarucu</option>
          <option >Escabeche de Tambaqui</option>
          <option >Escabeche de Tucunaré</option>
          <option >Tucunaré Frito</option> 
          <option  selected>Sardinha Frita</option>
          <option >Jaraqui Frito</option>
          <option >Pacu Frito</option> 
          <option selected>Filé de Pirarucu Frito</option>
          <option >Filé de Pirarucu a Milanesa</option>
          <option >Guisado de Pirarucu</option>
            </select>
            <a class="add" href="#">+</a>
            <hr>
            Selecionados
            <hr>
            <div id="selecionados">

            </div>
          </label>

          <label>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="selecionar">
            <option selected isabled>Selecione</option> 
           <option >Fanta Laranja 1l</option> 
           <option >Fanta Laranja 2l</option> 
           <option selected>Cola Cola 1l</option>
           <option >Cola Cola 2l</option>
          <option >Bare 2l</option> 
          <option  selected>Fanta Uva</option>
          <option >Fanta Laranja</option>
          <option >Sprit</option> 
          <option  selected>Cola Cola </option>
          <option >Cola Cola zero </option>
          <option >Guaraná Antarctica</option> 
          <option  selected>Guaraná Baré</option>
          <option >Suco Goiaba</option> 
          <option  selected>Suco Manga</option>
          <option >Suco Pessego</option>
          <option >Suco Uva</option> 
          <option  selected>Suco Maracujá</option>
          <option >Suco Laranja</option>
          <option >Suco Caju</option> 
          <option selected>Agua Mineral </option>
          <option >Agua com Gas </option>
          <option >Cerveja em Lata</option> 
          <option  selected>Limonada Natural</option>
            </select>
            <a class="add" href="#">+</a>
            <hr>
            Selecionados
            <hr>
            <div id="selecionados">

            </div>
          </label>

        </fieldset>
      </form>
    </main>
    <script>
            $(".add").on('click',function(){
        var cont=0;
        $("#selecionados input").each(function(){
        if($(this).val()==$("#selecionar option:selected").html()){
        cont++;
         }
        });
        if(cont>0){ alert("Este item ja esta adicionado, altere a quantidade se deseja mais..");}
        else{
        $("#selecionados").append("<input disabled type='text' name='pedidos[]' value='"+$("#selecionar option:selected").html()+"' ><input type='text' name='quantidade[]' placeholder='quantidade'><br>");
        }
        });


    </script>

    </body>
</head>
</html>

php javascript html localhost

asked by anonymous 16.01.2017 / 21:14

2 answers

0

I made some changes to your html and javascript. Here is the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Peixaria</title>
    <style>
        .add {
            text - decoration: none;
        }
    </style>
</head>
<body>
    <h1>Peixaria</h1>
    <ul class="menu cf">
        <li><a href="secao.php">Início</a></li>
        <li><a href="pedidos.php">Pedidos</a></li>
        <li><a href="reserva.php">Reserva</a></li>
        <li><a href="relatorio.php">Relatório</a></li>
    </ul>
    <main>
        <form>
            <header>
                <h2>Fazer Pedido</h2>
            </header>
            <fieldset>
                <label>
                    <span>Comanda:</span>
                    <input type="text" value="">
                </label>
                <label>
                    <span>Mesa:</span>
                    <input type="text" value="">
                </label>
                <span>Refeições/Bebidas/Sobremesas:</span>
                <div class="pedidos">

                    <select class="selecionar">
                        <option selected disabled>Selecione</option>
                        <option >Costela de Tambaqui sem Espinha</option> 
                        <option  >Lombo de Tambaqui Frito sem Espinha</option>
                        <option >Caldeirada de Tambaqui sem Espinha</option>
                        <option >Caldeirada de Tucunaré</option> 
                        <option >Peixe no Tucupi com Camarão</option>
                        <option >Escabeche de Pirarucu</option>
                        <option >Escabeche de Tambaqui</option>
                        <option >Escabeche de Tucunaré</option>
                        <option >Tucunaré Frito</option> 
                        <option >Sardinha Frita</option>
                        <option >Jaraqui Frito</option>
                        <option >Pacu Frito</option> 
                        <option >Filé de Pirarucu Frito</option>
                        <option >Filé de Pirarucu a Milanesa</option>
                        <option >Guisado de Pirarucu</option>
                    </select>
                    <a class="add" href="#">+</a>
                    <hr>
                    Selecionados
                    <hr>
                    <div class="selecionados">

                    </div>
                </div>

                <div class="pedidos">

                    <select class="selecionar">
                        <option selected disabled>Selecione</option> 
                        <option >Fanta Laranja 1l</option> 
                        <option >Fanta Laranja 2l</option> 
                        <option >Cola Cola 1l</option>
                        <option >Cola Cola 2l</option>
                        <option >Bare 2l</option> 
                        <option >Fanta Uva</option>
                        <option >Fanta Laranja</option>
                        <option >Sprit</option> 
                        <option >Cola Cola </option>
                        <option >Cola Cola zero </option>
                        <option >Guaraná Antarctica</option> 
                        <option >Guaraná Baré</option>
                        <option >Suco Goiaba</option> 
                        <option >Suco Manga</option>
                        <option >Suco Pessego</option>
                        <option >Suco Uva</option> 
                        <option >Suco Maracujá</option>
                        <option >Suco Laranja</option>
                        <option >Suco Caju</option> 
                        <option >Agua Mineral </option>
                        <option >Agua com Gas </option>
                        <option >Cerveja em Lata</option> 
                        <option >Limonada Natural</option>
                    </select>
                    <a class="add" href="#">+</a>
                    <hr>
                    Selecionados
                    <hr>
                    <div class="selecionados">

                    </div>

                </div>

            </fieldset>
        </form>
    </main>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>$(".add").on('click',function(){ 

            var holder = $(this).closest('.pedidos');
            var selected_value = holder.find(".selecionar option:selected").val();
            var found = false;

            holder.find(".selecionados input").each(function(){
                if( $(this).val() === selected_value){
                    alert("Este item já esta adicionado, altere a quantidade se deseja mais.");
                    found = true;
                }
            });

            if (found) return;

            var input1 = $("<input></input>", { 
                disabled: true,
                type: 'text',
                name: 'pedidos[]',
                value: selected_value
            });

            var input2 = $("<input></input>", {
                type: 'text',
                name: 'quantidade[]',
                placeholder: 'quantidade'
            });

            holder.find(".selecionados").append(input1, input2, "<br/>");

        });


    </script>

</body>
</html>

Some points:

Code was not properly indented
You were loading jQuery twice.
You had many autofocus (you can only put one per page);
I added a <title></title> .
Many <option> with selected (is only one if the select is not a multiple choice).
Instead of disabled , you had written isabled .
I replaced a label improperly used with a <div class='pedidos'>
You had more than one ID on the page. This can not. You can have only one unique ID per element. This way, I replaced your #selecionar and #selecionados with a class and treated in javascript to treat each field (ordering drinks and food) separately.
EDIT : I've refactored your JavaScript code a little.

After these modifications, I tested it here locally and apparently it's working as you described it should work.

16.01.2017 / 22:12

Print a string with only numeric values [duplicate] Fill in a list

score 0 · Accepted Answer

Basically you were using the same function for the selection of the two options, and as it was with the same id, it said it was already selected. And it really was, but it was not what you wanted. So a simple way to resolve it was to rename the ids and create the other function for the other select.

<html>
<head>
<title>Peixaria</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head><body><style>.add,add2{text-decoration:none;}#selecionadosinput,#selecionados2input{margin:10px;}</style><h1>Peixaria</h1><ulclass="menu cf">
  <li><a href="secao.php">Início</a></li>
  <li><a href="pedidos.php">Pedidos</a></li>
  <li><a href="reserva.php">Reserva</a></li>
  <li><a href="relatorio.php">Relatório</a></li>
</ul>
<main>
  <form>
    <header>
      <h2>Fazer Pedido</h2>
    </header>
    <fieldset>
      <label> <span>Comanda:</span>
        <input type="text" value="" autofocus>
      </label>
      <label> <span>Mesa:</span>
        <input type="text" value="" autofocus>
      </label>
      <span>Refeições/Bebidas/Sobremesas:</span>
      <label>
      <select id="selecionar">
        <option selected isabled>Selecione</option>
        <option >Costela de Tambaqui sem Espinha</option>
        <option  selected>Lombo de Tambaqui Frito sem Espinha</option>
        <option >Caldeirada de Tambaqui sem Espinha</option>
        <option >Caldeirada de Tucunaré</option>
        <option  selected>Peixe no Tucupi com Camarão</option>
        <option >Escabeche de Pirarucu</option>
        <option >Escabeche de Tambaqui</option>
        <option >Escabeche de Tucunaré</option>
        <option >Tucunaré Frito</option>
        <option  selected>Sardinha Frita</option>
        <option >Jaraqui Frito</option>
        <option >Pacu Frito</option>
        <option selected>Filé de Pirarucu Frito</option>
        <option >Filé de Pirarucu a Milanesa</option>
        <option >Guisado de Pirarucu</option>
      </select>
      <a class="add" href="#">+</a>
      <hr>
      Selecionados
      <hr>
      <div id="selecionados"> </div>
      </label>
      <label>
      <select id="selecionar2">
        <option selected isabled>Selecione</option>
        <option >Fanta Laranja 1l</option>
        <option >Fanta Laranja 2l</option>
        <option selected>Cola Cola 1l</option>
        <option >Cola Cola 2l</option>
        <option >Bare 2l</option>
        <option  selected>Fanta Uva</option>
        <option >Fanta Laranja</option>
        <option >Sprit</option>
        <option  selected>Cola Cola </option>
        <option >Cola Cola zero </option>
        <option >Guaraná Antarctica</option>
        <option  selected>Guaraná Baré</option>
        <option >Suco Goiaba</option>
        <option  selected>Suco Manga</option>
        <option >Suco Pessego</option>
        <option >Suco Uva</option>
        <option  selected>Suco Maracujá</option>
        <option >Suco Laranja</option>
        <option >Suco Caju</option>
        <option selected>Agua Mineral </option>
        <option >Agua com Gas </option>
        <option >Cerveja em Lata</option>
        <option  selected>Limonada Natural</option>
      </select>
      <a class="add2" href="#">+</a>
      <hr>
      Selecionados
      <hr>
      <div id="selecionados2"> </div>
      </label>
    </fieldset>
  </form>
</main>

<script>

            $(".add").on('click',function(){
        var cont=0;
        $("#selecionados input").each(function(){
        if($(this).val()==$("#selecionar option:selected").html()){
        cont++;
         }
        });
        if(cont>0){ alert("Este item ja esta adicionado, altere a quantidade se deseja mais..");}
        else{
        $("#selecionados").append("<input disabled type='text' name='pedidos[]' value='"+$("#selecionar option:selected").html()+"' ><input type='text' name='quantidade[]' placeholder='quantidade'><br>");
        }
        });

  $(".add2").on('click',function(){
        var cont=0;
        $("#selecionados2 input").each(function(){
        if($(this).val()==$("#selecionar2 option:selected").html()){
        cont++;
         }
        });
        if(cont>0){ alert("Este item ja esta adicionado, altere a quantidade se deseja mais..");}
        else{
        $("#selecionados2").append("<input disabled type='text' name='pedidos[]' value='"+$("#selecionar2 option:selected").html()+"' ><input type='text' name='quantidade[]' placeholder='quantidade'><br>");
        }
        });

    </script>
</body>
</html>