update data using input type button

Question

I have a form with two input type buttons. The first is edit, when I click it the input field will be enabled. The second one is save, when I click it the input field will be disabled and I should have the new values in mysql database.

All of this works fine except updating the value to database. How can I update this value after edit using input type button? I can't use submit because it causes a problem in reload page for enable and disable input field.

jquery code to enable and disable

<script>
     $(document).ready(function(){
         $("form input[type=text],form input[type=checkbox]").prop("disabled",true);
         $("input[name=edit]").on("click",function(){  $(this).closest("tr").find("input[type=text],input[type=checkbox],select").removeAttr("disabled");
         })
         $("input[name=save]").on("click",function(){   $(this).closest("tr").find("input[type=text],input[type=checkbox],select").prop("disabled",true);
     })
    </script>

/***********************************************/

<form name='' id='' action='' method='post'>
<input type='text' name='txt_category' id='category' value='$category' disabled>
<input type='text' name='txt_stage' id='stage' value='$stage' disabled>
<input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
<input type='button' name='edit' value='edit'>
<input type='button' name='save' id='save' value='save'>
</form>

<?php
ob_start();
include("../includes/connect.php");
$id=$_POST['txt_id'];
$stage=$_POST['txt_stage'];
$category=$_POST['txt_category'];
$priority=$_POST['txt_priority'];
$frequency=$_POST['txt_frequency'];
$notapprove=$_POST['txt_notapprove'];
$approve=$_POST['txt_approve'];
$notexist=$_POST['txt_notexist'];
$wo=$_POST['txt_wo'];
$duration=$_POST['duration'];
$startdate=$_POST['startdate'];
$enddate=$_POST['enddate'];
$asd=$_POST['txt_asd'];
$add=$_POST['txt_add'];
$aduration=$_POST['txt_aduration'];
$transferredto=$_POST['txt_transferredto'];
$prb=$_POST['txt_percentage'];
$note=$_POST['txt_note'];
$projectname=$_POST['txt_projectname'];
if($notapprove==""){$notapprove="False";}else{$notapprove="True";}
if($approve==""){$approve="False";}else{$approve="True";}
if($notexist==""){$notexist="False";}else{$notexist="True";}
$sql=mysqli_query($conn,"update tbl_checklist set db_category='$category',db_stage='$stage',db_priority='$priority',db_frequency='$frequency',db_notapprove='$notapprove',db_wo='$wo',db_asd='$asd',db_add='$add',db_aduration='$aduration',db_transferredto='$transferredto',db_percentage='$prb',db_note='$note',db_approve='$approve',db_notexist='$notexist' where db_id='$id'")or die(mysqli_error($conn));
//header("location:checklist.php?msg=1&s=$projectname");
ob_end_flush();
?>

Use ajax and post data to another file and update it to mysql database — Sasikumar
– Sasikumar, Commented Sep 2, 2016 at 12:38

Dranok · Accepted Answer · 2016-09-02 12:38:35Z

0

To update your database you have to do it server side. If you don't want to reload the page then use Ajax. If you are using JQuery your can see a good documentation about JQuery Ajax. It's really simple.

answered Sep 2, 2016 at 12:38

Dranok

364 bronze badges

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

1 Comment

mohamad mohamad Over a year ago

i try use this but it didn't work yet no update in database i try to use this but it didn't work yet no update in the database <script> $(document).ready(function(){ $('#save').click(function(){ $.ajax( { type: "POST", url: 'response.php', data: $('#search-form').serialize(), success: function(response) { $('#response').html(response); } } ); }); }); </script>

Sasikumar · Accepted Answer · 2016-09-02 12:40:14Z

0

You can use the below ajax method to update data without reloading page.

Depending on what type of request you're making, this data will either be included in the $_GET or $_POST global variables. Below is a simple example

$.ajax({                    
  url: 'content/get.php',     
  type: 'post', // performing a POST request
  data : {
    data1 : 'value' // will be accessible in $_POST['data1']
  },
  dataType: 'json',                   
  success: function(data)         
  {
    // etc...
  } 
});

answered Sep 2, 2016 at 12:40

Sasikumar

8535 silver badges9 bronze badges

4 Comments

mohamad mohamad Over a year ago

i try to use this but it didn't work yet no update in the database <script> $(document).ready(function(){ $('#save').click(function(){ $.ajax( { type: "POST", url: 'response.php', data: $('#search-form').serialize(), success: function(response) { $('#response').html(response); } } ); }); }); </script>

mohamad mohamad Over a year ago

check above please

Sasikumar Over a year ago

data : { data1 : 'value' // will be accessible in $_POST['data1'] } pass value with a name

Sasikumar Over a year ago

Refer this stackoverflow question stackoverflow.com/questions/20404407/…

Collectives™ on Stack Overflow

update data using input type button

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related