Yash Agrawal Yash Agrawal - 1 month ago 8
HTML Question

I had made an form in html and need to add serial number which increases on submitting the form as shown in the code in invoice column

I had made an form in html and need to add serial number which increases on submitting the form as shown in the code in invoice column.

<html>
<head>
<meta charset="utf-8">
<title>Invoice</title>
<link rel="stylesheet" href="style.css">
<link rel="license" href="http://www.opensource.org/licenses/mit-license/">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Invoice</h1>
<address contenteditable>
<p>Jonathan Neal</p>
<p>101 E. Chapman Ave<br>Orange, CA 92866</p>
<p>(800) 555-1234</p>
</address>
<span>
<img alt="" src="logo.png">
<input type="file" accept="image/*">
</span>
</header>
<article>
<h1>Recipient</h1>
<address contenteditable>
<p>Some Company<br>c/o Some Guy</p>
</address>
<table class="meta">
***<tr>enter code here
<th><span contenteditable>Invoice #</span></th>
<td><span contenteditable>101138</span></td>
</tr>***
<tr>
<th><span contenteditable>Date</span></th>
<td><span contenteditable>January 1, 2012</span></td>
</tr>
<tr>
<th><span contenteditable>Amount Due</span></th>
<td><span id="prefix" contenteditable>$</span>
<span>600.00</span>
</td>
</tr>
</table>

Answer

Then you can use Javascript; first, add an id to the element, so you can access it:

 <tr>
   <th><span contenteditable>Invoice #</span></th>
   <td><span contenteditable id="invoce">101138</span></td>
 </tr>

Then, you can add the following js to your script file:

var invoice = 101138;
$('button').on('click', function () {
    invoice++; // increments invoice
    $('#invoice').text(invoice); // updates text on screen
});

That is, if you are using jquery, and 'button' is the selector for your button.

That, however, will reset when the user leaves the site. If you want it to be persistent, you need to use something like cookies or localstorage.

Here's a complete example.

Comments