Advertisement
cornford-michael

jquery php add input

Jan 16th, 2024
936
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.     <!DOCTYPE html>
  2.     <html lang = "eng">
  3.         <head>
  4.             <meta charset = "UTF-8" />
  5.             <link rel = "stylesheet" type = "text/css" href = "css/style.css" />
  6.             <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
  7.         </head>
  8.     <body>
  9.         <nav class = "navbar navbar-default navbar-fixed-top">
  10.             <div class = "container-fluid">
  11.                 <a class = "navbar-brand" href  = "https://www.sourcecodester.com">Sourcecodester</a>
  12.             </div>
  13.         </nav>
  14.         <br />
  15.         <br />
  16.         <br />
  17.         <br />
  18.             <center><h2>Simple dynamic input using jQuery/MySQLi</h2></center>
  19.         <br />
  20.         <br />
  21.         <br />
  22.         <div class = "row">
  23.             <div class = "col-md-3">
  24.             </div>
  25.             <div class = "col-md-1" style = "margin-left:10px;" >
  26.                 <button class = "btn btn-success" id = "add"><span class = "glyphicon glyphicon-plus"></span> Add new Entry</button>
  27.                 <br />
  28.                 <br />
  29.             </div>
  30.             <form method = "POST" action = "save_data.php">
  31.             <button class = "btn btn-primary" name = "submit" ><span class = "glyphicon glyphicon-save"></span> Submit</button>
  32.             <div style = "margin-left:30px;" id = "input" class = "col-md-3">
  33.                 <div class = "well">    
  34.                     <div class = "form-group">
  35.                         <label>Firstname</label>
  36.                         <input class = "form-control" type =  "text" name = "firstname[]"/>
  37.                     </div>
  38.                     <div class = "form-group">
  39.                         <label>Lastname</label>
  40.                         <input class = "form-control" type =  "text" name = "lastname[]"/>
  41.                     </div>
  42.                 </div>      
  43.             </div>
  44.             </form>
  45.         </div>
  46.     </body>
  47.     <script src = "js/jquery.js"></script>
  48.     <script type = "text/javascript">  
  49.         $(document).ready(function(){
  50.             $('#add').click(function(){
  51.                     $input = $('<div class = "well">'  
  52.                     + '<div class = "form-group">'
  53.                     + '<label>Firstname</label>'
  54.                     + '<input class = "form-control" type =  "text" name = "firstname[]" required = "required"/>'
  55.                     + '</div>'
  56.                     + '<div class = "form-group">'
  57.                     + '<label>Lastname</label>'
  58.                     + '<input class = "form-control" type =  "text" name = "lastname[]" required = "required"/>'
  59.                     + '</div>');
  60.                     $input.fadeIn(1000).appendTo('#input');
  61.             });
  62.         });
  63.     </script>  
  64.     </html>  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement