When clicking a button, value is sent to an imput text

Asked

Viewed 76 times

0

Hello, how do I do and which would be best PHP way, javascript, I have 20 buttons each with a number, I would like to do the following: When someone clicked on one of the buttons for example button 1, it will open another page with form where there is a field imput text with name of Bag Number in this field were added the value of this button in case number 1: I will attach 2 image to explain better and the code.

Segunda tela, formulário

Primeira tela,Números das sacolas 

<?php session_start();
include_once 'includes/header.inc.php';
include_once 'includes/menu.inc.php';
?>

<!-- Formulário de Cadastro Cliente -->
        <div class="row container">
            <p>&nbsp;</p>
                <fieldset class="formulario" style="padding: 5px">
                    <legend><img src="imagens/sacola.png" alt="[imagem]"style="width:80px; height:45px"></legend>
                    <br>
                    
                    <?php
                        if(isset($_SESSION['msg'])):
                            echo $_SESSION['msg'];
                            session_unset();
                        endif;
                    ?>
                    
                    <!-- Botões -->
                    <div class="input-field col s12">
                        <div class="linha1">
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="01">01</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="02">02</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="03">03</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="04">04</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="05">05</a>          
                        </div>
                        
                        <div class="linha2">
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="06">06</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="07">07</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="08">08</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="09">09</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="10">10</a>          
                        </div>
                        
                        <div class="linha3">
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="11">11</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="12">12</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="13">13</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="14">14</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="15">15</a>          
                        </div>
                        
                        <div class="linha4">
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="16">16</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="17">17</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="18">18</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="19">19</a>
                            <a href="emprestimo.php" class="btn blue" style="width:120px; height:37px"value="20">20</a>          
                        </div>
                    </div>
                    
                </fieldset>
        </div>
        
        
<?php include_once 'includes/footer.inc.php';?>
<?php include_once 'includes/script.inc.php';

Loan screen code

<?php session_start();
include_once 'includes/header.inc.php';
include_once 'includes/menu.inc.php';
?>

<!-- Formulário de Cadastro Cliente -->
        <div class="row container">
            <p>&nbsp;</p>
            <form action="banco_de_dados/create.php" method="post" class="col s12">
                <fieldset class="formulario" style="padding: 5px">
                    <legend><img src="imagens/sacola.png" alt="[imagem]"style="width:80px; height:45px"></legend>
                    <br>
                    
                    <?php
                        if(isset($_SESSION['msg'])):
                            echo $_SESSION['msg'];
                            session_unset();
                        endif;
                    ?>
                    
                    <!-- Campo Nome -->
                    <div class="input-field col s12">
                        <i class="material-icons prefix">account_circle</i>
                        <input type="text" name="nome" id="nome" maxlength="40" required autofocus>
                        <label for="nome">Nome</label>
                    </div>
                                        
                    <!-- Campo Telefone -->
                    <div class="input-field col s12">
                        <i class="material-icons prefix">phone</i>
                        <input type="text" name="telefone" id="telefone" maxlength="13" required>
                        <label for="telefone">Telefone</label>
                    </div>
                    
                   <!-- Campo Cpf -->
                    <div class="input-field col s12">
                        <i class="material-icons prefix">credit_card</i>
                        <input type="text" name="cpf" id="cpf" maxlength="14" required>
                        <label for="cpf"> CPF</label>
                    </div>
                   
                                      <!-- Campo Sacola -->
                    <div class="input-field col s12">
                        <i class="material-icons prefix">mode_edit</i>
                        <input type="text" name="numero" id="cpf" maxlength="2" required>
                        <label for="numero">Número da Sacola</label>
                    </div>

                    <div class="input-field col s12">
                        <i class="material-icons prefix">timelapse</i>
                            <select>
                                <option value="" disabled selected>Período</option>
                                <option value="1">Manhã</option>
                                <option value="2">Tarde</option>
                                <option value="3">Noite</option>
                            </select>
                    </div>
                   
                    <!-- Botões -->
                    <div class="input-field col s12">
                        <input type="submit"style="width:120px; height:37px" value="Empréstimo" class="btn blue">
                        <input type="submit"style="width:120px; height:37px" value="Devolução" class="btn red">
                        <input type="reset" style="width:120px; height:37px" value="limpar" class="btn lilac">
                    </div>
                    
                </fieldset>
            </form>
        </div> 

<?php include_once 'includes/script.inc.php';?>

php javascript html5

2 answers

0


Instead of a link, it could have buttons, and each button could have an attribute data-numero with the button number and also a id same for all these buttons, ex:

<button id="botao" data-numero="01">01</button>
<button id="botao" data-numero="02">02</button>

Then just capture the event by clicking the button and redirect to emprestimos.php passing a string query with the number of the ex button:

//pega todos os botoes
const botoes = document.querySelectorAll('#botao');

for (let i = 0; i < botoes.length; i++) {
    //escuta o evento de click em cada botao
    botoes[i].addEventListener('click', function (e) {
        //pega o numero do botao clicado
        const numeroSacola = this.dataset.numero;

        //redireciona para emprestimos.php passando o numero do botao
        window.location.href = `emprestimos.php?numeroSacola=${numeroSacola}`;
    });
}

and in your emprestimo.php just use the superglobal $_GET to get the bag number passed in the query string:

<label>Numero da Sacola</label>
<input type="text" value="<?php echo isset($_GET['numeroSacola']) ? $_GET['numeroSacola'] : null; ?>"/>

  • First thank you for the attention and the answer, I’m hitting myself to learn and almost always use the wrong methods as the link you commented, I did the way you passed and almost got I think rsrs, I changed link on button to button same, however it is giving something wrong, it takes the number of the button clicked but I do not understand the part of the numberSacola that does not pass to the field, I will post the error and the code as you passed.

  • user156561 Thank you very much, that’s exactly what I was trying to do, in this second attempt that wasn’t working out, it was just the name of the page that was posting loans.php and it’s actually lend.php, again thank you very much...

0

inserir a descrição da imagem aqui

Loan screen

<!-- Campo Sacola -->
                    <div class="input-field col s12">
                        <i class="material-icons prefix">mode_edit</i>
                        <label>Numero da Sacola</label>
                        <input type="text" value="<?php echo isset($_GET['numeroSacola']) ? $_GET['numeroSacola'] : null; ?>"/>
                    </div>

Canvas bag

<!-- Botões -->
                    <div class="input-field col s12">
                        <div class="linha1">
                            <button id="botao" data-numero="01"class="btn blue" style="width:120px; height:37px">01</button>
                            <button id="botao" data-numero="02"class="btn blue" style="width:120px; height:37px">02</button>
                            <button id="botao" data-numero="03"class="btn blue" style="width:120px; height:37px">03</button>
                            <button id="botao" data-numero="04"class="btn blue" style="width:120px; height:37px">04</button>
                            <button id="botao" data-numero="05"class="btn blue" style="width:120px; height:37px">05</button>                
                        </div>

Script

<script>
            //pega todos os botoes
            const botoes = document.querySelectorAll('#botao');

            for (let i = 0; i < botoes.length; i++) {
                //escuta o evento de click em cada botao
                botoes[i].addEventListener('click', function (e) {
                    //pega o numero do botao clicado
                    const numeroSacola = this.dataset.numero;

                    //redireciona para emprestimos.php passando o numero do botao
                    window.location.href = `emprestimos.php?numeroSacola=${numeroSacola}`;
                });
            }
        </script>

  • user156561, does it have any way to send to the bank this value that was passed from the button to the form, when I try to send it will always with zero value 0

Browser other questions tagged php javascript html5

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