<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> </head> <style type="text/css"> .table { margin: 0 auto; width: 50%; /*opacity: ;*/ } </style> </head> <body> <form class="form-horizontal" name="form" role="form" method="post" action="" onclick="validator()"> <center> <table class="table"> <thead> <tr> <th>Enter Field Name<span class="label label"> <td><input id="new-state" type="text" placeholder="Field Name "/> </td></span></th> <td><button type="button" id="btn-add-state">ADD</button></td></tr> <tr> <th>Select Field Name <span class="label label"> <td> <select id="state" class="selectpicker" type="text" style="width:150px" name="column" required="" align="left"> <option value="">select</option> <option value="col1">col1</option> <option value="col2">col2</option> </select> </td></span></th> </tr> <tr> <th>Select Field type<span class="label label"><td> <select id="type1" class="selectpicker" type="text" style="width:150px" name="type" required=""> <option value="">select</option> <option value="INT">INT</option> <option value="VARCHAR">VARCHAR</option> </select></td></span> </th> </tr> <tr> <th> <span>How do you pass values:</span></th> <td> <select id="type2" class="selectpicker" type="text" style="width:150px" name="value" required="" onselect="select();"> <option value="">select</option> <option value="Custom Values" id="chkYes">Custom Values</option> <option value=" Static Values" id="chkNo"> Static Values</option> </select></td> <td><div id="dvPassport" style="display: none"> Custom Values: <input id="value" type="text" placeholder=" Enter Value " name="value" required="" /> </div> <div id="dPassport" style="display: none"> Static Values: <select id="value" class="selectpicker" type="text" style="width:150px" name="value" required="" align="left"> <option value="">select</option> <option value="state">State</option> <option value="District">District</option> <option value="Gender">Gender</option> <option value="B-group">B-group</option> </select> </div> </td> </tr> <tr> <th> <input type="submit" value="SUBMIT" class="btn btn-success" name="submit" /> </th> </tr> <tr> <td><input id="remove" type="button" value="Done" onclick="myFunction()"></td></tr> </thead> </table> </center> </form> <script type="text/javascript"> $(document).ready(function () { function select() { if ($('#type2').find(":selected").attr('id') == 'chkYes') { $("#dvPassport").show(); $("#dPassport").hide(); } else { $("#dPassport").show(); $("#dvPassport").hide(); } } //this makes the select change call the function select(): // anytime the user change the selection the function select() is called and works as expected $('#type2').on('change', function () { select(); }); $("#state").select2({ tags: true }); $("#btn-add-state").on("click", function () { var newStateVal = $("#new-state").val(); // Set the value, creating a new option if necessary if ($("#state").find("option[value='" + newStateVal + "']").length) { $("#state").val(newStateVal).trigger("change"); } else { // Create the DOM option that is pre-selected by default var newState = new Option(newStateVal, newStateVal, true, true); // Append it to the select $("#state").append(newState).trigger('change'); } }); $("#type").select2({ tags: true }); });//end jQuery </script> <script type="text/javascript"> $(document).ready(function() { $("#type1").select2({ tags: true }); }); </script> <?php $link = mysqli_connect("localhost","root","") or die("failed to connect to server !!"); mysqli_select_db($link,"idcard"); if(isset($_REQUEST['submit'])) { $errorMessage = ""; $column=$_POST['column']; $type=$_POST['type']; $value=$_POST['value']; // Validation will be added here if ($errorMessage != "" ) { echo "<p class='message'>" .$errorMessage. "</p>" ; } else{ //Inserting record in table using INSERT query $ins="INSERT INTO `idcard`.`combo1` (`column`, `type`, `value`) VALUES ('$column', '$type', '$value')"; $test=mysqli_query($link,$ins) or die(mysqli_error($link)); if($test) echo "<script type='text/javascript'>alert('submitted successfully!')</script>"; else echo "<script type='text/javascript'>alert('failed!')</script>"; } header('Location:excombo.php'); exit(); } ?> </body> </html>
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Distinguished Expert awards are presented to the top veteran and rookie experts to earn the most points in the top 50 topics.