How to insert data in database without html form tag

Question

This is my design...

enter image description here

This is my html code...

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
 <div>
   <table width="1118" border="0" cellspacing="5">
   <tr>
     <th width="243" scope="col"><table width="1118" border="0" cellspacing="5">
       <tr>
         <th width="261" height="27" scope="col"><h4 align="left">Dealer Name:
           <input type="text" name="dname" id="dname" />
         </h4>
         </th>
         <th width="243" scope="col">Location:
           <input type="text" name="location" id="location" /></th>
         <th width="334" scope="col"><div align="left">Purchasing Date:
           <select name="day" id="day">
             <option value="-1">Day</option>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="8">8</option>
             <option value="9">9</option>
             <option value="10">10</option>
             <option value="11">11</option>
             <option value="12">12</option>
             <option value="13">13</option>
             <option value="14">14</option>
             <option value="15">15</option>
             <option value="16">16</option>
             <option value="17">17</option>
             <option value="18">18</option>
             <option value="19">19</option>
             <option value="20">20</option>
             <option value="21">21</option>
             <option value="22">22</option>
             <option value="23">23</option>
             <option value="24">24</option>
             <option value="25">25</option>
             <option value="26">26</option>
             <option value="27">27</option>
             <option value="28">28</option>
             <option value="29">29</option>
             <option value="30">30</option>
             <option value="31">31</option>
           </select>
           <select name="month" id="month">
             <option value="-1">Month</option>
             <option value="Jan">Jan</option>
             <option value="Feb">Feb</option>
             <option value="Mar">Mar</option>
             <option value="Apr">Apr</option>
             <option value="May">May</option>
             <option value="Jun">Jun</option>
             <option value="Jul">Jul</option>
             <option value="Aug">Aug</option>
             <option value="Sep">Sep</option>
             <option value="Oct">Oct</option>
             <option value="Nov">Nov</option>
             <option value="Dec">Dec</option>
           </select>
           <select name="year" id="year">
             <option value="Year" selected="selected">Year</option>
             <option value="2013">2013</option>
             <option value="2014">2014</option>
             <option value="2015">2015</option>
             <option value="2016">2016</option>
             <option value="2017">2017</option>
             <option value="2018">2018</option>
             <option value="2019">2019</option>
             <option value="2020">2020</option>
             <option value="2021">2021</option>
             <option value="2022">2022</option>
             <option value="2023">2023</option>
             <option value="2024">2024</option>
             <option value="2025">2025</option>
             <option value="2026">2026</option>
             <option value="2027">2027</option>
             <option value="2028">2028</option>
             <option value="2029">2029</option>
             <option value="2030">2030</option>
             <option value="2031">2031</option>
             <option value="2032">2032</option>
             <option value="2033">2033</option>
           </select>
         </div></th>
         <th width="247" scope="col">Entry Date:
           <input type="text" name="entry" id="entry" value="<?php echo date("d-M-Y")?>"/>
         </th>
       </tr>
     </table></th>
   </tr>
   </table>
 </div>
  <div align="center"></div>
  <div align="left">
    <table width="1177" border="1" cellspacing="5" id="add" class="add">
      <tr>
        <td width="71" height="42"><button class="add" name="add">Add Rows</button></td>

        <td width="144"><div align="center"><strong>Product Name</strong></div></td>
        <td width="146"><div align="center"><strong>Brand Name</strong></div></td>
        <td width="146"><div align="center"><strong>Model No</strong></div></td>
        <td width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></td>
        <td width="146"><div align="center"><strong>Quantity (Q)</strong></div></td>
        <td width="146"><div align="center"> <strong>Total Price</strong> (TP)        </div>
          <div align="center">
            (TP = DP x Q)
