Clone TextBox dynamically without values and store values in database in JSON formate 

# This Source code in php would help you to create dynamic textboxes which would be just clone of already made . The limit is upto 12 textboxes but you can change that and all the values that user will input will be stored in the mysql database in json formate.


<!DOCTYPE html>
<html>
<head>
   <!-- <style>
    #textbox1, #textbox2 {
    display: block;
    float: left;    
    width: 100px;  

}
        
    
    
    </style>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    var max_fields      = 12; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    var submit          = $("#container2");
      
      var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
        
            x++; //text box increment
            $(wrapper).append(' <div><input type="text" name="key[]"  id="textbox1" style="margin-right:5em; margin-top:2em;">&nbsp;<input type="text" name="value[]" id="textbox2">&nbsp;<a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    

    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

 
    
</script>
</head>
<body>
    <form name="user-data" id="usr" method="post" enctype="multipart/form-data">
        <div class="input_fields_wrap">
            <div>
            <em style="margin-right:11em;">Text Box1</em>
                                        <em>Text Box2</em>
            </div>
            
            <div>
          <input type="text" name="key[]" id="textbox1" class="input" style="margin-right:5em">
            <input type="text" name="value[]" class = "input" id="textbox2">
            <button class="add_field_button">+</button>
            </div> 

        </div>
        <div class="container2" style="margin-top:2em; display:block;"><input type=submit 
                    class="bt" onclick="GetTextValue()" 
                   name="btSubmit" id=btSubmit value=Submit />
        </div>
    </form>
    
    
    <?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname    = "demo";
// Create connection
$conn = new mysqli($servername, $username, $password,$dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
echo "Connected successfully";

    $select = mysql_select_db("info",$conn);
    
    if(isset($_POST['btSubmit'])){
$jsonArray = array();

$itemCount = count($_POST["key"]);
$array1 = $_POST["key"];
$array2 = $_POST["value"];
$jsonArray = array();    
$jsonArray=array_combine($array1,$array2);
 echo $json = json_encode($jsonArray);
$query = "INSERT INTO info (serial,data) VALUES (NULL,'".$json."');";


$sql = $query;
    if($itemCount!=0) {
    if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
        }        

mysql_close();
    }
?>

    
</body>
</html>   


































Comments











Post a Comment



















Popular posts from this blog









This New MIT Research Allows You To Generate Electricity While You Walk




















Image







  Electricity While You Walk             Short Bytes:  A research paper published in the journal Nature Communications throws light on a new research in progress under the MIT roofs. It is a new system developed by Professor Ju Li and his team, which converts mechanical energy directly into electricity.         A nother marvel from the research powerhouse  MIT , is of an electrochemistry principle-based system, designed to harness electrical  energy  directly from mechanical energy. The research finds its presence in a research paper by MIT professor Ju Li, graduate students Soon Ju Choi and Sangtae Kim, and four others, published in the journal Nature Communications.    Li believes that the newly developed system can be used to engineer wearable tech, as it provides a more pliant build. It can easily withstand any mechanical stress applied to it. Though, chances are less any humans will be able to break it.       With a resemblance to the  Li-ion batteries , th...








Keep reading










Google Script To notify with an email to multiple recipients with cell values in tabular formate




















Image







  What this script does:  This script will get the recent changes from the google sheet and will send to multiple recipients given with the data that is entered in the sheet. Simply the last row is targeted and fetched and sent to recipients with the headers in a table formate.   Anyone can use this script and change the script names and manipulate the code to run on their google sheet.   Instructions:     1. Open the sheet where you want to trigger this code.   2. Click on Tools - > Set notification rules -> shown in below image                                3     3.Then save.   4. Again click on Tools -> select "script edtitor" and paste this whole script there.   5. Set the sheet name as your sheet name, and your email ids where you want the mail to be sent.   6. set the trigger when to fire this script select on resources  - > current project Trigger and set it as shown in below image. If you want this should be fire on onEdit. you can set trigger as you want...








Keep reading