How to create a dynamic select to use on localhost

Asked

Viewed 171 times

-1

I’m making a restaurant management system , but I kind of want the select to be dynamic , type not always the customer wants a food only , so I wanted to know how I can do to go adding every time I click on more. this system only works on the site, only I want to use it only on the localhost and it doesn’t work.

inserir a descrição da imagem aqui source code below.

    <html>
        <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="" 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>
            <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>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <select id="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>
  • Have you ever thought of using a <select multiple>? http://www.w3schools.com/TAgs/att_select_multiple.asp

  • Look at the browser console, see if it points out any errors, because it should run on localhost

  • Good afternoon. A hint: you are tagging <script> outside the <html> (may be why it is being ignored). The best place for tag <script> is usually at the end of the <body>, which, by the way, you don’t have. I suggest better structuring your html with the correct tags <html><head></head><body></body></html>. Finally, I put your code in a fiddle and it seems to be working: https://jsfiddle.net/mrlew/8e9xLure/ .

  • already put , still does not work on localhost . the code is as I edited above

  • Remove css from the last line .add{ text-decoration:none;} that, and adds to the tag <style>.add{ text-decoration:none;}</style>

  • I’ve already done it put it in style where I get the coccid css , but in localhost it doesn’t take . but when I try it online it works .

  • look at the browser console, see if it points any error

  • yes in border-Sizing: border-box; a warning sign appears .

  • @allanaraujo continues to have syntax problems. You have not closed the <head> nor the <html>. And tag <style> inside head. Checked console for errors? you have a local server or are opening in the file?

  • Well now it’s working , but it’s overlapping one over the other and the part of the drink only give to select one when I go select another it give that has already been added . doesn’t look like it does on site , I put a print above how it looks

Show 5 more comments

2 answers

0


Basically you were using the same function for selecting the two options, and because you had the same id, it said you were already selected. And it really was, but it wasn’t what you wanted. So one simple way to solve 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;}
#selecionados input,#selecionados2 input{ margin:10px;}
</style>
<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="" 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>
  • well friend he was left with the same error , type at the time of adding more drink he give that is already adds being that it is not . and they’re superimposing each other

  • @allanaraujo, look again, edited

  • well the part that only give to add one was fine , but I have to touch the form to no overlap on the other ? like every time I add a meal the select of the beverage is pushed down not to overlap on it ?

  • @allanaraujo as well?

  • as in the image I edited in the question above , it is very close to the other how can I give a space between them to be more readable . Thanks in advance.

  • @allanaraujo would be like this? I added it in the css above

  • well it did not work and the mirror is between the selected of the meal and the select of the order of drinks

  • @allanaraujo but Voce put as, the way I put or attached in some css file? Because here ran...

  • put it the way you edited. I think it’s because it’s either localhost or not ?

  • No... Are you using bootstrap? Probably the styles are conflicting, in this case put the <style></style> right on top of the form

Show 6 more comments

0

I made some modifications to your html and javascript. Here’s 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 correctly indented
  • You were carrying twice the jQuery.
  • You had many autofocus (you can put only one per page);
  • I added a <title></title>.
  • Many <option> with selected (is only one if select is not multiple choice).
  • Instead of disabled, you had written isabled.
  • I replaced a label misused by a <div class='pedidos'>
  • You had more than one identical ID on the page. That can’t. You can only have one unique ID per element. This way, I replaced your #selecionar and #selecionados by a class and treated in javascript to treat each field (orders drinks and meals) separately.
  • EDIT: refactor your Javascript code a little bit.

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

  • how could I put a space between a meal and a drink so as not to be too close together and to be more readable .

  • @allanaraujo suggest you ask another question about style because this doubt escapes the scope of what we are trying to help you. First, research a little, try to implement for yourself, and if you can’t, post your specific question here with your code, where the error appears, the expected behavior etc.

Browser other questions tagged

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