codewithabu

Javascript,Nodejs,MongodDB,WordPress,CSS,PHP

LightBlog

Wednesday, September 5, 2018

wordpress How to create dynamic input and insert into database

How to create dynamic input and insert into database

on in 
Create table


CREATE TABLE `invoice` (
  `id` int(11) NOT NULL,
  `name` varchar(40) NOT NULL,
  `detail` varchar(33) NOT NULL,
  `type` varchar(33) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = 'test';

        // Create connection
        $conn = new mysqli($servername, $username, $password,$dbname);

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

if(isset($_POST['submit'])){

$date = $_POST['field1'];

foreach( $date as $key => $d ) {

  $sql = "INSERT INTO invoice (name) VALUES ('$date[$key]')";

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

}

}

?>

    <!DOCTYPE html>
    <html>
    <head>
      <title>multiple fields</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

  <style>
    * {
  .border-radius(0) !important;
}

#field {
    margin-bottom:20px;
}
  </style>
</head>
<body>
<div class="container">
  <div class="row">
    <input type="hidden" name="count" value="1" />
        <div class="control-group" id="fields">
            <label class="control-label" for="field1">Nice Multiple Form Fields</label>
            <div class="controls" id="profs"> 
                <form class="input-append" method="post">
                    <div id="field">
                      <input  type="text" name="field1[]" class="input" id="field1" data-items="8"/>
                      <button id="b1" class="btn add-more" type="submit">+</button>
                    </div>

                    <button type="submit" name="submit">Submit</button>
                </form>

            </div>
        </div>
  </div>
</div>

<script>
  $(document).ready(function(){
    var next = 1;
    $(".add-more").click(function(e){
        e.preventDefault();
        var addto = "#field" + next;
        var addRemove = "#field" + (next);
        next = next + 1;
        var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field1[]" type="text">';        var newInput = $(newIn);
        var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
        var removeButton = $(removeBtn);
        $(addto).after(newInput);
        $(addRemove).after(removeButton);
        $("#field" + next).attr('data-source',$(addto).attr('data-source'));
        $("#count").val(next);  

            $('.remove-me').click(function(e){
                e.preventDefault();
                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#field" + fieldNum;
                $(this).remove();
                $(fieldID).remove();
            });
    });


});

</script>
</body>
</html>
at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)