I am struggling with a submit button where nothing happens when clicked. I believe the problem is no editvalidation() is being triggered but I am not sure. If this is the case, how can it be triggered? I want the the validation to be displayed above the submit button it self. My question is simply how to get the submit button doing something?
I am getting no errors:
CODE:
<script type="text/javascript">
function editvalidation()
{
if ($("#coursesDrop").val()==""){
$("#courseAlert").html("Please Select a Course from the Course Drop Down Menu");
}
if ($("#coursesDrop").val()!="" && $("#courseadd").children().length==0){
$("#courseAlert").html("You have not Selected any Students you wish to Add into Course");
}
if ($("#coursesDrop").val()!="" && $("#courseadd").children().length!=0){
return true;
}
return false;
}
</script>
<div id='lt-container'>
<form action='addstudentcourse.php' method='post' id='courseForm'>
<p id='warnings'></p>
<p><strong>Courses:</strong> <select name="course" id="coursesDrop">
<option value="">Please Select</option>
<option value='19'>BIO234 - Biology</option>
<option value='1'>INFO101 - Bsc Information Communication Technology</option>
<option value='2'>INFO102 - Bsc Computing</option>
</select> </p>
</form>
<form id='updateForm'>
<p><strong>Course Chosen:</strong></p>
<table>
<tr>
<th></th>
<td><input type='hidden' id='currentCourseId' name='CourseIdcurrent' value='' /> </td>
</tr>
<tr>
<th>Course ID:</th>
<td><input type='text' id='currentCourse' name='Coursecurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Course Name:</th>
<td><input type='text' id='currentCourseName' name='CourseNamecurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Duration (Years):</th>
<td><input type='text' id='currentDuration' name='Durationcurrent' readonly='readonly' value=''/> </td>
</tr>
</table>
</form>
<form id='studentExistForm'>
<p><strong>Current Students in Chosen Course:</strong></p>
<p><select name="studenttextarea" id="studentselect" size="10"></select></p>
</form>
</div>
<div id='rt-container'>
<form id='studentRemainForm'>
<p><strong>Available Students to Enrol:</strong></p>
<p><select multiple="multiple" name="remaintextarea" id="studentremain" size="10"></select></p>
<table id='addtbl'>
<tr>
</table>
</form>
<form id='studentAddForm'>
<p><strong>Students to Add to Course:</strong></p>
<p><select multiple="multiple" name="addtextarea" id="studentadd" size="10"></select></p>
<table id='removetbl'>
<tr>
</table>
<div id='studentAlert'></div>
</form>
<p><button id='submitstudents'>Submit Students</button></p>
</div>
<script type="text/javascript">
function showConfirm(){
var courseNoInput = document.getElementById('currentCourse').value;
var courseNameInput = document.getElementById('currentCourseName').value;
if (editvalidation()) {
var confirmMsg=confirm("Are you sure you want to add your selected Students to this Course:" + "\n" + "Course: " + courseNoInput + " - " + courseNameInput);
if (confirmMsg==true)
{
submitform();
}
}
}
$('body').on('click', '#submitstudents', showConfirm);
</script>
I formatted your code and fixed it so that submit button is working.
Also I added alerts on beginning of every function so that you can see that they are called.
You need to correct other code also if you want your script to fully works.
Link to working example: http://simplestudio.rs/yard/submit_button/form.html
Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#submitstudents").click(function() {
showConfirm();
});
});
function showConfirm() {
alert("function showConfirm is called");
var courseNoInput = document.getElementById('currentCourse').value;
var courseNameInput = document.getElementById('currentCourseName').value;
if (editvalidation()) {
var confirmMsg=confirm("Are you sure you want to add your selected Students to this Course:" + "\n" + "Course: " + courseNoInput + " - " + courseNameInput);
if (confirmMsg==true) {
submitform();
}
}
}
function editvalidation() {
alert("function editvalidation is called");
if ($("#coursesDrop").val()==""){
$("#courseAlert").html("Please Select a Course from the Course Drop Down Menu");
}
if ($("#coursesDrop").val()!="" && $("#courseadd").children().length==0){
$("#courseAlert").html("You have not Selected any Students you wish to Add into Course");
}
if ($("#coursesDrop").val()!="" && $("#courseadd").children().length!=0){
return true;
}
return false;
}
</script>
<style>
span {
cursor: pointer;
position: absolute;
}
#divtoshow {
position: absolute;
display: none;
}
</style>
</head>
<body>
<div id='lt-container'>
<form action='addstudentcourse.php' method='post' id='courseForm'>
<p id='warnings'></p>
<p>
<strong>Courses:</strong>
<select name="course" id="coursesDrop">
<option value="">Please Select</option>
<option value='19'>BIO234 - Biology</option>
<option value='1'>INFO101 - Bsc Information Communication Technology</option>
<option value='2'>INFO102 - Bsc Computing</option>
</select>
</p>
</form>
<form id='updateForm'>
<p>
<strong>Course Chosen:</strong>
</p>
<table>
<tr>
<th></th>
<td>
<input type='hidden' id='currentCourseId' name='CourseIdcurrent' value='' />
</td>
</tr>
<tr>
<th>
Course ID:
</th>
<td>
<input type='text' id='currentCourse' name='Coursecurrent' readonly='readonly' value='' />
</td>
</tr>
<tr>
<th>
Course Name:
</th>
<td>
<input type='text' id='currentCourseName' name='CourseNamecurrent' readonly='readonly' value='' />
</td>
</tr>
<tr>
<th>
Duration (Years):
</th>
<td>
<input type='text' id='currentDuration' name='Durationcurrent' readonly='readonly' value=''/>
</td>
</tr>
</table>
</form>
<form id='studentExistForm'>
<p>
<strong>Current Students in Chosen Course:</strong>
</p>
<p>
<select name="studenttextarea" id="studentselect" size="10"></select>
</p>
</form>
</div>
<div id='rt-container'>
<form id='studentRemainForm'>
<p>
<strong>Available Students to Enrol:</strong>
</p>
<p>
<select multiple="multiple" name="remaintextarea" id="studentremain" size="10"></select>
</p>
<table id='addtbl'>
<tr>
</table>
</form>
<form id='studentAddForm'>
<p>
<strong>Students to Add to Course:</strong></p>
</p>
<p>
<select multiple="multiple" name="addtextarea" id="studentadd" size="10"></select>
</p>
<table id='removetbl'>
<tr>
</table>
<div id='studentAlert'></div>
</form>
<p>
<button id='submitstudents'>Submit Students</button>
</p>
</div>
</body>
</html>
if (editvalidation() === true) {
//your code
}
compare function true or false like this ..
$( '#studentAddForm' ).submit();
better submit the form like this..
Script starts running in Google Chrome with jquery 1.8.1. One Problem is, that an element with the id courseAlert is not defined.
Related
when i click on dropdown then select multiple after that i have show same table repeatedly, But i want to show that table with different colors.I have append a table on click function, but i want to stop append when i click fourth time on button and also change the color of table at that time
I am new in coding..please help me!
<script>
function yesnoCheck(that) {
if (that.value == "single") {
document.getElementById("first").style.display = "block";
$("#dynamic-forms").empty();
document.getElementById("dynamic-forms").style.display = "none";
document.getElementById("t1").value = "";
$("#dynamic-forms").empty();
document.getElementById("t2").value = "";
$("#dynamic-forms").empty();
document.getElementById("t3").value = "";
$("#dynamic-forms").empty();
document.getElementById("t4").value = "";
$("#dynamic-forms").empty();
document.getElementById("t5").value = "";
$("#dynamic-forms").empty();
document.getElementById("t6").value = "";
$("#dynamic-forms").empty();
document.getElementById("formButton").value = "";
// document.getElementById("form1").value = "clear";
// this.removeparent(form.firstElementChild);
}
else {
document.getElementById("first").style.display = "none";
}
if (that.value == "multiple") {
document.getElementById("second").style.display = "block";
}
else {
document.getElementById("second").style.display = "none";
}
}
// $(document).ready(function () {
$(document).on("click","#tbl1",function (click) {
click.preventDefault();
this.parentElement.remove();
})
$(document).ready(function () {
$("#formButton").click(function () {
// document.form1.style.backgroundColor = 'salmon';
// event.target.style.backgroundColor = 'salmon';
// form1.style.backgroundColor = 'coral';
document.getElementById("dynamic-forms").style.display = "block";
// form1.style.backgroundColor = 'coral';
$("#dynamic-forms").append(
`
<form id="form1" style="margin-bottom:10px;margin-top:10px">
<button style="float:right; margin-right:400px;" type="button1" id="tbl1" value="clear">-</button>
<table style="background-color: #91c8e3;">
<tr>
<td id="location">Location
<input type="text" value="`+$("#pan").val()+`">
</td>
<td>P1
<input type="text">
</td>
</tr>
<tr>
<td>P2
<input type="text">
</td>
<td>P3
<input type="text">
</td>
</tr>
<tr>
<td>Sometime
<input type="text">
</td>
<td>Full day
<input type="text">
</td>
</tr>
</table>
</form>
`
)
$("#pan").val("");
});
});
jQuery(function ($) {
function copyForms($pan, $location) {
$(':input[name]', $location).val(function () {
return $(':input[name=' + this.name + ']', $pan).val();
});
}
$('#pan').on('click', function () {
copyForms($('#pan'), $('#location'));
});
});
</script>
</head>
<body style="background-color: #0979ad; ">
<br><br>
<center>
<div>
<select id="selector" onchange="yesnoCheck(this);">
<option value="select">__Select__</option>
<option value="single">Single</option>
<option value="multiple">Multiple</option>
</select>
</div>
</center>
<br><br>
<center>
<div id="first" style="display: none;">
<table id="tbl" style="background-color: #225670ad;">
<tr>
<td>Location
<input id="t1" type="text">
</td>
<td>P1
<input id="t2" type="text">
</td>
</tr>
<tr>
<td>P2
<input id="t3" type="text">
</td>
<td>P3
<input id="t4" type="text">
</td>
</tr>
<tr>
<td>Sometime
<input id="t5" type="text">
</td>
<td>Full day
<input id="t6" type="text">
</td>
</tr>
</table>
</div>
</center>
<center>
<div id="second" style="display:none;">
<label>Location</label>
<input type="text" id="pan" name="pan">
<button type="button" id="formButton">+</button>// when click on this button
</div>
</center>
<br><br><br>
<center id="dynamic-forms">
</center> <br><br>
</body>
</html>
Hello,I am new in coding and this is my code i want to change my table color repeatedly on click function
when i click on dropdown then select multiple after that i have show same table repeatedly, But i want to show that table with different colors.
check this resssources:
How do you get random RGB in Javascript?
https://sebhastian.com/jquery-change-background-color/
i have two form and a validate button, i want form1 to display and form2 to hide, and when i click on validate button i want form1 to hide and form2 to display and for the date i want to display date now.
also the values of form1 display in form2 each by its place.
also the values of form1 display in form2 each by its place.
form1
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-------------------------------->
<div id="form1">
<label for="titre">DAY pointage</label>
<input type="date" name="datep" class="form-control">
<br>
<label for="titre">Chantier</label>
<select class="form-control" id="chantier_id">
<option selected disabled>Select Location</option>
<option value="1">azilal</option>
<option value="2">asfalou</option>
<option value="3">ihjamn</option>
</select>
<br>
<label for="titre">Ouvrage</label>
<select class="form-control" id="ouvrage_id">
<option value="0" selected disabled>- Select -</option>
<option value="1">assinissement</option>
<option value="2">installation</option>
</select>
<br>
<label for="titre">default nbre day</label>
<input type="text" name="nbre" class="form-control" value="1">
<br>
<button class="btn btn-theme " type="submit" >valider</button>
<br>
<br>
</div>
form2
<div id="form2">
<br>
<div>Day : dayPointage , Chantier : chantierSelected , Ouvrage : ouvrageSelected</div>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>nom prenom</th>
<th>cin</th>
<th>matricule</th>
<th>default nbre day</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td><input type="checkbox" class="checkbox" name="customer_id[]" value="1" /></td>
<td>MARZOUK NAJIB</td>
<td>Pa130191</td>
<td>2925019599</td>
<td value="1"><input type="text" name="nbre" class="form-control" value="default nbre day"></td>
</tr>
<tr id="2">
<td><input type="checkbox" class="checkbox" name="customer_id[]" value="2" /></td>
<td>achraf bourki</td>
<td>pa5000</td>
<td>202020</td>
<td value="2"><input type="text" name="nbre" class="form-control" value="default nbre day"></td>
</tr>
</tbody>
</table>
</div>
jQuery
$(document).ready(function () {
$('#check_all').on('click', function(e) {
if($(this).is(':checked',true))
{
$(".checkbox").prop('checked', true);
} else {
$(".checkbox").prop('checked',false);
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#check_all').prop('checked',true);
}else{
$('#check_all').prop('checked',false);
}
});
});
$('#form2 [name=nbre]').val($('#form1 [name=nbre]').val())
And same for each input
Hope you all are fine . I have a problem my javascript function is not being called i dont know why
I am very confused why the function is not calling I used this same flow in my another form too that was also working fine but here Its a mess
Kinldy have a look on code and help me
Thanks
javascript:
function checkPriceValidation(){
var flight=document.getElementById('flightno').value;
var type=document.getElementById('type').value;
var price=document.getElementById('price').value;
if(flight==="volvo"){
alert("Please select flight number !!");
return false;
}
else if(type==="default"){
alert("Please select type!!");
return false;
}
else if(price===""){
alert("Please select the price !!");
return false;
}
return false;
}
html :
<form
class=""
method="post"
onsubmit="return javascript:checkPriceValidation();"
action="<%=response.encodeURL(request.getContextPath()+"/FillList")%>"
>
<div style="color:red;font-size:18px ">${error}</div>
<% session.setAttribute("error", "");%>
<table>
<tr>
<td>
<div class="form-control" style="width: auto">
<select style="color: black" name="flightno" >
<option value="volvo">Select Flight</option>
<%
ArrayList<FlightClass> list;
list = (ArrayList<FlightClass>) request.getSession().getAttribute("list");
for (FlightClass post : list) {
%>
<option><%=post.getID()%></option>
<% } %>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-control" style="width: auto">
<select style="color: black" name="type">
<option value="default">Select Type</option>
<option>Economy</option>
<option>Business</option>
<option>First Class</option>
</select>
</div>
</td>
<td>
<input
type="number"
min="0"
step="1"
class="form-control"
name="price"
id="price"
placeholder="Price"
/>
</td>
</tr>
</table>
<br/>
<button input-type="submit" value="Submit" class="btn btn-lg btn-primary" >SET</button>
</form>
In your onsubmit attribute, you should just use return checkPriceValidation(). Try out the code below and see the difference
function submitThis(){
alert('Hi there');
return false;
}
<form onsubmit="return javascript:submitThis()">
<button>This form will be submitted</button>
</form>
<form onsubmit="return submitThis()">
<button>This form will not be submitted</button>
</form>
I am trying to hide div normally but show as user click on drop downlist
but not working jquery
<div class="form-group">
<label>Select Course</label>
<select name="timepass" class="custom-select">
<option>Select</option>
<option id="cour">Php Developer</option>
<option>Asp.Net</option>
<option>Python</option>
</select>
</div>
<div class="mj_tabcontent mj_bottompadder80" id="std-list">
<table class="table table-striped">
<tr>
<td>
<h4>Mudassir Abbas</h4>
</td>
</td>
<td>
<div class="col-xs-2">
<input type="text" placeholder="Grade" class="grade">
</div>
</td>
</tr>
<td>
<h4>Ziab u Nisa</h4>
</td>
<td>
<div class="col-xs-2">
<input type="text" placeholder="Grade" class="grade">
</div>
</td>
</tr>
</tr>
<td>
<h4>Raja M.Waleed</h4>
</td>
<td>
<div class="col-xs-2">
<input type="text" placeholder="Grade" class="grade">
</div>
</td>
</tr>
</table>
</div>
java script code is
<script>
$($document).ready(function(){
$("#std-list").hide();
$("#cour").click( function(){
$("#std-list").show();
});
});
</script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<p>If you click on the "Hide" button,<br> I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
Below code as per my understanding. Please check, i hope it's help you..
$(document).ready(function(){
$('.custom-select').change(function(){
if($(".custom-select option:selected").index() == 1){
$('#std-list').show();
}else{
$('#std-list').hide();
}
});
});
Currently I have a functioning code for dynamically adding and removing form inputs on my page. I have multiple forms that I need to include on the page, so I made an event action where they could press a button and it would hide all the forms except the relevant one. This worked fine, but it created a conflict with my jQuery/javascript code because the code uses a class name to dynamically add or remove input fields. Both forms would have to be under the same class name for me to use the jQuery function as is, but that creates conflict and the function stops working. I could just write two versions of the function (one for each class), but I'm trying to find a way to generalize this, so that I don't have to have so many functions. I was thinking about doing something like this:
$('.ccinput').addClass('dinput').removeClass('ccinput');
where I would change each form's class name accordingly, so that they would be the only ones communicating with the jQuery function. This method seems to be very error prone, especially with more than 2 forms (I plan on having 4 forms total). Do you guys know of another way that I can accomplish this? Here is my html code for reference:
EDIT: I've made significant changes to the code, so here is the new version. I removed all the ID values from the form inputs and changed the jQuery function so that it does not use ID values as selectors. This removed some conflicts. And I'm now trying to use attr('class','newclass') so that the jQuery function works for both codes. It seems to work perfectly for the first form, but it refuses to function for the second. I have no idea why.
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table1").hide();
$("#table2").hide();
$("#cc_button").click(function(){
$("#table1").show();
$("#table2").hide();
$("#cctable tr").attr('class', 'dinput');
$("#dbtable tr").attr('class', 'dbinput');
});
$("#db_button").click(function(){
$("#table2").show();
$("#table1").hide();
$("#dbtable tr").attr('class', 'dinput');
$("#cctable tr").attr('class', 'ccinput');
});
$('#btnAdd').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('.dinput:last').clone();
// insert the new element after the last "duplicatable" input field
$('.dinput:last').after(newElem);
$(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );
// enable the "remove" button
$('#btnDel').attr('disabled','');
$(".date").mask("99/99/9999");
// business rule: you can only add 20 names
if (newNum == 20)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
$('.dinput:last').remove(); // remove the last element
// enable the "add" button
$('#btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$(".date").mask("99/99/9999");
});
</script>
</head>
<body>
<div id="tablebuttons">
<button type="button" id="cc_button">CC</button> <button type="button" id="db_button">DB</button>
</div>
<div id="table1">
<form id="ccards" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th># (last four digits)</th>
<th>Amount</th>
<th>Approval</th>
<th>Date Received</th>
</tr>
<tbody id ="cctable" >
<tr class="ccinput">
<td> 1 </td>
<td> <input type="text" name="cc_num[]" maxlength="4" /> </td>
<td> <input type="int" name="cc_amnt[]" /> </td>
<td> <input type="text" name="cc_app[]" maxlength="10" /> </td>
<td> <input class="date" type="text" name="cc_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" id="btnAdd" value="Add CC" />
<input type="button" id="btnDel" value="Remove CC" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="table2">
<form id="db" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th>DB #</th>
<th>Amount</th>
<th>Date</th>
</tr>
<tbody id="dbtable">
<tr class="dbinput">
<td> 1 </td>
<td> <input type="text" name="db_num[]" /> </td>
<td> <input type="int" name="db_amnt[]" /> </td>
<td> <input class="date" type="text" name="db_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" id="btnAdd" value="Add DB" />
<input type="button" id="btnDel" value="Remove DB" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
</body>
</html>
Okay, I solved it. There were multiple issues with my selectors that I had to fix, but after that the following solution works perfectly:
$("#cc_button").click(function(){
$("#table1").show();
$("#table2").hide();
$("#cctable tr").attr('class', 'dinput');
$("#dbtable tr").attr('class', 'dbinput');
});
$("#db_button").click(function(){
$("#table2").show();
$("#table1").hide();
$("#dbtable tr").attr('class', 'dinput');
$("#cctable tr").attr('class', 'ccinput');
});
This basically changes the class attribute of each table according to which button is pressed. Theoretically, this should work for 4 forms, though I have not tried it yet. This is the updated code (I've changed a lot since the first code) for those that want to see what I did:
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table1").hide();
$("#table2").hide();
$("#cc_button").click(function(){
$("#table1").show();
$("#table2").hide();
$("#cctable tr").attr('class', 'dinput');
$("#dbtable tr").attr('class', 'dbinput');
});
$("#db_button").click(function(){
$("#table2").show();
$("#table1").hide();
$("#dbtable tr").attr('class', 'dinput');
$("#cctable tr").attr('class', 'ccinput');
});
$('.btnAdd').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('.dinput:last').clone();
// insert the new element after the last "duplicatable" input field
$('.dinput:last').after(newElem);
$(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );
// enable the "remove" button
$('.btnDel').attr('disabled','');
$(".date").mask("99/99/9999");
// business rule: you can only add 20 names
if (newNum == 20)
$('.btnAdd').attr('disabled','disabled');
});
$('.btnDel').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
$('.dinput:last').remove(); // remove the last element
// enable the "add" button
$('.btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('.btnDel').attr('disabled','disabled');
});
$(".date").mask("99/99/9999");
});
</script>
</head>
<body>
<div id="tablebuttons">
<button type="button" id="cc_button">CC</button> <button type="button" id="db_button">DB</button>
</div>
<div id="table1">
<form id="ccards" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th># (last four digits)</th>
<th>Amount</th>
<th>Approval</th>
<th>Date Received</th>
</tr>
<tbody id ="cctable" >
<tr class="ccinput">
<td> 1 </td>
<td> <input type="text" name="cc_num[]" maxlength="4" /> </td>
<td> <input type="int" name="cc_amnt[]" /> </td>
<td> <input type="text" name="cc_app[]" maxlength="10" /> </td>
<td> <input class="date" type="text" name="cc_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" class="btnAdd" value="Add" />
<input type="button" class="btnDel" value="Remove" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="table2">
<form id="db" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th>DB #</th>
<th>Amount</th>
<th>Date</th>
</tr>
<tbody id="dbtable">
<tr class="dbinput">
<td> 1 </td>
<td> <input type="text" name="db_num[]" /> </td>
<td> <input type="int" name="db_amnt[]" /> </td>
<td> <input class="date" type="text" name="db_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" class="btnAdd" value="Add" />
<input type="button" class="btnDel" value="Remove" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
</body>
</html>
You can use something like this.
//when the Add Field button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="input[]"><button class="delete">Delete</button></div>');
});
for detailed tutorial http://voidtricks.com/jquery-add-remove-input-fields/