i have form when i click submit button it show all the data row by row
that all are work fine but my problem is how can i add this all value to mysql database when
click "submit_to_database" button. please can any one help me
this is my full code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="custom.css" type="text/css">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Sales</title>
<script type="text/javascript">
function add_values(){
if(document.getElementById('edit_guid').value==""){
if( document.getElementById('stk').value!="" ){
if(document.getElementById('stk').value!=0){
sell=document.getElementById('pric').value;
disc=document.getElementById('stk').value;
item=document.getElementById('guid').value;
roll=parseInt(document.getElementById('roll_no').value);
$('<tr id='+item+'><td><lable id='+item+'roll >'+roll+'</label></td><td><input type=text readonly="readonly" value='+sell+'></td><td><input type=text readonly="readonly" value='+disc+' ></td></tr>').fadeIn("slow").appendTo('#item_copy_final');
document.getElementById('stk').value="";
document.getElementById('pric').value="";
document.getElementById('roll_no').value=roll+1;
document.getElementById('guid').value="";
}
}else{
alert('Please Select An Item');
}}}
</script>
<body>
<form name="form1" method="post" id="form1" action="">
<input type="hidden" id="roll_no" value="1" >
<div align="center">
<input type="hidden" id="guid">
<input type="hidden" id="edit_guid">
<table class="form" >
<tr>
<td>price</td>
<td>stk</td>
</tr>
<tr>
<td><input type='text' class='form-control' id="pric" name="pric"></td>
<td><input type='text' class='form-control' id="stk" name="stk"></td>
<td><input type="button" onclick="add_values()" id="add_new_code" value="submit" class="round"></div></form></td></tr>
</table>
<div style="overflow:auto ;max-height:300px; ">
<table class="form" id="item_copy_final" style="margin-left:45px "></table>
</div>
</div>
<div class="mytable_row ">
<form>
<div align="center">
<table>
<td><input type="button" value="submit_to_database" class="round"></td>
</table>
</div>
</form>
</body>
</html>
Update your code -
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="custom.css" type="text/css">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Sales</title>
<script type="text/javascript">
function add_values(){
if(document.getElementById('edit_guid').value==""){
if( document.getElementById('stk').value!="" ){
if(document.getElementById('stk').value!=0){
sell=document.getElementById('pric').value;
disc=document.getElementById('stk').value;
item=document.getElementById('guid').value;
roll=parseInt(document.getElementById('roll_no').value);
$('<tr id='+item+'><td><lable id='+item+'roll >'+roll+'</label></td><td><input type=text name="price[]" readonly="readonly" value='+sell+'></td><td><input type=text name="stk[]" readonly="readonly" value='+disc+' ></td></tr>').fadeIn("slow").appendTo('#item_copy_final');
document.getElementById('stk').value="";
document.getElementById('pric').value="";
document.getElementById('roll_no').value=roll+1;
document.getElementById('guid').value="";
$("#pric").focus();
}
}
else{
alert('Please Select An Item');
}
}
}
</script>
</head>
<body>
<form name="form1" method="post" id="form1" action="">
<input type="hidden" id="roll_no" value="1" >
<div align="center">
<input type="hidden" id="guid">
<input type="hidden" id="edit_guid">
<table class="form" >
<tr><td>price</td><td>stk</td><td> </td></tr>
<tr>
<td><input type='text' class='form-control' id="pric" name="pric"></td>
<td><input type='text' class='form-control' id="stk" name="stk"></td>
<td><input type="button" onclick="add_values()" id="add_new_code" value="submit" class="round"></td>
</tr>
</table>
</div>
</form>
<div style="overflow:auto ;max-height:300px;" align="center">
<form method="post" action="test.php">
<table class="form" id="item_copy_final" style="margin-left:45px "></table>
<table>
<tr><td><input type="submit" name="submit_to_database" value="submit_to_database" class="round"></td></tr>
</table>
</form>
</div>
</body>
</html>
Write a php script page, where you post your data and add the value in mysql database.
"test.php"
<?php
mysql_connect("hostname", "database_user", "database_password") or die("Could not connect: " . mysql_error());
mysql_select_db("database_name");
if(isset($_POST["submit_to_database"])){
for($i=0; $i<count($_POST["price"]); $i++){
mysql_query("INSERT INTO `your_table` SET `your_price_field` = '".$_POST["price"][$i]."', `your_stk_field` = '".$_POST["stk"][$i]."'");
}
}
?>
Related
I want to show form value in pop up window which is open after clicking submit button. how can i show form value in pop up window after clicking submit button. My Form is below
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form name="example" action="" method="post">
<table width="257" border="1">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" value="" name="fname" id="fname" /></td>
</tr>
<tr>
<td colspan="2"><center><input type="submit" name="submit" value="Show Value" /></center></td>
</tr>
</table>
</form>
</body>
</html>
Get data using input id and set form delay for submit and read javascript and jquery basic concept on w3 school
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form name="example" action="" method="post" id="example">
<table width="257" border="1">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" value="" name="fname" id="fname" /></td>
</tr>
<tr>
<td colspan="2"><center> <input type="button" id="btnShow" value="Submit" /></center></td>
</tr>
</table>
</form>
<div id="dialog" style="display: none" align="center">
<label>Name :</label><span id="show_name"></span>
<br>
<label>Father Name :</label><span id="show_fname"></span>
</div>
</body>
</html>
<script>
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "User Details",
width: 300,
height: 150,
});
$("#btnShow").click(function (e) {
e.preventDefault();
var name=$("#name").val();
var fname=$("#fname").val();
$("#show_name").html(name);
$("#show_fname").html(fname);
$('#dialog').dialog('open');
setTimeout(function() {
$("#example").submit();
}, 3000);
});
});
</script>
at first, your button is type="submit", but if you want just show values you need set type="button", and call some function in onclick attribute, what will show your values,like that:
button
<input type="button" name="button" value="Show Value" onclick="myFunction()"/>
and you need add js script for show values:
function myFunction(){
var name = document.getElementById("name").value;
var fname = document.getElementById("fname").value;
alert(name+' '+fname)
}
i have form it display value in same page after click submit button,it's all work fine
but i need to get grand total value when i click the submit button every time.
please can any one help me
here is my full code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="custom.css" type="text/css">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Sales</title>
<script type="text/javascript">
$(document).ready(function() {
$("#stk").change(function(){
document.getElementById('total').value=document.getElementById('pric').value * document.getElementById('stk').value;
});
});
function add_values(){
if(document.getElementById('edit_guid').value==""){
if( document.getElementById('stk').value!="" && document.getElementById('total').value!="" ){
if(document.getElementById('stk').value!=0){
sell=document.getElementById('pric').value;
disc=document.getElementById('stk').value;
total=document.getElementById('total').value;
item=document.getElementById('guid').value;
roll=parseInt(document.getElementById('roll_no').value);
$('<tr id='+item+'><td><lable id='+item+'roll >'+roll+'</label></td><td><input type=text readonly="readonly" value='+sell+'></td><td><input type=text readonly="readonly" value='+disc+' ></td><td><input type=text readonly="readonly" value='+total+'> </td></tr>').fadeIn("slow").appendTo('#item_copy_final');
document.getElementById('stk').value="";
document.getElementById('pric').value="";
document.getElementById('roll_no').value=roll+1;
document.getElementById('total').value="";
document.getElementById('guid').value="";
}
}else{
alert('Please Select An Item');
}
}
}
</script>
<body>
<form name="form1" method="post" id="form1" action="">
<input type="hidden" id="roll_no" value="1" >
<div align="center">
<input type="hidden" id="guid">
<input type="hidden" id="edit_guid">
<table class="form" >
<tr>
<td>price</td>
<td></td>
<td>stk</td>
<td>totall</td>
</tr>
<tr>
<td>
<td><input type='text' class='form-control' id="pric" name="pric"></td>
<td><input type='text' class='form-control' id="stk" name="stk"></td>
<td><input type='text' class='form-control' id="total" name="total1"></td>
<td><input type="button" onclick="add_values()" id="add_new_code" value="submit" class="round"></div></form></td></tr>
</table>
<div style="overflow:auto ;max-height:300px; ">
<table class="form" id="item_copy_final" style="margin-left:45px ">
</table>
</div>
</div>
<div class="mytable_row ">
<form>
<div align="center">
<table>
<td>grand totall</td>
<td><input type="text" id="grand_tot" name="grand_tot"></td>
</table>
</div>
</form>
</body>
</html>
Finally i got the answer this may help to some one.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="custom.css" type="text/css">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Sales</title>
<script type="text/javascript">
$(document).ready(function() {
//$("#stk").change(function(){
//document.getElementById('total').value=document.getElementById('pric').value * document.getElementById('stk').value;
//});
$("#pric,#stk").keyup(function () {
$('#total').val($('#pric').val() * $('#stk').val());
});
});
function add_values(){
if(document.getElementById('edit_guid').value==""){
if( document.getElementById('stk').value!="" && document.getElementById('total').value!="" ){
if(document.getElementById('stk').value!=0){
sell=document.getElementById('pric').value;
disc=document.getElementById('stk').value;
total=document.getElementById('total').value;
item=document.getElementById('guid').value;
//item=document.getElementById('guid').value;
roll=parseInt(document.getElementById('roll_no').value);
$('<tr id='+item+'><td><lable id='+item+'roll >'+roll+'</label></td><td><input type=text readonly="readonly" value='+sell+'></td><td><input type=text readonly="readonly" value='+disc+' ></td><td><input type=text readonly="readonly" class="submited-total" value='+total+'> </td></tr>').fadeIn("slow").appendTo('#item_copy_final');
document.getElementById('stk').value="";
document.getElementById('pric').value="";
document.getElementById('roll_no').value=roll+1;
document.getElementById('total').value="";
//document.getElementById('roll_no').value="";
document.getElementById('guid').value="";
submitedTotal = 0;
$('.submited-total').each(function(){
submitedTotal = this.value;
});
if(document.getElementById('grand_tot').value==""){
document.getElementById('grand_tot').value=submitedTotal;
}else{
submitedTotal =parseFloat(document.getElementById('grand_tot').value)+ parseFloat(submitedTotal);
}
$('#grand_tot').val(submitedTotal);
}
}else{
alert('Please Select An Item');
}
}
}
</script>
<body>
<form name="form1" method="post" id="form1" action="">
<input type="hidden" id="roll_no" value="1" >
<div align="center">
<input type="hidden" id="guid">
<input type="hidden" id="edit_guid">
<table class="form" >
<tr>
<td>price</td>
<td></td>
<td>stk</td>
<td>totall</td>
</tr>
<tr>
<td>
<td><input type='text' class='form-control' id="pric" name="pric"></td>
<td><input type='text' class='form-control' id="stk" name="stk"></td>
<td><input type='text' class='form-control' id="total" name="total1"></td>
<td><input type="button" onclick="add_values()" id="add_new_code" value="submit" class="round"></div></form></td></tr>
</table>
<div style="overflow:auto ;max-height:300px; ">
<table class="form" id="item_copy_final" style="margin-left:45px ">
</table>
</div>
</div>
<div class="mytable_row ">
<form>
<div align="center">
<table>
<td>grand totall</td>
<td><input type="text" id="grand_tot" name="grand_tot"></td>
</table>
</div>
</form>
</body>
</html>
I try But , Its Take The Current Text Value In GrandTotal and Overright it ....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="custom.css" type="text/css">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Sales</title>
<script type="text/javascript">
$(document).ready(function() {
$("#stk").change(function(){
document.getElementById('total').value=document.getElementById('pric').value * document.getElementById('stk').value;
});
});
function add_values(){
if(document.getElementById('edit_guid').value==""){
if( document.getElementById('stk').value!="" && document.getElementById('total').value!="" ){
if(document.getElementById('stk').value!=0){
var current_TOTAL = document.getElementById('total').value=document.getElementById('pric').value * document.getElementById('stk').value;
var sell=document.getElementById('pric').value;
var disc=document.getElementById('stk').value;
var total=document.getElementById('total').value;
var item=document.getElementById('guid').value;
var grand_total =document.getElementById('grand_tot').value;
var full_total = 0;
full_total = 0;
var full_total = document.getElementById('total').value;
roll=parseInt(document.getElementById('roll_no').value);
$('<tr id='+item+'><td><lable id='+item+'roll >'+roll+'</label></td><td><input type=text readonly="readonly" value='+sell+'></td><td><input type=text readonly="readonly" value='+disc+' ></td><td><input type=text readonly="readonly" value='+total+'> </td></tr>').fadeIn("slow").appendTo('#item_copy_final');
document.getElementById('stk').value="";
document.getElementById('pric').value="";
document.getElementById('roll_no').value=roll+1;
document.getElementById('total').value="";
document.getElementById('guid').value="";
document.getElementById('grand_tot').value=full_total;
}
}else{
alert('Please Select An Item');
}
}
}
</script>
<body>
<form name="form1" method="post" id="form1" action="">
<input type="hidden" id="roll_no" value="1" >
<div align="center">
<input type="hidden" id="guid">
<input type="hidden" id="edit_guid">
<table class="form" >
<tr>
<td>price</td>
<td></td>
<td>stk</td>
<td>totall</td>
</tr>
<tr>
<td>
<td><input type='text' class='form-control' id="pric" name="pric"></td>
<td><input type='text' class='form-control' id="stk" name="stk"></td>
<td><input type='text' class='form-control' id="total" name="total1"></td>
<td><input type="button" onclick="add_values()" id="add_new_code" value="submit" class="round"></div></form></td></tr>
</table>
<div style="overflow:auto ;max-height:300px; ">
<table class="form" id="item_copy_final" style="margin-left:45px ">
</table>
</div>
</div>
<div class="mytable_row ">
<form>
<div align="center">
<table>
<td>grand totall</td>
<td><input type="text" id="grand_tot" name="grand_tot"></td>
</table>
</div>
</form>
</body>
</html>
I'm trying to submit a form, and after pressing the submit button I want the 2nd form to show up while still holding values (I have this part worked out). I was told to use the isset function but i'm unable to get it working. The code works fine (I haven't copied the php stuff in).
<!DOCTYPE html>
<html>
<head>
<title>Prac 2 Task 12</title>
</head>
<body>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>" id="custinfo" >
<table>
<tr>
<td><label for="customerid">Customer ID (integer value): </label></td>
<td>
<input
type="text"
id="customerid"
name="customerid"
size="10"
value="<?php
echo isset($_POST['customerid'])
? htmlspecialchars($_POST['customerid'])
: ''; ?>"
/>
<?php echo $customerIDError ?>
</td>
<td style="color:red"></td>
</tr>
</table>
<p>
<input type="submit" name = "submit" value="Save Data"/>
<input type="reset" value="Reset Form" />
</p>
</form>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>" id="custinfo" >
<table>
<tr>
<td><label for="username">Username: </label></td>
<td>
<input
type="text"
id="username"
name="username"
size="10"
value="<?php
echo isset($_POST['username'])
? htmlspecialchars($_POST['customerid'])
: ''; ?>"
/>
<?php echo $customerIDError ?></td>
<td style="color:red"></td>
</tr>
</table>
<p>
<input type="submit" name = "submit" value="Save Data"/>
<input type="reset" value="Reset Form" />
</p>
</form>
</body>
</html>
you can use jquery for that first you can define
$("#submit").click(function(){
$("#custinfo1").show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Prac 2 Task 12</title>
</head>
<body>
<form method="post" action="<?php echo $_SERVER[PHP_SELF]; ?> " id="custinfo">
<table>
<tr>
<td>
<label for="customerid">Customer ID (integer value):</label>
</td>
<td>
<input type="text" id="customerid" name="customerid" size="10" value="" />
<?php echo $customerIDError ?>
</td>
<td style="color:red"></td>
</table>
<p>
<input type="submit" name="submit" value="Save Data" id="submit" />
<input type="reset" value="Reset Form" />
</p>
</tr>
</form>
<form method="post" action="<?php echo $_SERVER[PHP_SELF];?>" id="custinfo1" style="display:none">
<table>
<tr>
<td>
<label for="username">Username:</label>
</td>
<td>
<input type="text" id="username" name="username" size="10" value="" />
<?php echo $customerIDError ?>
</td>
<td style="color:red"></td>
</table>
<p>
<input type="submit" name="submit" value="Save Data" />
<input type="reset" value="Reset Form" />
</p>
</tr>
</form>
</body>
</html>
check this code
I rectified your code, just run it
<!DOCTYPE html>
<html>
<head>
<title>Prac 2 Task 12</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
#form2{display: none;}
</style>
</head>
<body>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>" id="form1" >
<table>
<tr>
<td><label for="customerid">Customer ID (integer value): </label></td>
<td><input type="text" id="customerid" name="customerid" size="10" value = "<?php echo isset($_POST['customerid']) ? htmlspecialchars($_POST['customerid']):''; ?>" /><?php echo $customerIDError ?></td>
<td style="color:red"></td>
</table>
<p><input type="submit" id="form1submitbtn" name = "submit" value="Save Data"/> <input type="reset" value="Reset Form" /></p>
</tr>
</form>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>" id="form2" >
<table>
<tr>
<td><label for="username">Username: </label></td>
<td><input type="text" id="username" name="username" size="10" value = "<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['customerid']):''; ?>" /><?php echo $customerIDError ?></td>
<td style="color:red"></td>
</table>
<p><input type="submit" name = "submit" value="Save Data"/> <input type="reset" value="Reset Form" /></p>
</tr>
</form>
<script>
$(document).ready(function(){
$("form1submitbtn").click(function(){
$("#form2").show();
});
});
</script>
</body>
</html>
I am using jQuery for creating multiple text fields on button click. It is working fine. Now I need to validate all test boxes.
This is my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Patient Portal</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<![endif]-->
<!--[if !IE]> -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- <![endif]-->
<script type="text/javascript" language="javascript" src="js/scripts.js"></script>
<script type="text/javascript" language="javascript" src="js/basicnifo.js"></script>
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/datepicker2.js"></script>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="m5">
<tr>
<td valign="top" class="m4">
<form action="#" method="post" name="reg" id="reg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="m12">
<table width="100%" border="0" cellspacing="1" cellpadding="2" id="items">
<thead>
<tr>
<td colspan="7" align="center" bgcolor="#62a3e0" style="width:15%;"><strong>Problem List</strong></td>
</tr>
<tr>
<td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Problem</strong></td>
<td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Status</strong></td>
<td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Active Date</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" tabindex="1" name="Problem1" id="Problem1" class="m16 autocomplete" value="" /></td>
<td bgcolor="#F5F5F5" style="width:15%;"><select name="Status1" id="Status1" class="drop2" tabindex="1" >
<option value="1" selected="selected">active</option>
<option value="2">in-active</option>
</select></td>
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Date1" id="Date1" class="m16 datepick" tabindex="1" value=""/></td>
<input type="hidden" name="patientProblemsid1" id="patientProblemsid1" class="m16" value="0"/>
<input type="hidden" name="sSaved" id="sSaved" value="null" class="m10" />
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">
<input type="button" name="update" id="update" value="ADD ROW" tabindex="10" class="bt-press add_more" onmouseover="changeBgImage('images/button-bg2.png', 'update')" onmouseout="changeBgImage('images/button-bg.png', 'update')" /></td>
</tr>
<tr>
<td colspan="5" align="right">
<input type="submit" name="button" id="SAVE" value="SAVE" class="bt-press" tabindex="50" onmouseover="changeBgImage('images/button-bg2.png', 'SAVE')" onmouseout="changeBgImage('images/button-bg.png', 'SAVE')" />
<input type="submit" name="button" id="NEXT" value="NEXT" class="bt-press" tabindex="51" onmouseover="changeBgImage('images/button-bg2.png', 'NEXT')" onmouseout="changeBgImage('images/button-bg.png', 'NEXT')" /></td>
</tr>
</tfoot>
<input type="hidden" name="item_count" id="item_count" value="1" />
<input type="hidden" name="page" value="patienthistory" class="m10" />
<input type="hidden" name="Cliinicid" value="" class="m10" />
</table>
</div></td>
</tr>
</table>
</form>
<div class="m7"> <br />
</div>
</td>
</tr>
</table>
</body>
</html>
And this is my JavaScript part for adding text boxes on button click:
<script>
$(".add_more").click(function(event){
event.preventDefault();
var count = $("#item_count").val();
count = parseInt(count);
//alert(count);
var new_count = count +1;
// alert(new_count);
// $(".delete_link").remove();
var html = '<tr>\
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Problem'+new_count+'" id="Problem'+new_count+'" tabindex="11" class="m16 autocomplete" value="" /></td> \
<td width="15%" bgcolor="#F5F5F5" style="width:15%;"><select name="Status'+new_count+'"id="Status'+new_count+'" tabindex="11" class="drop2 ">\
<option value="1" selected="selected"> active</option><option value="2">inactive</option>\
</select></td> \
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Date'+new_count+'" id="Date'+new_count+'" tabindex="11" class="m16 datepicker" value="" /></td> \
</tr>';
var $html = $(html);
var $ht = $html.find('input.datepicker')[0];
$($ht).datepicker({dateFormat:"mm-dd-yy"});
$('#items > tbody:last').append($html);
$("#item_count").val(new_count);
});
</script>
I need to validate all text boxes. Thanks in advance.
.validate() Will help you to validate your form elements with use of ID or class of a form.
You please follow the following URL to get validation for your script:
http://jqueryvalidation.org/validate/
In your validation script validate each input type text field using same class name like.
$("#SAVE").click(function(){ $(".m16").each(function(){
var values=this.value;
if(values.length<1)
{
alert("Text box empty");
}
});
});
I've a table named 'pedidos' and a table named 'locais'. For each 'pedidos' there can be several 'locais'. So I'm using this form
In the right column I want the user to type the data for each 'locais' which includes an image file. Then when the user clicks on 'Acrescentar Local' the table on the left is being filled. But instead off adding the image as well it loses the file.
I'm using the code:
<link rel="stylesheet" type="text/css" media="screen" href= "redmond/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css" />
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script src="grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.src.js" type="text/javascript"></script>
<title>Untitled Document</title>
</head>
<body>
<script language="javascript">
var a=0;
var clone = [];
function addLoc()
{
/* var tmp = jQuery('#foto').clone();
clone.push(tmp[0]);*/
/*document.getElementById('loc_table').innerHTML+="<tr><td>"+document.getElementById('local').value+"</td><td>"+document.getElementById('comp').value+"</td><td>"+document.getElementById('larg').value+"</td><td>"+clone[a]+"</td></tr>";*/
document.getElementById('loc_table').innerHTML+="<tr><td>"+document.getElementById('local').value+"</td><td>"+document.getElementById('comp').value+"</td><td>"+document.getElementById('larg').value+"</td><td><input type='file' id='foto"+a+"'/></td></tr>";
document.getElementById('foto'+a)=document.getElementById('foto');
a++;
/*
"+document.getElementById('foto').value+"</td></tr>";
*/
}
</script>
<table>
<tr>
<td>
<form id='addPed' name='addPed' action='#' method='POST'>
<table>
<tr>
<td><label for="nome">nome</label></td>
<td><input type="text" id="nome" /></td></tr><tr>
<td><label for="desc">descricao</label></td>
<td><input type="text" id="desc" /></td></tr><tr>
<td><label for="datai">data de insercao</label></td>
<td><input type="text" id="datai" /></td></tr><tr>
<td><label for="datae">data de entrega</label></td>
<td><input type="text" id="date" /></td></tr><tr>
<td></td>
<td><input type="button" value="Adicionar pedido"/></td></tr>
</table>
<br/>
LOCAIS:
<br/>
<br/>
<table id="loc_table">
<tr>
<td class="tableheader">local</td>
<td class="tableheader">comprimento</td>
<td class="tableheader">largura</td>
<td class="tableheader">foto</td>
</tr>
</table>
<!-- </form> -->
</td>
<td>
<!-- <form id='addLoc' name='addPed' action='#' method='POST'> -->
<table>
<tr>
<td><label for="local">local</label></td>
<td><input type="text" id="local" /></td></tr><tr>
<td><label for="comp">comprimento</label></td>
<td><input type="text" id="comp" /></td></tr><tr>
<td><label for="larg">largura</label></td>
<td><input type="text" id="larg" /></td></tr><tr>
<td><label for="foto">foto</label></td>
<td><input type="file" id="foto" /></td></tr><tr>
<td></td>
<td><input type="button" value="Acrescentar Local" onclick="addLoc()"/></td></tr>
</table>
</form>
</td>
</tr>
</table>
Can Anyone sugest me a solution please!
Thanks