I have created form on their 3 fields is there customer name, contact and email
suppose to be if clicked submit button to addmore row so how would we do
<html>
<head>
</title></title>
</head>
<body>
<form action="insert_customer.php" method="post">
<table id="addrow">
<tr>
<td>Customer Name:</td>
<td>
<input type="text" name="cust_name">
</td>
<td>Contact:</td>
<td>
<input type="text" name="contact">
<td>Email</td>
<td>
<input type="email" name="email">
</td>
</tr>
</table>
<script>
function addrow(){ }
</script>
<p>
<input type="submit" name="submit" value="submit">
<input type="button"name="Addmore" value="Addmore"/> </p>
</form>
</body>
</html>
Append your table addrow with jquery.append().
<html>
<head>
</title></title>
</head>
<body>
<form action="insert_customer.php" method="post">
<table id="addrow">
<tr>
<td>Customer Name:</td>
<td>
<input type="text" name="cust_name">
</td>
<td>Contact:</td>
<td>
<input type="text" name="contact">
<td>Email</td>
<td>
<input type="email" name="email">
</td>
</tr>
</table>
<p>
<input type="submit" name="submit" value="submit">
<input type="button" id="add" name="Addmore" value="Addmore"/>
</p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$( "#add" ).click(function() {
$("#addrow").append('<tr> <td>Customer Name:</td> <td><input type="text" name="cust_name"></td> <td>Contact:</td> <td><input type="text" name="contact"><td>Email</td> <td><input type="email" name="email"></td></tr> ');
});
</script>
</body>
</html>
Since, you are having multiple values for Customer Name,Contact,Email . So, you have to use name as array type. Like below.
<html>
<head>
</title></title>
</head>
<body>
<form action="insert_customer.php" method="post">
<table id="addrow">
<tr>
<td>Customer Name:</td>
<td>
<input type="text" name="cust_name[]">
</td>
<td>Contact:</td>
<td>
<input type="text" name="contact[]">
<td>Email</td>
<td>
<input type="email" name="email[]">
</td>
</tr>
</table>
<p>
<input type="submit" name="submit" value="submit">
<input type="button" id="add" name="Addmore" value="Addmore"/>
</p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$( "#add" ).click(function() {
$("#addrow").append('<tr> <td>Customer Name:</td> <td><input type="text" name="cust_name[]"></td> <td>Contact:</td> <td><input type="text" name="contact[]"><td>Email</td> <td><input type="email" name="email[]"></td></tr> ');
});
</script>
</body>
</html>
On user's request.
insert_customer.php
<?php
// Write Your Databse Connection.
$custName = $_POST['cust_name'];
$custContact = $_POST['contact'];
$custEmail = $_POST['email'];
$totalCustomerName = sizeof($custName);
for($i=0;$i<$totalCustomerName;$i++) {
$customerName = $custName[$i];
$customerContact = $custContact[$i];
$customerEmail = $custEmail[$i];
$sql ="insert into customer_info(cust_name,contact,email)values('$customerName',$customerContact,'$customerEmail')";
// Run your query here.
}
?>
First you should add onclick event to the addmore button so it will trigger the function addrow()' when the user click :
<input type="button" name="Addmore" value="Addmore" onclick='addrow()'/>
Then you can append another column to the existing HTML element using .innerHTML += :
function addrow(){
document.querySelector('#addrow tr').innerHTML += '<td>Address</td><td><input type="address" name="address"></td>';
}
<form action="insert_customer.php" method="post">
<table id="addrow">
<tr>
<td>Customer Name:</td>
<td>
<input type="text" name="cust_name">
</td>
<td>Contact:</td>
<td>
<input type="text" name="contact">
<td>Email</td>
<td>
<input type="email" name="email">
</td>
</tr>
</table>
<p>
<input type="submit" name="submit" value="submit">
<input type="button" name="Addmore" value="Addmore" onclick='addrow()'/> </p>
Related
I can't get this code block to work properly:
<script>
function Message(){
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
</body>
Try this
</head>
<body>
<form onsubmit="event.preventDefault();">
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
<script>
function Message(){ document.getElementById("sname").innerHTML = document.getElementById("name").value; return false;}
</script>
</body>
That's a submit button. Make type='button' instead.
Solution #1
function Message(){
event.preventDefault();
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
Solution #2 you can just use button instead of input.
function Message(){
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<button type="button" onclick="Message()"/>Click me</button>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
Hope it helps!
I am trying to validate my username field and check if the username contains atleast 6 letters, if not then i show a pop up window indicating the same.
But the alert command does not seem to work.
Following is the code:
<html>
<head>
<title> Webpage </title>
</head>
<script language="Javascript">
function validate()
{
if (username1.length < 6)
{
alert("Username must be atleast 6 charactrs long, Please Try Again");
}
}
</script>
<body>
<form>
<center>
<fieldset>
<table cellspacin="5" cellpadding="5" border="0">
<tr>
<td>Username: </td>
<td align="left"><input type=="text" name="username1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Password: </td>
<td align = "left"> <input type="text" name="password" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Please confirm your password: </td>
<td align = "left"> <input type="text" name="password1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="Log in" onClick="validate()">
</td>
</tr>
</fieldset>
</table>
</center>
</form>
</body>
</html>
You are trying to use the name element attribute as the id, which creates a global window property. Name does not do that however, you can use.
You also aren't getting the value, you are trying to get the length on the element.
document.getElementsByName('username1')[0].value
Answer:
I tried it this way it worked:
<html>
<head>
<title> Webpage </title>
</head>
<script language="Javascript">
function validate()
{
username2 =form1.username1.value
if (username2.length < 6)
{
alert("Username must be atleast 6 charactrs long, Please Try Again");
}
}
</script>
<body>
<form name="form1">
<center>
<fieldset>
<table cellspacin="5" cellpadding="5" border="0">
<tr>
<td>Username: </td>
<td align="left"><input type=="text" name="username1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Password: </td>
<td align = "left"> <input type="text" name="password" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Please confirm your password: </td>
<td align = "left"> <input type="text" name="password1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="Log in" onClick="validate()">
</td>
</tr>
</fieldset>
</table>
</center>
</form>
</body>
</html>
<form id="myForm" action="firstjsp" method="post">
<table>
<tr>
<td> User Name:</td>
<td><input type="text" name="userName"></td></tr>
<tr><td>Email:</td><td><input type="text" name="emailID"></td></tr>
<tr><td>New Password:</td><td> <input type="password" name="userPassword"></td></tr>
<tr><td>Confirm Password: </td><td> <input type="password" name="confirmPassword"></td></tr>
<tr><td>Address: </td><td><input type="text" cols="40" rows="5" name="address"></td></tr>
<tr><td>Gender:</td> <td><input type="radio" name="radioGender" value="Male" >Male</td>
<td><input type="radio" name = "radioGender" value="female">Female </td></tr>
<tr><td><center><input type="submit" value="Submit"></center></td> <td><center><button onClick="myFunction()">Reset</button></center></td></tr>
</table>
</form>
<script>
function myFunction(){
document.getElementByName("myForm").(reset);
}
</script>
<--firstjsp is a servelt file. on clicking reset the program moves to the servlet program instead of displaying the same page-->
This should reset all values in the Form to its defaults. No need for Javascript.
In order to work you need to place the <input ... > inside the same <form> </form> tag as the form you would like to reset.
<input type="reset" value="Reset">
IT is working fine, try this once
<form id="myForm" action="firstjsp" method="post">
<table>
<tr>
<td> User Name:</td>
<td><input type="text" name="userName"></td></tr>
<tr><td>Email:</td><td><input type="text" name="emailID"></td></tr>
<tr><td>New Password:</td><td> <input type="password" name="userPassword"></td></tr>
<tr><td>Confirm Password: </td><td> <input type="password" name="confirmPassword"></td></tr>
<tr><td>Address: </td><td><input type="text" cols="40" rows="5" name="address"></td></tr>
<tr><td>Gender:</td> <td><input type="radio" name="radioGender" value="Male" >Male</td>
<td><input type="radio" name = "radioGender" value="female">Female </td></tr>
<tr><td><center><input type="submit" value="Submit"></center></td> <td><center><input type="Reset" value="Reset" onClick="myFunction()"></button></center></td></tr>
</table>
</form>
<script>
function myFunction(){
document.getElementByName("myForm").(reset);
}
</script>
HTML:
<tbody>
<tr id="hiddenRow">
<td>
<button id="saveBtn" class="btn btn-success btn-xs">save</button>
</td>
<td id="firstName">
<input id="first" type="text" placeholder="first name" name="first_name" />
</td>
<td id="lastName">
<input id="last" type="text" placeholder="last name" name="last_name" />
</td>
<td id="date">
<input id="dateOf" type="text" placeholder="date of birth" name="date_of_birth" />
</td>
<td id="address">
<input id="addres" type="text" placeholder="address" name="address" />
</td>
<td id="phone">
<input id="phonenumber" type="text" placeholder="phone" name="phone" />
</td>
<td id="email">
<input id="mail" type="text" placeholder="email" name="email" />
</td>
<td id="left">
<input id="leftEye" type="text" placeholder="left eye" name="left_eye" />
</td>
<td id="right">
<input id="rightEye" type="text" placeholder="right eye" name="right_eye" />
</td>
</tr>
</tbody>
JS:
$('.new_customer').click(function () {
$("#hiddenRow").show();
$("#saveBtn").click((function () {
var firstval = $("#first").val(),
lastval = $("#last").val(),
dateval = $("#dateOf").val(),
addressval = $("#addres").val(),
phoneval = $("#phonenumber").val(),
emailval = $("#mail").val(),
leftval = $("#leftEye").val(),
rightval = $("#rightEye").val();
$("#firstName").text(firstval);
$("#lastName").text(lastval);
$("#date").text(dateval);
$("#address").text(addressval);
$("#phone").text(phoneval);
$("#email").text(emailval);
$("#left").text(leftval);
$("#right").text(rightval);
}));
Here is the Fiddle
I want to create new row each time I click on "new_customer" and each time save new data onclick Save. I'm just a beginner and my code is bad, I know) I will be glad any ideas. How can I do this in above method? thank you
var new_row='<tr>
<td>
<button id="saveBtn" class="btn btn-success btn-xs">save</button>
</td>
<td id="firstName">
<input id="first" type="text" placeholder="first name" name="first_name" />
</td>
<td id="lastName">
<input id="last" type="text" placeholder="last name" name="last_name" />
</td>
<td id="date">
<input id="dateOf" type="text" placeholder="date of birth" name="date_of_birth" />
</td>
<td id="address">
<input id="addres" type="text" placeholder="address" name="address" />
</td>
<td id="phone">
<input id="phonenumber" type="text" placeholder="phone" name="phone" />
</td>
<td id="email">
<input id="mail" type="text" placeholder="email" name="email" />
</td>
<td id="left">
<input id="leftEye" type="text" placeholder="left eye" name="left_eye" />
</td>
<td id="right">
<input id="rightEye" type="text" placeholder="right eye" name="right_eye" />
</td>
</tr>';
$("#hiddenRow tbody tr:last").after(new_row);
Add this code on add new row button and Write code for save data
I guess so this is an example of what you want:
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
</script>
</body>
</html>
Reference and working example
This is my html code for form
<form action="add.php" method="post">
<table style="border: 1px solid black;padding:20px;" cellspacing="1px">
</br>
</br>
<tr>
<td>Issue No:</td>
<td>
<input name="issueno" type="text" id="issueno" />
</td>
<td>Issue Date:</td>
<td>
<input name="issuedate" type="date" id="issuedate" />
</td>
</tr>
</br>
</br>
<tr></tr>
<tr>
<td>Item Code:</td>
<td>
<input name="itemcode" type="text" id="itemcode" />
</td>
<td>Description:</td>
<td>
<input name="des" type="text" style="width:250px; height:23px" id="desc" />
</td>
<td>Bal Quantity:</td>
<td>
<input name="bal" type="text" id="bal" />
</td>
</tr>
</br>
<tr>
<td>Issue Quantity:</td>
<td>
<input name="issuequ" type="text" id="issuequ" />
</td>
</tr>
</br>
<tr></tr>
<tr>
<td>Remark:</td>
<td>
<input name="remark" type="text" style="width:250px; height:23px" id="remark" />
</td>
</tr>
</br>
<tr>
<td colspan="6">
<center>
<input type="submit" value="submit">
</center>
</td>
</tr>
</table>
</form>
So I want to disable submit button if issue quantity is more than bal quantity and remain enable if issue quantity is less than bal quantity. And I am getting bal quantity on change of item code from ajax call. So how Do I do it??
<script>
/**
* the submit handler...
*/
function checkBeforeSubmit() {
// build your own condition ... :)
if(CONDITION == false) {
alert("You can not submit...");
}else {
// all is good ? so we submit the form ....
document.myForm.submit();
}
}
</script>
<form name="myForm" action="add.php" method="post">
...
<!-- i have changed the type from submit to button and add a handler to execute basic JavaScript function-->
<input type="button" value="submit" onClick="checkBeforeSubmit();">
</form>
Why not you try yo Add/remove disabled attribute to the submit button on qtty change.
This is my working code...
$('#issuequ').blur(function(){
var issueqty = $(this).val();
var bal = $('#bal').val();
if(issueqty > bal){
$('input[type="submit"]').attr('disabled','disabled');
} else if (issueqty < bal){
$('input[type="submit"]').removeAttr('disabled');
}
});
I am here disabling submit on change of issuequ otherwise remain active.