<!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>
but nt inserting custom values which is in select box only static values are insertingi don't quite get what you mean... can you elaborate further?
<?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>"; } echo "<script type='text/javascript'>window.location.href='newdom.php'</script>"; exit(); } $sql = "SELECT * FROM combo1 group by id "; $result = mysqli_query($link, $sql); if ($result && mysqli_num_rows($result) > 0) { # code... // while($row = $result->fetch_assoc()) { echo "<table class='table-striped table-hover table borderless table-condensed ';style='background-color: red'>"; echo "<thead>"; echo "<tr class='success' align=center>"; echo "<th >Column</th>"; echo "<th >Type</th>"; echo "<th >Value</th>"; echo "<th >Action</th>"; echo "</tr>"; echo"</thead>"; while($row = mysqli_fetch_array($result)){ $id=$row['id']; echo "<tbody>"; echo "<tr class='success'>"; echo "<td >" . $row['column'] . "</td>"; echo "<td >" . $row['type'] . "</td>"; echo "<td >" . $row['value'] . "</td>"; echo "<td><a href='edit.php?id=" . $row['id'] ."' class='btn btn-success'>Edit</a> <a href='delete.php?id= $id' data-toggle='modal' class='btn btn-danger' >Delete </a> </td>"; echo "</tr>"; echo "</tbody>"; } echo "</table>"; } mysqli_free_result($result); ?> <!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> </body> </html>