</div>
        </td>
        <td width="153"><div align="center"><strong>Quality</strong></div></td> 
         <td><div align="center"><strong>Insert Image</strong></div></td>
      </tr>
      <tbody>
        <tr class="prototype">
          <td height="26"><button class="remove">Remove</button></td>
          <td><input type="text" name="product[]" id="product" /></td>
          <td><input type="text" name="brand[]" id="brand" /></td>
          <td><input type="text" name="model[]" id="model" /></td>
          <td><input type="text" name="dprice[]" class="price"/></td>
          <td><input type="text" name="quantity[]" class="quantity"/></td>
          <td><input name="txt[]" type="text" class="txt" /></td>
          <td><input type="text" name="quality[]" id="quality"/></td>
           <td><input name="images[]" type="file" id="images"/></td>
        </tr>
        <tr>
          <td height="26"><button class="remove">Remove</button></td>
          <td><input type="text" name="product[]" id="product" /></td>
          <td><input type="text" name="brand[]" id="brand" /></td>
          <td><input type="text" name="model[]" id="model" /></td>
          <td><input type="text" name="dprice[]" class="price"/></td>
          <td><input type="text" name="quantity[]" class="quantity"/></td>
          <td><input name="txt[]" type="text" class="txt" id="tp" /></td>
          <td><input type="text" name="quality[]" id="quality"/></td>
           <td><input name="images[]" type="file" id="images"/></td>
        </tr>
        <tr>
          <td height="26"><button class="remove">Remove</button></td>
          <td><input type="text" name="product[]" id="product" /></td>
          <td><input type="text" name="brand[]" id="brand" /></td>
          <td><input type="text" name="model[]" id="model" /></td>
          <td><input type="text" name="dprice[]" class="price"/></td>
          <td><input type="text" name="quantity[]" class="quantity"/></td>
          <td><input name="txt[]" type="text" class="txt" id="tp" /></td>
          <td><input type="text" name="quality[]" id="quality"/></td>
           <td><input name="images[]" type="file" id="images"/></td>
        </tr>
        <tr>
          <td height="26"><button class="remove">Remove</button></td>
          <td><input type="text" name="product[]" id="product" /></td>
          <td><input type="text" name="brand[]" id="brand" /></td>
          <td><input type="text" name="model[]" id="model" /></td>
          <td><input type="text" name="dprice[]" class="price"/></td>
          <td><input type="text" name="quantity[]" class="quantity"/></td>
          <td><input name="txt[]" type="text" class="txt" id="tp" /></td>
          <td><input type="text" name="quality[]" id="quality"/></td>
           <td><input name="images[]" type="file" id="images"/></td>
        </tr>
      </tbody>
    </table>
  </div>

<table width="1206" border="0">

  <tr>
    <td width="847">&nbsp;</td>
        <td width="129"><input name="btn" type="submit" id="btn" value="Sum of Total Price" /></td>

    <td width="216"><input type="text" id="sum" name="sum" onKeyUp="calculate();" /></td>
</tr>
 <tr>
    <td>&nbsp;</td>
    <td colspan="2">Transport Price: 
    <input type="text" name="transport" id="transport" onKeyUp="calculate();" /></td>
  </tr>
   <tr>
    <td>&nbsp;</td>
    <td colspan="2">Grand Total: &nbsp;&nbsp;&nbsp;&nbsp;

     <input type="text" name="grandt" id="grandt" /></td>
  </tr>
</table>
    <div>
      <div align="center"><br /><input name="Save" type="submit" value="Save"/>
      </div>
</div>
</form>

This is javascript code....

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script  type="text/javascript">
$(document).ready(function() {
    $('#add').on('keyup', '.price', calTotal)
                  .on('keyup', '.quantity', calTotal);

// find the value and calculate it

    function calTotal() {
        var $row = $(this).closest('tr'),
            price    = $row.find('.price').val(),
            quantity = $row.find('.quantity').val(),
            total    = price * quantity;

// change the value in total

        $row.find('.txt').val(total)
    }

});
</script>
<script type="text/javascript">

        $(document).ready(function () {
    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".txt").each(function () {

       // $(this).keyup(function () {
        $("#btn").click(function () {
            calculateSum();
           // $("#sum").show();
        });
    });

});

