cornford-michael icon

jquery php add input

cornford-michael | PRO | 01/16/24 11:47:14 PM UTC | 0 ⭐ | 1565 👁️ | Never ⏰ | []
JavaScript |

2.72 KB

|

None

|

0 👍

/

0 👎

    <!DOCTYPE html>
    <html lang = "eng">
        <head>
            <meta charset = "UTF-8" />
            <link rel = "stylesheet" type = "text/css" href = "css/style.css" />
            <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
        </head>
    <body>
        <nav class = "navbar navbar-default navbar-fixed-top">
            <div class = "container-fluid">
                <a class = "navbar-brand" href  = "https://www.sourcecodester.com">Sourcecodester</a>
            </div>
        </nav>
        <br />
        <br />
        <br />
        <br />
            <center><h2>Simple dynamic input using jQuery/MySQLi</h2></center>
        <br />
        <br />
        <br />
        <div class = "row">
            <div class = "col-md-3">
            </div>
            <div class = "col-md-1" style = "margin-left:10px;" >
                <button class = "btn btn-success" id = "add"><span class = "glyphicon glyphicon-plus"></span> Add new Entry</button>
                <br />
                <br />
            </div>
            <form method = "POST" action = "save_data.php"> 
            <button class = "btn btn-primary" name = "submit" ><span class = "glyphicon glyphicon-save"></span> Submit</button>
            <div style = "margin-left:30px;" id = "input" class = "col-md-3">
                <div class = "well">    
                    <div class = "form-group">
                        <label>Firstname</label>
                        <input class = "form-control" type =  "text" name = "firstname[]"/>
                    </div>
                    <div class = "form-group">
                        <label>Lastname</label>
                        <input class = "form-control" type =  "text" name = "lastname[]"/>
                    </div>
                </div>      
            </div>
            </form>
        </div>
    </body> 
    <script src = "js/jquery.js"></script>
    <script type = "text/javascript">   
        $(document).ready(function(){
            $('#add').click(function(){
                    $input = $('<div class = "well">'   
                    + '<div class = "form-group">'
                    + '<label>Firstname</label>'
                    + '<input class = "form-control" type =  "text" name = "firstname[]" required = "required"/>'
                    + '</div>'
                    + '<div class = "form-group">'
                    + '<label>Lastname</label>'
                    + '<input class = "form-control" type =  "text" name = "lastname[]" required = "required"/>'
                    + '</div>');
                    $input.fadeIn(1000).appendTo('#input');
            });
        });
    </script>   
    </html>  

Comments