How to Click on Ubmit, Open a Pop up

Asked

Viewed 2,911 times

-1

inserir a descrição da imagem aqui

I would like to know how I can do that when I click to order open a modal type , with the request that was made via form for me to click on print . Even the form sending to the database.

this is my code , just getting clear that I will use this application on a tablet .

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Peixaria</title>
    <style>
        .add {
            text - decoration: none;
        }
    </style>
</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 method="post" action="pedidos.php">
            <header>
                <h2>Fazer Pedido</h2>
            </header>
            <fieldset>
                <label>
                    <span>Mesa</span>
                    <input type="text"id="numero_mesa" name="numero_mesa">
                </label>
                <label>
                    <span>Comanda:</span>

                </label>
                <span>Refeições/Bebidas/Sobremesas:</span>
                <div class="pedidos">

                    <select name="pedido" id="pedido"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>
               <br>
                <div  class="pedidos">

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <select name="pedido" id="pedido"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>
<br>
<button class="btn" type="submit">Fazer Pedido</button>   
            </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 cont=0;
            var holder = $(this).closest('.pedidos');
            holder.find(".selecionados input").each(function(){
                if($(this).val()==holder.find(".selecionar option:selected").html()){
                    cont++;
                }
            });
            if(cont>0) { 
                alert("Este item ja esta adicionado, altere a quantidade se deseja mais..");
            } else{
                holder.find(".selecionados").append(
                    "<input disabled type='text' name='pedidos[]' value='" + 
                    holder.find(".selecionar option:selected").html() + 
                    "' ><input type='text' name='quantidade[]' placeholder='quantidade'><br>"
                );
            }
        });


    </script>

</body>
</html>
  • Possible duplicate: http://answall.com/questions/106592/cria-popup-dom

  • This link doesn’t work

  • 1

    Yes, the problem is that the site blocks popups, creates a . html and pastes the code and tests, try to be more smart when it comes to testing something.

1 answer

0


in form use

onsubmit="window.open('URL of page that will open in popup', popup', 'width=300,height=400');"

example: <form id="myform" name="myform" method="post" onsubmit="window.open('URL of page that will open in popup', popup', 'width=300,height=400');">

  • it will look like modal and will have functionality on a tablet ?

  • my code is in question

  • it directs the order page to another beyond the modal .

  • on my smartphone worked, tablet I have not to test

  • your form sends to the page requests.php and opens a popup as you requested

  • ai in this popup will show the request right?

  • will show what you determine

Show 2 more comments

Browser other questions tagged

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