Do a while in a javascript input and record

Asked

Viewed 228 times

0

I am trying to make a form, where inputs are added with text, but I want to record in the database according to the quantity typed.

This is where I have my function in a table and add the inputs when the button is clicked.

function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = "NOME";
    cell2.innerHTML = "<input type='text' name='name1' >";
    cell3.innerHTML = "SALDO";
    cell4.innerHTML = "<input type='text' name='saldo' size='15px' >";
}
    </script>

Here it stores the text, but only in a variable, in case I would like to save in all inputs that are typed.

$name1 = $_POST['name1'];
$saldo = $_POST['saldo'];

HTML: Here adds 2 inputs by clicking the button.

<table id="myTable" class="table table-dark">
<a class="btn btn-primary" onclick="myFunction()" href="#" role="button">Adicionar Autorizado</a>
</table>

FULL HTML:

<html>
    <head>
        <title>PrePago</title>      
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="icon" type="image/x-icon" href="https://www.flaticon.com/premium-icon/icons/svg/1361/1361253.svg" />
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <br />
        <div class="container" style="width:100%; max-width:600px">
            <h2 align="center">Pré-Pago</h2>
            <br />
            <div class="panel panel-default">
                <div class="panel-heading"><h4>Registrar</h4></div>
                <div class="panel-body">
                    <form method="post" id="register_form">
                        <?php echo $message; ?>
                        <div class="form-group">
                            <label>Nome Completo</label>
                            <input type="text" name="user_name" style="text-transform:uppercase" class="form-control" pattern="[a-zA-Z ]+" required />
                        </div>
                        <div class="form-group">
                            <label>E-mail</label>
                            <input type="email" name="user_email"  style="text-transform:uppercase" class="form-control" required />
                        </div>
                        <div class="form-group">
                            <label>CEP</label>
                            <input type="text" name="campob" id="cep" value="" maxlength="9" onblur="pesquisacep(this.value);" class="form-control">
                        </div>
                        <div class="form-group">
                            <table id="myTable" class="table table-dark">
                            <a class="btn btn-primary" onclick="myFunction()" href="#" role="button">Adicionar Autorizado</a>
</table>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="register" id="register" value="Validar" class="btn btn-info" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

EDIT IMAGE: inserir a descrição da imagem aqui

php javascript html

  • Will you use Ajax (Jquery), or do the requests without javascript? Put all the html code, please.

  • I put all the HTML, but I’m using the post method and recording in php to save in the bank.

  • Tell me something: where is not recording? Because, here, is going the 5 entries.

  • Yeah, he’s on his way. The question is kind of when I press the "Add Authorized" button it brings me 2 inputs, and when I click again it brings me 2 more inputs.. That is, only the first 2 inputs are recorded. I would like you to record the rest according to what is typed and not only the first ones.

  • Ah! Got it, I’ll send you the answer.

1 answer

0


Take a look: you are trying to submit a form containing multiple entries. To do this, you must use an array.

The secret is here:

 var incremento = -1;
//etc.
cell1.innerHTML = "NOME";
cell2.innerHTML = `<input type='text' name='name[${incremento}]' >`;
cell3.innerHTML = "SALDO";
cell4.innerHTML = `<input type='text' name='saldo[${incremento}]' size='15px' >`;
//etc.

Basic example for integer in array:

 if ($_SERVER["REQUEST_METHOD"] == "POST") {
                    //Pega o tamanho de uma das duas matrizes, visto, que, pelo menos, teoricamente
                    //ambas terão o mesmo tamanho.
                    $tamanho = count($_POST['name']);
                    //Aqui: intero pelo array
                    for ($i = 0; $i < $tamanho; $i++) {
                        echo '<tr>',
                            '<td>',
                            strtoupper($_POST['name'][$i]),
                            '</td>',
                            '<td>',
                            $_POST['saldo'][$i],
                            '</td>',
                            '</tr>';
                    }
                }

Complete code:

<html>

<head>
    <title>PrePago</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="icon" type="image/x-icon" href="https://www.flaticon.com/premium-icon/icons/svg/1361/1361253.svg" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

<body>
    <br />
    <div class="container" style="width:100%; max-width:600px">
        <h2 align="center">Pré-Pago</h2>
        <br />
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>Registrar</h4>
            </div>
            <div class="panel-body">
                <form method="post" id="register_form">
                    <?php /*echo $message;*/ ?>
                    <div class="form-group">
                        <label>Nome Completo</label>
                        <input type="text" name="user_name" autofocus style="text-transform:uppercase" class="form-control" pattern="[a-zA-Z ]+" required />
                    </div>
                    <div class="form-group">
                        <label>E-mail</label>
                        <input type="email" name="user_email" style="text-transform:uppercase" class="form-control" required />
                    </div>
                    <div class="form-group">
                        <label>CEP</label>
                        <input type="text" name="campob" id="cep" value="" maxlength="9" onblur="pesquisacep(this.value);" class="form-control">
                    </div>
                    <div class="form-group">
                        <table id="myTable" class="table table-dark">
                            <a class="btn btn-primary" onclick="myFunction()" href="#" role="button">Adicionar Autorizado</a>
                        </table>
                    </div>
                    <div class="form-group">
                        <input type="submit" name="register" id="register" value="Validar" class="btn btn-info" />
                    </div>
                </form>
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>NOME</th>
                    <th>SALDO</th>
                </tr>
            </thead>
            <tbody>

                <?php
                if ($_SERVER["REQUEST_METHOD"] == "POST") {
                    //Pega o tamanho de uma das duas matrizes, visto, que, pelo menos, teoricamente
                    //ambas terão o mesmo tamanho.
                    $tamanho = count($_POST['name']);
                    //Aqui: intero pelo array
                    for ($i = 0; $i < $tamanho; $i++) {
                        echo '<tr>',
                            '<td>',
                            strtoupper($_POST['name'][$i]),
                            '</td>',
                            '<td>',
                            $_POST['saldo'][$i],
                            '</td>',
                            '</tr>';
                    }
                }
                ?>
            </tbody>
        </table>

    </div>
    <script>
        var incremento = -1;

        function myFunction() {
            incremento++;
            var table = document.getElementById("myTable");
            var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            cell1.innerHTML = "NOME";
            cell2.innerHTML = `<input type='text' name='name[${incremento}]' >`;
            cell3.innerHTML = "SALDO";
            cell4.innerHTML = `<input type='text' name='saldo[${incremento}]' size='15px' >`;
        }
    </script>
</body>

</html>

  • What variable can I use to traverse a two-column table with the information typed in the fields? in this array method.

  • I added an image above

  • puts like this: var_dump($_POST['name']) and var_dump($_POST['balance']) to view it, you can browse using loops of repetitions, as for or foreach, etc.

  • Would you have the solution for the table to go through according to what is typed? with for or foreach. Thank you

  • I’ll be waiting, thank you!

  • See the edition. I hope it helps you in your studies. If it helps you, don’t forget to vote how the answer is accepted.

Show 1 more comment

Browser other questions tagged php javascript html

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