HTML table and external Php file that change value

Question

I have table like this:

<table border="1">
	<tr align="left" valign="top">
		<th>ID</th>
		<th>NAME</th>
		<th>VALUE</th>
	</tr>
	<tr align="left" valign="top">
		<td>1</td>
		<td>Item 1</td>
		<td><button>-</button> 5 <button>+</button></td>
	</tr>
</table>

It is generated by Php and all information are from MySql DB.. I would like to activate buttons "-" and "+", so when I click minus, value 5 (in this case) will became 4 or when I click plus value 5 will became 6, and also in MySql DB some external php file will change values in real time..

I tried with some AJAX scripts, but I am stuck.. Please help.. Thanks..

So show what you've attempted so far. We're not here to do your job for you. — Marc B
– Marc B, Commented Dec 3, 2015 at 21:46
You need to post your PHP and JS code for us to understand the problem. — Sam
– Sam, Commented Dec 3, 2015 at 21:50

Logan Wayne · Accepted Answer · 2015-12-04 01:57:05Z

Try storing first the value in an HTML element like <span></span>, and assign class tag for the + and - button:

<table border="1">
  <tr align="left" valign="top">
    <th>ID</th>
    <th>NAME</th>
    <th>VALUE</th>
  </tr>
  <tr align="left" valign="top">
    <td>1</td>
    <td>Item 1</td>
    <td><button class="minus">-</button> <span>5</span> <button class="plus">+</button></td>
  </tr>
</table>

Then create the script:

$(document).ready(function(){

  $(document).on("click", ".minus", function(){ /* WHEN MINUS IS CLICKED */

    var elem = $(this); /* THE ELEMENT CLICKED */
    var id = elem.parent().siblings(":first").text(); /* ID OF THIS ROW IN THE DATABASE */
    var current_no = Number(elem.closest("td").find("span").html()); /* CURRENT VALUE OF THIS ROW */
    var new_no = current_no - 1; /* REDUCE ONE VALUE */
    elem.closest("td").find("span").html(new_no); /* REPLACE WITH THE NEW NUMBER INSIDE THE SPAN */
  });

  $(document).on("click", ".plus", function(){ /* WHEN PLUS IS CLICKED */
    var elem = $(this); /* THE ELEMENT CLICKED */
    var id = elem.parent().siblings(":first").text(); /* ID OF THIS ROW IN THE DATABASE */
    var current_no = Number(elem.closest("td").find("span").html()); /* CURRENT VALUE OF THIS ROW */
    var new_value = current_no + 1; /* ADD ONE VALUE */
    elem.closest("td").find("span").html(new_no); /* REPLACE WITH THE NEW NUMBER INSIDE THE SPAN */
  });

});

For updating the data in your MySQL database in real-time, you need to use AJAX.

$.ajax({ /* START AJAX */
  type: "POST", /* METHOD TO USE TO PASS THE DATA */
  url: "update.php", /* FILE DESTINATION OF THE DATA */
  data: {"id": id, "value": new_value} /* THE DATA TO BE PASSED ON */
}); /* END OF AJAX */

On the update.php file, it must contain the UPDATE query:

/*** YOUR ESTABLISHED CONNECTION HERE ***/
$stmt = $connection->prepare("UPDATE table SET value = ? WHERE id = ?");
$stmt->bind_param("ii", $_POST["value"], $_POST["id"]);
$stmt->execute();

Here is a jsfiddle (but without the AJAX).

A.L · Accepted Answer · 2015-12-03 22:25:02Z

1

If you use a form to fetch this value, you can use the <input type="number" />:

<table border="1">
	<tr align="left" valign="top">
		<th>ID</th>
		<th>NAME</th>
		<th>VALUE</th>
	</tr>
	<tr align="left" valign="top">
		<td>1</td>
		<td>Item 1</td>
		<td><input type="number" value="5" /></td>
	</tr>
</table>

Modern web browsers will display buttons to decrease or increase the value.

answered Dec 3, 2015 at 22:25

A.L

10.6k10 gold badges73 silver badges106 bronze badges

Comments

A.L · Accepted Answer · 2015-12-03 23:47:01Z

1

Using JS/jQuery:

/* JS: */

var counter = 5;

$(".down").on("click", function() {
  if (counter > 0) {
    counter--;
    $('.anumber').text(counter);
  }
});

$(".up").on("click", function() {
  counter++;
  $('.anumber').text(counter);
});

<!-- HTML: -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr align="left" valign="top">
    <th>ID</th>
    <th>NAME</th>
    <th>VALUE</th>
  </tr>
  <tr align="left" valign="top">
    <td>1</td>
    <td>Item 1</td>
    <td>
      <button class="down">-</button> <span class="anumber">5</span> 
      <button class="up">+</button>
    </td>
  </tr>
</table>

JSFiddle

edited Dec 3, 2015 at 23:47

A.L

10.6k10 gold badges73 silver badges106 bronze badges

answered Dec 3, 2015 at 22:07

Korgrue

3,4781 gold badge15 silver badges21 bronze badges

Comments

Zakaria Acharki · Accepted Answer · 2015-12-04 07:50:44Z

Better if you can change your html and add some classes, check the following suggestion :

$(function(){
    $('body').on('click' ,'.minus', function(){
        var current_number = parseInt($(this).parent().find('.number').text());
        current_number--;
        $(this).parent().find('.number').text(current_number);
    });

    $('body').on('click' ,'.plus', function(){
        var current_number = parseInt($(this).parent().find('.number').text());
        current_number++;
        $(this).parent().find('.number').text(current_number);
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr align="left" valign="top">
    <th>ID</th>
    <th>NAME</th>
    <th>VALUE</th>
  </tr>
  <tr align="left" valign="top">
    <td>1</td>
    <td>Item 1</td>
    <td>
      <button class='minus'>-</button>
      <span class='number'>5</span>
      <button class='plus'>+</button>
    </td>
  </tr>
</table>

Hope this helps.

Collectives™ on Stack Overflow

HTML table and external Php file that change value

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related