Inserting a text input with a PHP button

Asked

Viewed 1,564 times

1

I’m a beginner in PHP and would like to know if there is a way to add an input text in PHP using a button. I am developing a php application for warehouse control and I want to create a merchandise receiving routine called 'loading'. Then 'loading' would consist of a Loading Number and the products contained therein. However, as it is unknown the number of different products that a load can have, I need to have how to add new entries in the form according to the user’s need. That’s possible?

  • PHP has no button or input text. This is HTML stuff, and to change dynamically in the client needs JS. Note that PHP simply processes data and mounts the server-side page. Even if it generates an HTML, it always happens before the client receives the data and interacts with the page. To change this on the client side, either use JS/Ajax and the like, or reload the/iframe page (prefer JS/Ajax, unless you need to deal with primitive systems).

2 answers

3

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <style type="text/css">
        * { font-family:Arial; }
        h2 { padding:0 0 5px 5px; }
        h2 a { color: #224f99; }
        a { color:#999; text-decoration: none; }
        a:hover { color:#802727; }
        p { padding:0 0 5px 0; }

        input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border
    </style>
        <script type="text/javascript">

            $(function() {
                var scntDiv = $('#p_scents');
                var i = $('#p_scents p').size() + 1;

                $('#addScnt').live('click', function() {
                    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="" /></label> <a href="#" id="remScnt">X</a></p>').appendTo(scntDiv);
                    i++;
                    return false;
                });

                $('#remScnt').live('click', function() { 
                    if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                    }
                    return false;
                });
            });


        </script>
    </head>
    <body>
        <h2><a href="#" id="addScnt">Adicionar campo</a></h2>

        <div id="p_scents">
            <p>
                <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="" /></label>
            </p>
        </div>
    </body>
    </html>

2


Good evening, according to my understanding, your doubt can be solved with Javascript, more precisely the jQuery..

If in PHP, you want PHP to write the form, do more or less so using repetition structure for():

php form.

<?php

$numfields = $_GET["num_fields"];

echo '<form method="POST"> <! -- Repeated data --!> ';

for($i = 0; $i < $numCampos; $i++) { echo '<label for="amox_'. $i.'">Amox '.($i+1). '</label> <input type="text" name="amox[]" id="amox_'. $i.'"><br /> '; }

echo '</form>';

?>

And in the browser you access: http://localhost/form.php? num_fields=4

And he will return:

<form method="POST">
<!-- Dados repetidos -->
<label for="amox_0">Amox 1</label> <input name="amox[]" id="amox_0" type="text"><br>
<label for="amox_1">Amox 2</label> <input name="amox[]" id="amox_1" type="text"><br>
<label for="amox_2">Amox 3</label> <input name="amox[]" id="amox_2" type="text"><br>
<label for="amox_3">Amox 4</label> <input name="amox[]" id="amox_3" type="text"><br>
</form>

Or you can do in jQuery that will become much more dynamic and visually beautiful for the user, using jQuery.append().

I hope I’ve helped.

  • This was exactly what I was looking for, although the solution of the friend above tb would solve, however, because I still have little knowledge of CSS and JAVASCRIPT I will consider your answer to my problem. Thank you very much

Browser other questions tagged

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