function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".txt").each(function () {

        //add only if the value is number
        if (!isNaN(this.value) && this.value.length> 0) {
            sum += parseFloat(this.value);
        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").val(sum.toFixed(2));
}
</script>
<script type="text/javascript">
$(document).ready(function () {
    var id = 0;
    // Add button functionality
    $("table.add button.add").click(function () {
        id++;
        var master = $(this).parents("table.add");
        // Get a new row based on the prototype row
        var prot = master.find(".prototype").clone();
        prot.attr("class", "")
       // prot.find(".id").attr("value", id);
        master.find("tbody").append(prot);
    });

    // Remove button functionality
    $("table.add button.remove").live("click", function () {
        $(this).parents("tr").remove();

    });

    $("table.add button.addColumn").click(function () {
        var columnName = window.prompt("Enter Column name", "");
        $('table').find('th').last().before('<th>'+columnName+'</th>')
        $('table').find('tr').each(function () {
            $(this).find('td').eq(0).after('<td></td>');
        });
    });
});
</script>
<script type="text/javascript">
function calculate()
{
    var total = document.getElementById('sum').value;
    var transport = document.getElementById('transport').value;
    if(total=="")
    {
        total=0;
    }
    if(transport=="")
    {
        transport=0;
    }
    var sum = parseFloat(total)+ parseFloat(transport);
    //sum.value= parseFloat(purchase.value)+ parseFloat(transport.value);
    if (!isNaN(sum)) {
                document.getElementById('grandt').value = sum;
            }
}
</script>

This is my php code..

<?php
if(isset($_POST['Save']))
{

$con = mysql_connect("localhost","root","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("storedb", $con);
$day=$_POST['day'];
$month=$_POST['month'];
$year=$_POST['year'];
$date=$day."-".$month."-".$year;
$entry=$_POST['entry'];
foreach($_POST['product'] as $row=>$pro)
{
    $folder = "image/";
    if($pro!="")
    {
    $product=$pro;
    $brand=$_POST['brand'][$row];
    $model=$_POST['model'][$row];
    $dprice=$_POST['dprice'][$row];
    $quantity=$_POST['quantity'][$row];
    $tp=$_POST['txt'][$row];
    $quality=$_POST['quality'][$row];
    $tmp_name = $_FILES["images"]["tmp_name"][$row];
    $name = $_FILES["images"]["name"][$row];
     move_uploaded_file($tmp_name, "$folder".$name);
     $entry=$_POST['entry'][$row];

    //$sum=$_POST['sum'][$row];
    //$transport=$_POST['transport'][$row];
    //$grand=$_POST['grandt'][$row];
    //$image=$_POST['image'][$row];
    $sql=mysql_query("INSERT INTO additem (Item_id,Product,Brand,Model,Dprice,Quantity,Tprice,Quality,image) VALUES ('','$product','$brand','$model','$dprice','$quantity','$tp','$quality','$name')"); 

    }
}

if (mysql_query($sql,$con))
  {
  //die('Error: ' . mysql_error());
  echo "1 record added";
  }
}
?>

In HTML using form tag clicking save button insert all data into database.But add rows button sum of total button cannot work due to form tag.click those button the page will refreshed. How to solve this problem

read about jquery and its $.post method, on the other hand files uploading is threated differently, search for file uploading via jquery — Ivan Yonkov
– Ivan Yonkov, Commented Feb 18, 2014 at 8:51

user1844933 · Accepted Answer · 2014-02-18 08:54:17Z

3

set button type as "button" instead of submit...

<input name="btn" type="button" id="btn" value="Sum of Total Price" />

answered Feb 18, 2014 at 8:54

user1844933

3,4132 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1844933 Over a year ago

user1844933 Over a year ago

Sachin · Accepted Answer · 2014-02-18 09:32:17Z

ok i am clarifiying again. this is the code.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My jQuery Ajax test</title>
        <style type="text/css">
            #mybox {
                width: 300px;
                height: 250px;
                border: 1px solid #999;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>                          
                function myCall() {
                    var request = $.ajax({
                        url: "ajax.php",
                        type: "GET",            
                        dataType: "html"
                    });

                    request.done(function(msg) {
                        $("#mybox").html(msg);          
                    });

                    request.fail(function(jqXHR, textStatus) {
                        alert( "Request failed: " + textStatus );
                    });
                }

        </script>
    </head>
    <body>
        The following div will be updated after the call:<br />
        <div id="mybox">

        </div>
        <input type="button" value="Update" onclick="myCall()" />

    </body>
</html>

Muhammad Arif · Accepted Answer · 2016-10-07 12:30:52Z

0

Set input type as button not submit

<input name="btn" type="button" id="btn" value="Sum of Total Price" />

edited Oct 7, 2016 at 12:30

answered Feb 18, 2014 at 9:04

Muhammad Arif

1,0223 gold badges23 silver badges59 bronze badges

Comments

Chris Charles · Accepted Answer · 2016-10-07 13:22:42Z

try thse codes and edit them the way you want

And let me know where you need an help on [email protected]

<?php  
$cn=mysql_connect('localhost','root','yourpassword');  
if ($cn)  
{  
mysql_select_db('inv',$cn);  
}  
if(isset($_POST['save']))  
{  
$name=$_POST['name'];  
$location=$_POST['location'];  
mysql_query("insert into tbl_order(name,location) VALUES ('$name','$location')");  
$id=mysql_insert_id();  
for($i = 0; $i<count($_POST['productname']); $i++)  
{  
mysql_query("INSERT INTO tbl_orderdetail  
SET   
order_id = '{$id}',  
product_name = '{$_POST['productname'][$i]}',  
quantity = '{$_POST['quantity'][$i]}',  
price = '{$_POST['price'][$i]}',  
discount = '{$_POST['discount'][$i]}',  
amount = '{$_POST['amount'][$i]}'");   
}  
}   
?>  
    <!DOCTYPE html>  
    <html>  

    <head>  
        <title>Invoice</title>  
    <script src="https://code.jquery.com/jquery-1.12.0.min.js">  
        </script>  
        <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js">  
            </script>  
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  


   <script type="text/javascript">  
$(function()  
{  
$('#add').click(function()  
{  
addnewrow();  
});  
$('body').delegate('.remove','click',function()  
{  
$(this).parent().parent().remove();  
});  
$('body').delegate('.quantity,.price,.discount','keyup',function()  
{  
var tr=$(this).parent().parent();  
var qty=tr.find('.quantity').val();  
var price=tr.find('.price').val();  

var dis=tr.find('.discount').val();  
var amt =(qty * price)-(qty * price *dis)/100;  
tr.find('.amount').val(amt);  
total();  
});  
});  
function total()  
{  
var t=0;  
$('.amount').each(function(i,e)   
{  
var amt =$(this).val()-0;  
t+=amt;  
});  
$('.total').html(t);  
}  
function addnewrow()   
{  
var n=($('.detail tr').length-0)+1;  
var tr = '<tr>'+'<td class="no">'+n+'</td>'+'<td><input type="text" class="form-control productname" name="productname[]"></td>'+'<td><input type="text" class="form-control quantity" name="quantity[]"></td>'+'<td><input type="text" class="form-control price" name="price[]"></td>'+'<td><input type="text" class="form-control discount" name="discount[]"></td>'+'<td><input type="text" class="form-control amount" name="amount[]"></td>'+'<td><a href="#" class="remove">Delete</td>'+'</tr>';  
$('.detail').append(tr);   
}  
</script>  

    </head>  

            <body>  
                <form action="" method="POST">  
                    <div class="box box-primary">  
                        <div class="box-header">  
                            <h3 class="box-title">Invoice </h3>  
                        </div>  
                        <div class="box-body">  
                            <div class="form-group">  
                                ReceiptName  
                                <input type="text" name="name" class="form-control">  
                            </div>  
                            <div class="form-group">  
                                Location  
                                <input type="text" name="location" class="form-control">  
                            </div>  
                        </div>  
                        <input type="submit" class="btn btn-primary" name="save" value="Save Record">  
                    </div><br/>  
                    <table class="table table-bordered table-hover">  
                        <thead>  
                            <th>No</th>  
                            <th>Product Name</th>  
                            <th>Quantity</th>  
                            <th>Price</th>  
                            <th>Discount</th>  
                            <th>Amount</th>  
                            <th><input type="button" value="+" id="add" class="btn btn-primary"></th>  
                        </thead>  
                        <tbody class="detail">  
                            <tr>  
                                <td class="no">1</td>  
                                <td><input type="text" class="form-control productname" name="productname[]"></td>  
                                <td><input type="text" class="form-control quantity" name="quantity[]"></td>  
                                <td><input type="text" class="form-control price" name="price[]"></td>  
                                <td><input type="text" class="form-control discount" name="discount[]"></td>  
                                <td><input type="text" class="form-control amount" name="amount[]"></td>  
                                <td><a href="#" class="remove">Delete</td>  
</tr>  
</tbody>  
<tfoot>  
<th></th>  
<th></th>  
<th></th>  
<th></th>  
<th></th>  
<th style="text-align:center;" class="total">0<b></b></th>  
</tfoot>  

</table>  
</form>  
</body>  
</html>

CREATE TABLE tbl_orderdetail ( 
    order_id int, 
    product_name varchar(255), 
    quantity varchar(255), 
    price varchar(255), 
    discount varchar(255), 
    amount varchar(255)
) 

CREATE TABLE tbl_order ( 
    name varchar(255), 
    location varchar(255)
)

Collectives™ on Stack Overflow

How to insert data in database without html form tag

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related