I just can't seem to get my head around how document.getElementById("").innerHTML
alert("") works - so the function is fine.
In every college exercise I've done so far, I've tried to use getElement...innerHTML since I feel it's a more useful way of doing things than alert/document.write, and... it never works, ever.
Am I missing some key rules about it?
Here is a very 'early-days' example that didn't work:
<html>
<head>
<title>total of 3</title>
<script language="javascript">
function total()
{
var number1 = 0;
var number2 = 0;
var number3 = 0;
var total = 0;
number1 = parseInt(document.m.number1.value);
number2 = parseInt(document.m.number2.value);
number3 = parseInt(document.m.number3.value);
total = number1 + number2 + number3;
alert("your total is " + total);
document.getElementById("a").innerHTML = total;
}
</script>
</head>
<body>
<form name="m">
<table border="1" width="500" height="100">
<tr>
<td>First Number</td>
<td><input name="number1" type="text"></td>
</tr>
<tr>
<td>Second Number</td>
<td><input name="number2" type="text"></td>
</tr>
<tr>
<td>Third Number</td>
<td><input name="number3" type="text"></td>
</tr>
<tr>
<td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
<td><input type="submit" name="Submit" id="Submit" value="Submit" onClick="total()"></td>
</tr>
</table>
</form>
<p id="a"></p>
</body>
</html>
This is happening because you are using a submit button, and so your form submits and causes the page to change(or reload in this case since you have no action).
Because it reloads you have lost whatever you have changed. You can use preventDefault to stop the default action of an event, in this instance prevent the form submission.
Since you are using inline js you will have to pass the event object to your total function and then call preventDefault() on it.
<input type="submit" name="Submit" id="Submit" value="Submit" onClick="total(event)">
And then in your JS
function total(event){
event.preventDefault();
//...rest of your code
}
Demo
function total(event){
event.preventDefault();
var number1=0;
var number2=0;
var number3=0;
var total=0;
number1=parseInt(document.m.number1.value);
number2=parseInt(document.m.number2.value);
number3=parseInt(document.m.number3.value);
total=number1+number2+number3;
alert("your total is "+total);
document.getElementById("a").innerHTML= total;
}
<form name="m">
<table border="1" width="500" height="100">
<tr>
<td>First Number</td>
<td><input name="number1" type="text"></td>
</tr>
<tr>
<td>Second Number</td>
<td><input name="number2" type="text"></td>
</tr><tr>
<td>Third Number</td>
<td><input name="number3" type="text"></td>
</tr><tr>
<td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
<td><input type="submit" id="Submit" name="submit" value="Submit" onClick="total(event)"></td>
</tr>
</table>
</form>
<p id="a"></p>
Change you input type from submit to input type button.....
<td><input type="button" name="Submit" id="Submit" value="Submit" onClick="total()"></td>
because using submit you are refreshing your page, so you cant see your result..
AND using button page will not refresh and you will get your result :p
This is because you're submitting a form, so when you are clicking the button it's refreshing the page and thus not running the part of your script that writes to the page.
The alert pauses execution of the script (and pauses refreshing) which is why the alert part works.
To prevent the form from refreshing the page you should preventDefault on the submit event.
So, for your total function:
function total()
{
var number1=0;
var number2=0;
var number3=0;
var total=0;
number1=parseInt(document.m.number1.value);
number2=parseInt(document.m.number2.value);
number3=parseInt(document.m.number3.value);
total=number1+number2+number3;
alert("your total is "+total);
document.getElementById("a").innerHTML= total;
event.preventDefault();
}
Although this should work fine in Chrome, some browsers may need you to pass the event along with the function. So send it as an argument to your total function.
Your code is working, it doesn't change the the inner HTML because the submitbutton refreshes the page. Try :
<input type="submit" name="Submit" id="Submit" value="Submit" onClick="total();return false;" >
Refer the corrected code , here its working but you need to put some delay time otherwise it just flash once a while
<html>
<head>
<title>total of 3</title>
</head>
<body>
<form name="m">
<table border="1" width="500" height="100">
<tr>
<td>First Number</td>
<td><input name="number1" type="text"></td>
</tr>
<tr>
<td>Second Number</td>
<td><input name="number2" type="text"></td>
</tr><tr>
<td>Third Number</td>
<td><input name="number3" type="text"></td>
</tr><tr>
<td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
<td><input type="submit" name="Submit" id="Submit" value="Submit" onClick="total()"></td>
</tr>
</table>
<p id="a"></p>
</form>
<script >
function total()
{
var number1=0;
var number2=0;
var number3=0;
var total=0;
number1=parseInt(document.m.number1.value);
number2=parseInt(document.m.number2.value);
number3=parseInt(document.m.number3.value);
total=number1+number2+number3;
alert("your total is "+total);
document.getElementById("a").innerHTML = total;
}
</script>
</body>
</html>
Related
So I have A Table With Buttons and match information, I am trying to script a code when I click on the specific button, it adds my selections to div(cart) for example if i click on the first button (1.59), it should add the match Name to the cart (Arsenal-Chelsea) ,The related selection (Arsenal) OR Header Name (Home) and The Value (1.59) in this order
Arsenal-Chelsea
Arsenal
1.59
Plus, I need it to be functional whenever I Re-click on the same button (1.59) it should be able to remove the selection from the cart
$(".nr").click(function() {
var $item = $(this).closest("tr").find(".nr").val();
$("#cart").append($item);
$("#cart").append("<div class='cart' Id='cart'>");
});
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javscript" src="script.js"></script>
<div class="cart" Id="cart">
<div class="title">Bet Slip</div>
<chr/>
<div id="sel"><span></span></div><br>
<span>Selections:</span><br>
<button class="bet1">Bet</button><br>
</div>
<br>
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
<thead>
<tr class="ui-widget-header ">
<th>Match</th>
<th>Home</th>
<th>Draw</th>
<th>Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arsenal-Chelsea</td>
<td><input type=button class="nr" value="1.59"></td>
<td><input type=button class="nr" value="3.40"></td>
<td><input type=button class="nr" value="2.90"></td>
</td>
</tr>
<tr>
<td>Man United-Man City</td>
<td><input type=button class="nr" value="2.70"></td>
<td><input type=button class="nr" value="2.90"></td>
<td><input type=button class="nr" value="2.50"></td>
</td>
</tr>
<tr>
<td>Barcelona-Real Madrdid</td>
<td><input type=button class="nr" value="3.60"></td>
<td><input type=button class="nr" value="3.20"></td>
<td><input type=button class="nr" value="1.95"></td>
</td>
</tr>
</tbody>
</table>
You need to use DOM traversal to find the content related to the button which was clicked. To get the venue you can get the index of the containing td and then retrieve the matching thead th which holds the text. To get the match you can get the text of the first td in the current row.
When appending the new content, don't use id attributes as they must be unique.
Also note in the following example that I fixed some of the issues in your HTML, such as extra </td> tags and removing the <chr /> tag, which doesn't exist.
let $th = $('#choose-address-table thead th');
$(".nr").on('click', e => {
let $btn = $(e.target);
let $option = $(`.cart[data-id="${$btn.prop('id')}"]`);
if ($option.length) {
$option.remove();
return;
}
let $tr = $btn.closest('tr');
let selectionIndex = $btn.closest('td').index();
let match = $tr.find('td:first').text().trim();
let result = $th.eq(selectionIndex).text().trim();
let value = $btn.val();
$("#cart").append(`<div class="cart" data-id="${$btn.prop('id')}">${match} ${result} ${value}</div>`);
});
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class="cart" Id="cart">
<div class="title">Bet Slip</div>
<div id="sel"><span></span></div><br />
<span>Selections:</span><br />
<button class="bet1">Bet</button><br />
</div><br />
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
<thead>
<tr class="ui-widget-header">
<th>Match</th>
<th>Home</th>
<th>Draw</th>
<th>Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arsenal-Chelsea</td>
<td><input type="button" class="nr" value="1.59" id="option_0_0" /></td>
<td><input type="button" class="nr" value="3.40" id="option_0_1" /></td>
<td><input type="button" class="nr" value="2.90" id="option_0_2" /></td>
</tr>
<tr>
<td>Man United-Man City</td>
<td><input type="button" class="nr" value="2.70" id="option_1_0" /></td>
<td><input type="button" class="nr" value="2.90" id="option_1_1" /></td>
<td><input type="button" class="nr" value="2.50" id="option_1_2" /></td>
</tr>
<tr>
<td>Barcelona-Real Madrdid</td>
<td><input type="button" class="nr" value="3.60" id="option_2_0" /></td>
<td><input type="button" class="nr" value="3.20" id="option_2_1" /></td>
<td><input type="button" class="nr" value="1.95" id="option_2_2" /></td>
</tr>
</tbody>
</table>
So I have this little homework im struggling with. Everytime I declare a variable as parseFloat in Javascript. It just results the textbox a NaN. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Bank Statement</title>
</head>
<body>
<center>
<h1 style="font-size:43pt">Statement of Account</h1>
<p>
<form name=fr1>
Customer Name: <input type=text name=ct>
Account No. : <input type=text name=acct><br><br>
<table border=4>
<tr>
<th>Description</th>
<th>Debit</th>
<th>Credit</th>
<th>Balance</th>
</tr>
<tr>
<th>Last Balance</th>
<td> </td>
<td> </td>
<td><input type=text name=b1></td>
</tr>
<tr>
<th>Monthly Salary</th>
<td><input type=text name=d2></td>
<td><input type=text name=c2></td>
<td><input type=text name=b2></td>
</tr>
<tr>
<th>ATM</th>
<td><input type=text name=d3></td>
<td><input type=text name=c3></td>
<td><input type=text name=b3></td>
</tr>
<tr>
<th>Refund</th>
<td><input type=text name=d4></td>
<td><input type=text name=c4></td>
<td><input type=text name=b4></td>
</tr>
<tr>
<th>ATM</th>
<td><input type=text name=d5></td>
<td><input type=text name=c5></td>
<td><input type=text name=b5></td>
</tr>
<tr>
<th>Telephone Bill</th>
<td><input type=text name=d6></td>
<td><input type=text name=c6></td>
<td><input type=text name=b6></td>
</tr>
<tr>
<th>Total Movement</th>
<td><input type=text name=d7></td>
<td><input type=text name=c7></td>
<td> </td>
</tr>
</table><br>
<input type=button value="Show" onclick=show()>
<input type=reset value="Clear">
</form>
<script language="javascript">
function show()
{
b1=document.fr1.b1.value;
b2=document.fr1.b2.value;
b3=document.fr1.b3.value;
b4=document.fr1.b4.value;
b5=document.fr1.b5.value;
b6=document.fr1.b6.value;
d2=document.fr1.d2.value;
d3=document.fr1.d3.value;
d4=document.fr1.d4.value;
d5=document.fr1.d5.value;
d6=document.fr1.d6.value;
d7=document.fr1.d7.value;
c2=document.fr1.c2.value;
c3=document.fr1.c3.value;
c4=document.fr1.c4.value;
c5=document.fr1.c5.value;
c6=document.fr1.c6.value;
c7=document.fr1.c7.value;
b1=parseFloat(b1);
b2=parseFloat(b2);
b3=parseFloat(b3);
b4=parseFloat(b4);
b5=parseFloat(b5);
b6=parseFloat(b6);
d2=parseFloat(d2);
d3=parseFloat(d3);
d4=parseFloat(d4);
d5=parseFloat(d5);
d6=parseFloat(d6);
d7=parseFloat(d7);
c2=parseFloat(c2);
c3=parseFloat(c3);
c4=parseFloat(c4);
c5=parseFloat(c5);
c6=parseFloat(c6);
c7=parseFloat(c7);
document.fr1.b2.value=(b1-d2+c2);
document.fr1.b3.value=(b2-d3+c3);
document.fr1.b4.value=(b3-d4+c4);
document.fr1.b5.value=(b4-d5+c5);
document.fr1.b6.value=(b5-d6+c6);
document.fr1.d7.value=(d2+d3+d4+d5+d6);
document.fr1.c7.value=(c2+c3+c4+c5+c6);
}
</script>
</center>
</body>
</html>
So I dont know why it's giving me NaN. Any tips or info I missed?
EDIT: This is what im getting at NaN: http://gyazo.com/73ae7a6d0fbbf4500b7547425c367349
-- Notice that the Blance and Credit give the 2nd balance NaN
There are two errors in the code:
You're falling prey to The Horror of Implicit Globals by not declaring your local variables.
You're parsing fields with blank values and not checking the result. parseFloat("") returns NaN.
If you declare your variables and check that you're not parsing blank fields, you won't have NaN slipping into things.
If you want to treat a blank field as 0, you can use JavaScript's curiously-powerful || operator for that:
b1 = parseFloat(b1) || 0;
Separately from those errors, any time you find yourself writing long lists of variable names like b1, b2, b3, etc., look at using a loop and/or arrays.
I am developing a code, which takes a value as input and the form when submitted, displays the result and the code is as follows:
<script>
function submitme()
{
document.forms["myform"].submit();
}
</script>
<body onload="submitme()">
<FORM name="performance" id="myform" method="post" action="http://www.pvpsiddhartha.ac.in/index.sit" >
<INPUT type="hidden" name="service" value="STU_PERFORMANCE_MARKS_DISPLAY">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="2" align="center"><STRONG><U>Student Marks Performance Display Form</U></STRONG></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right" width="40%">Regd. No:</TD>
<TD><INPUT type="text" name="stid" value="<?php echo $_GET['x']; ?>"></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right"><INPUT type="submit" name="submit" value="Submit"></TD>
<TD align="center"><INPUT type="reset" value="Clear"></TD>
</TR>
</TABLE>
</FORM>
</body>
The problem is, when the page is loaded completely, the form should be submitted , but the form cannot be submitted. What is the problem , Help me!! Thanks in advance
Try this pure javascript,
<body>
<FORM name="performance" id="myform" method="post" action="http://www.pvpsiddhartha.ac.in/index.sit" >
<INPUT type="hidden" name="service" value="STU_PERFORMANCE_MARKS_DISPLAY">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="0">
<TR>
<TD colspan="2" align="center"><STRONG><U>Student Marks Performance Display Form</U></STRONG></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right" width="40%">Regd. No:</TD>
<TD><INPUT type="text" name="stid" value=""></TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD align="right"><INPUT type="submit" name="submit_button" value="Submit"></TD>
<TD align="center"><INPUT type="reset" value="Clear"></TD>
</TR>
</TABLE>
</FORM>
<script>
window.onload = function(){
document.getElementById('myform').submit();
};
</script>
To access this document.getElementById('myform').submit(), you should change <INPUT type="submit" name="submit" value="Submit"> to <INPUT type="submit" name="submit_button" value="Submit">. Don't use other element with name of submit or id.
And also the better one is,
<script>
window.ready = function(){
document.getElementById('myform').submit();
};
</script>
It should help:
$(document).ready(function () {
$('#myform').trigger('submit'); });
Still I don't get what is the point of submitting the form after page loads.
try
<script>
function submitme()
{
document.forms["performance"].submit();
}
</script>
or
<script>
function submitme()
{
document.forms[0].submit();
}
</script>
I was wondering how I could input a value into a form with html.
So right when the user goes to the site there's numbers in the text boxes already and they use those numbers to play and "addition game".
This is what I have so far:
<script type="text/javascript">
function addSubmit() {
//trying to have num1 and num2 write into the html form
var num1= Math.floor(89+Math.random()*11);
var num2 = Math.floor(89+Math.random()*11);
/*num1 = value1
num2 = value2*/
document.getElementById("value1").value = num1;
document.getElementById("value2").value = num2;
var guess = document.getElementById("submit").value;
var answer = num1 + num2;
//have to write this to main window
if (guess == answer)
document.writeln("Congratulations you answered correctly! The answer to: "+num1+"+"+num2+"= "+answer);
else
document.writeln("Nice try, but the correct answer to: "+num1+"+"+num2+"= "+answer);
}
function addGiveUp() {
var num1 = Math.floor(89+Math.random()*11)
var num2 = Math.floor(89+Math.random()*11)
document.addition.value1.value=num1;
document.addition.value2.value=num2;
var guess = document.getElementById("submit").value;
var answer = (document.getElementById("value1").value) + (document.getElementById("value2").value);
document.writeln("Never give up! The answer to: "+num1+"+"+num2+"= "+answer);
}
</script>
<form name="addition" action="" method="get">
<table border="1">
<tr>
<td>Value 1:</td> <td><input type="text" name="value1" id="value1"/></td>
</tr>
<tr>
<td>Value 2:</td> <td><input type="text" name="value2" id="value2"/></td>
</tr>
<tr>
<td>Answer:</td> <td><input type="text" id="answer" /></td>
</tr>
<tr><td><input type="button" value="Submit" onClick="addSubmit()" id="submit" /></td><td><input type="button" value="Give Up" onClick="addGiveUp()" /></td></tr>
</table>
</form>
I appreciate any help! Thanks!
well you can put this script after the form is created:
<form name="addition" action="" method="get">
<table border="1">
<tr>
<td>Value 1:</td> <td><input type="text" name="value1" id="value1"/></td>
</tr>
<tr>
<td>Value 2:</td> <td><input type="text" name="value2" id="value2"/></td>
</tr>
<tr>
<td>Answer:</td> <td><input type="text" id="answer" /></td>
</tr>
<tr><td><input type="button" value="Submit" onClick="addSubmit()" id="submit" /></td><td><input type="button" value="Give Up" onClick="addGiveUp()" /></td></tr>
</table>
</form>
<!-- This is the script-->
<script type="text/javascript">
document.getElementById("value1").value = Math.floor(89+Math.random()*11);
document.getElementById("value2").value = Math.floor(89+Math.random()*11);
</script>
That would generate random numbers for you and put them in the form
See here for the code: http://jsfiddle.net/wVAFt/
<input type="text" id="answer" value="5" >
or
document.getElementById("answer").value = "5";
To have numbers in input fields you can set them to have a value, like value="10" and the default value would be 10 until the user changes it.
I'm having problems with my arrays. My first buttonMsg() displayed the prompt correctly and the input went straight to the text box.
Now I'm having trouble duplicating that same code into my second array.
When I tried nothing would work. I'm thinking it has to do with buttonMsg.
<html>
<head>
<title></title>
<script type="text/javascript">
function buttonMsg(){
varData = new Array();
varData[0] = prompt("Please enter first name.","")
varData[1] = prompt("Please enter last name.","")
varData[2] = prompt("Please enter phone number.","")
varData[3] = prompt("Please enter address.","")
document.getElementsByName('inputbox')[0].value = varData[0]
document.getElementsByName('inputbox')[1].value = varData[1]
document.getElementsByName('inputbox')[2].value = varData[2]
document.getElementsByName('inputbox')[3].value = varData[3]
}
function buttonMsg(1){
varDater = new Array(1);
varDater[0] = prompt("Please enter first name.","")
varDater[1] = prompt("Please enter last name.","")
varDater[2] = prompt("Please enter phone number.","")
varDater[3] = prompt("Please enter address.","")
document.getElementsByName('inputbox')[0].value = varDater[0]
document.getElementsByName('inputbox')[1].value = varDater[1]
document.getElementsByName('inputbox')[2].value = varDater[2]
document.getElementsByName('inputbox')[3].value = varDater[3]
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>0,0 CustomerID</td>
<td>1 FirstName</td>
<td>2 LastName</td>
<td>3 Phone</td>
<td>4 Address</td>
</tr>
<tr>
<td>1 Customer1 <input type="button" value="Input" onclick="buttonMsg()"/></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
</tr>
<tr>
<td>2 Customer2 <input type="button" value="Input" onclick="buttonMsg(1)"/></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
</tr>
<tr>
<td>3 Customer3</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4 Customer4</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Looks like the problem is that the inputs are all named "inputbox", so really there will be no output difference between the first and second functions. They will both populate the first 4 elements named "inputbox" on the page, so clicking on the second button will still populate the first section's input boxes. It might make more sense to pass in the name of the section's inputs into the function like this:
buttonMsg(inputname){
var inputs = document.getElementsByName(inputname);
inputs[0].value = prompt("Please enter first name.","");
inputs[1].value = prompt("Please enter last name.","");
inputs[2].value = prompt("Please enter phone number.","");
inputs[3].value = prompt("Please enter address.","");
}
then have the buttons pass the names of the inputs like this:
<tr>
<td>1 Customer1 <input type="button" value="Input" onclick="buttonMsg('inputbox1')" /></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
</tr>
and change out "inputbox1" to different names for each of the items.
Changing the code from:
function buttonMsg(1){
varDater = new Array(1);
to
function buttonMsg1(){
varDater = new Array();
and then calling buttonMsg1(); later should fix the problem.
However I suggest you further research into initializing arrays and how functions work in javascript. As the () in a function are used to send arguments (variables) to later be used in that function. In this scenario they should be left blank.
This site provides a good starting point to help understand functions.
Further looking at your code shows me that you'd also want to change the:
document.getElementsByName('inputbox')[0]
in the second function to
document.getElementsByName('inputbox')[4]
etc for all the values in that second function.
However this is definately not the best method to use for scalability (if you want more than two customers) and I suggest using a function that takes different element names as an argument.
The code shouldn't even work. Chrome reports error and halts script execution.
The declaration of the second function has an invalid argument variable name.
What characters are valid for JavaScript variable names?
Also, as already stated, there are duplicate names.
If you're allowed to use jQuery, the following might be a more interesting solution:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<title>Example</title>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('input.promptInput').bind('click', function() {
varData = new Array();
varData[0] = prompt("Please enter first name.","")
varData[1] = prompt("Please enter last name.","")
varData[2] = prompt("Please enter phone number.","")
varData[3] = prompt("Please enter address.","")
$(this).parents('tr:first').find('input[type="text"]').each(function(i, input){
$(input).val(varData[i]);
});
});
});
})(jQuery);
</script>
</head>
<body>
<table border="1">
<tr>
<td>0,0 CustomerID</td>
<td>1 FirstName</td>
<td>2 LastName</td>
<td>3 Phone</td>
<td>4 Address</td>
</tr>
<tr>
<td>1 Customer1 <input class="promptInput" type="button" value="Input"/></td>
<td><input type="text" name="customer_1_firstname" value=""></td>
<td><input type="text" name="customer_1_lastname" value=""></td>
<td><input type="text" name="customer_1_phone" value=""></td>
<td><input type="text" name="customer_1_address" value=""></td>
</tr>
<tr>
<td>1 Customer1 <input class="promptInput" type="button" value="Input"/></td>
<td><input type="text" name="customer_2_firstname" value=""></td>
<td><input type="text" name="customer_2_lastname" value=""></td>
<td><input type="text" name="customer_2_phone" value=""></td>
<td><input type="text" name="customer_2_address" value=""></td>
</tr>
<tr>
<td>3 Customer3</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4 Customer4</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>