the idea is i have 2 buttons and 2 forms with content in them; i made the buttons to each hide/show a form, like button1 will show and hide form1 when clicked, and so button2 and form2, and it worked, but the thing is when i click on button1 and button2 the forms both show up, and i want something like if form2 was already showed, and after that when i click on button1 to show form1, the form2 will automatically hide, and if i click on buton2 afterwards i want form2 to show and form1 to hide.
HTML CODE
<hr id="hr1" hidden><!-- HR -->
<input type="submit" id="mngashow1" value="Show 'Add chapter'" onclick="chapterform()">
<div id="formm1" style="display: none;">
<form id="form2" name="form2" method="post" action="a.php"" enctype="multipart/form-data">
<table id="tble" width="80%" border="0" cellpadding="3" cellspacing="3">
<tr>
<td>ID</td>
<td><input type="text" name="id" placeholder="type id" id="id"></td>
</tr>
<tr>
<td>First row</td>
<td><input type="text" name="manganame" placeholder="add a name for the manga" id="manganame"></td>
</tr>
<tr>
<td>Third row</td>
<td><input type="text" name="chapternumber" placeholder="Add the chapter number" id="chapternumber"></td>
</tr>
<tr>
<td>Second row</td>
<td><input type="text" name="chaptername" placeholder="Add a name for the chapter" id="chaptername"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit2" placeholder="" id="Submit2" value="Save Table">
</td>
</tr>
</table>
</form>
</div>
<hr id="hr2" hidden><!-- HR -->
<input type="submit" id="mngashow2" value="Show 'Add chapter'" onclick="chapterform1()">
<div id="formm2" style="display: none;">
<form id="form3" name="form2" method="post" action="a.php"" enctype="multipart/form-data">
<table id="tble" width="80%" border="0" cellpadding="3" cellspacing="3">
<tr>
<td>ID</td>
<td><input type="text" name="id" placeholder="type id" id="id"></td>
</tr>
<tr>
<td>First row</td>
<td><input type="text" name="manganame" placeholder="add a name for the manga" id="manganame"></td>
</tr>
<tr>
<td>Third row</td>
<td><input type="text" name="chapternumber" placeholder="Add the chapter number" id="chapternumber"></td>
</tr>
<tr>
<td>Second row</td>
<td><input type="text" name="chaptername" placeholder="Add a name for the chapter" id="chaptername"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit23" placeholder="" id="Submit3" value="Save Table">
</td>
</tr>
</table>
</form>
</div>
JAVASCRIPT CODE
function chapterform() {
var x = document.getElementById("formm1");
var z = document.getElementById("mngashow1");
var y = document.getElementById("hr1");
if (x.style.display === "none") {
x.style.display = "block";
z.value = "Hide 'Add Chapter'";
y.hidden = 0;
} else {
x.style.display = "none";
z.value = "Show 'Add Chapter'";
y.hidden = 1;
}
}
function chapterform1() {
var x = document.getElementById("formm2");
var z = document.getElementById("mngashow2");
var y = document.getElementById("hr2");
if (x.style.display === "none") {
x.style.display = "block";
z.value = "Hide 'Add Chapter'";
y.hidden = 0;
} else {
x.style.display = "none";
z.value = "Show 'Add Chapter'";
y.hidden = 1;
}
}
<button data-frm="2" class="btnChap">Add Chapter</button>
<form id="form2" class="frms" name="form2" method="post" action="a.php" enctype="multipart/form-data">
</form>
<button data-frm="1" class="btnChap">Add Chapter</button>
<form id="form1" class="frms" name="form1" method="post" action="b.php" enctype="multipart/form-data">
</form>
<script type="text/javascript">
$(".btnChap").click(function(){
/*hids all the forms*/
$(".frms").hide();
var frm = $(this).attr('data-frm');
/*show your current form*/
$("#form"+frm).show();
})
</script>
1. Add Class 'frms' to each form
2. use button instead fs submit input
3. each button has its own id
4. each button has its own property to which form this button is associated
5. use jquery
6. hide all forms by class selector
7. show your desired form by button property
Hope this Helps and welcome to the community :)
Related
This question already has answers here:
Disable form auto submit on button click
(6 answers)
Closed 1 year ago.
Project:
create 4 radio buttons
user clicks on an option and submits
answer should appear in a textarea box
Why is it when I click on a specific radio button option, and then the submit button, the value of the radio button appears in the textarea space for a split second and then disappears?
Thanks heaps!
document.getElementById("clickMePlease").onclick=function() {
var theOptionPicked;
var i;
var nameOption;
for (i = 0; i <= 3; i++) {
theOptionPicked = document.myForm.nameQuestion[i];
if (theOptionPicked.checked == true) {
nameOption = theOptionPicked.value;
}
}
document.myForm.txtOutput.value = "You have picked " + theOptionPicked.value;
}
<!DOCTYPE html>
<html>
<form name="myForm">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>
Use onsubmit="event.preventDefault();" on your form element:
document.getElementById("clickMePlease").onclick=function() {
var theOptionPicked;
var i;
var nameOption;
for (i = 0; i <= 3; i++) {
theOptionPicked = document.myForm.nameQuestion[i];
if (theOptionPicked.checked == true) {
nameOption = theOptionPicked.value;
}
}
document.myForm.txtOutput.value = "You have picked " + theOptionPicked.value;
}
<!DOCTYPE html>
<html>
<form name="myForm" onsubmit="event.preventDefault();">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>
Edit:
You was asking for prevent reloading website after submitting form, so I was not checking other functionalitty. Now I repaired and simplified your snippet, so it selects correctly:
document.getElementById("clickMePlease").onclick = function() {
var theOptionPicked = document.querySelector('input[name="nameQuestion"]:checked').value;
document.myForm.txtOutput.value = "You have picked " + theOptionPicked;
}
<!DOCTYPE html>
<html>
<form name="myForm" onsubmit="event.preventDefault();">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>
I have a set of 10 Search Fields to be displayed when 2 different tabs are clicked. Both the tabs have same set of 10 fields. Instead of having different DIV, I want to use same DIV and based on the specific TAB selection, I want to only change my AJAX REST End-Point.
Pls help how to use same DIV for different TABS in HTML.
1) HTML: Code below shows 2 tabs and the 2 DIVs - Entity and Claim. Want to use only 1 DIV as both ENTITY and CLAIM DIVs have same set of fields.
<div class="tab">
<button class="tablinks" name="entity"
onclick="openTab(event, 'entity')" id="defaultOpen">Entity
Search</button>
<button class="tablinks" name="claim" onclick="openTab(event, 'claim')">Claim
Search</button>
</div>
<div id="entity1" class="tabcontent">
<h3>Entity</h3>
</div>
<div id="claim1" class="tabcontent">
<h3>Claim</h3>
</div>
<div id="entity" style="text-align: center" class="tabcontent">
<form name="ajaxform" id="ajaxform" method="POST" align="center">
<label align="center" class="h1"><font size=6><b>ER
Search Service</b></font></label> </br> </br> </br>
<input type="hidden" id="userID" name="userID" value="">
<script>
</script>
<table align="center">
<tr>
<td>EntityID</td>
<td><input type="text" name="entityid" width=10></td>
<!-- <td>ClaimID</td>
<td><input type="text" name="claimid" width=10></td> -->
<td>First Name</td>
<td><input type="text" name="firstname" width=10></td>
<td>Last Name</td>
<td><input type="text" name="lastname" width=10></td>
</tr>
<tr>
<td>Address Line 1</td>
<td><input type="text" name="addrLine1" width=10></td>
<td>Address Line 2</td>
<td><input type="text" name="addrLine2" width=10></td>
<td>City</td>
<td><input type="text" name="city" width=10></td>
<td>State</td>
<td><input type="text" name="state" width=10></td>
</tr>
<tr>
<td>Country</td>
<td><input type="text" name="country" width=10></td>
<td>Zipcode</td>
<td><input type="text" name="zipcode" width=10></td>
<td>SSN</td>
<td><input type="text" name="ssn" width=10></td>
<td>DL Number</td>
<td><input type="text" name="dl_num" width=10></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" width=10></td>
<td>Professional License</td>
<td><input type="text" name="profLic" width=10></td>
<td>Policy Number</td>
<td><input type="text" name="policyNum" width=10></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><input type="button" id="simplepost" value="Search"
align="center"></td>
<td><input type="reset" id="reset" value="Clear"
onClick="runReset()" align="center"></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><select id="downloadFormat" align="center">
<option value="selectValue" selected>Select Download
Format</option>
<option value="csv">CSV</option>
<option value="xls">Excel</option>
<option value="xml">XML</option>
<option value="pdf">PDF</option>
</select></td>
<td><input type="button" id="download" value="Download"
disabled=true align="center"></td>
</tr>
</table>
</form>
</div>
<div id="claim" style="text-align: center" class="tabcontent">
<form name="claimform" id="claimform" method="POST" align="center">
<label align="center" class="h1"><font size=6><b>ER
Search Service</b></font></label> </br> </br> </br>
<table align="center">
<tr>
<td>EntityID</td>
<td><input type="text" name="entityid" width=10></td>
<td>ClaimID</td>
<td><input type="text" name="claimid" width=10></td>
<td>First Name</td>
<td><input type="text" name="firstname" width=10></td>
<td>Last Name</td>
<td><input type="text" name="lastname" width=10></td>
</tr>
<tr>
<td>Address Line 1</td>
<td><input type="text" name="addrLine1" width=10></td>
<td>Address Line 2</td>
<td><input type="text" name="addrLine2" width=10></td>
<td>City</td>
<td><input type="text" name="city" width=10></td>
<td>State</td>
<td><input type="text" name="state" width=10></td>
</tr>
<tr>
<td>Country</td>
<td><input type="text" name="country" width=10></td>
<td>Zipcode</td>
<td><input type="text" name="zipcode" width=10></td>
<td>SSN</td>
<td><input type="text" name="ssn" width=10></td>
<td>DL Number</td>
<td><input type="text" name="dl_num" width=10></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" width=10></td>
<td>Professional License</td>
<td><input type="text" name="profLic" width=10></td>
<td>Policy Number</td>
<td><input type="text" name="policyNum" width=10></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><input type="button" id="claimpost" value="Search"
align="center"></td>
<td><input type="reset" id="reset" value="Clear"
onClick="runReset()" align="center"></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><select id="downloadFormat" align="center">
<option value="selectValue" selected>Select Download
Format</option>
<option value="csv">CSV</option>
<option value="xls">Excel</option>
<option value="xml">XML</option>
<option value="pdf">PDF</option>
</select></td>
<td><input type="button" id="download" value="Download"
disabled=true align="center"></td>
</tr>
</table>
</form>
</div>
2) JavaScript:
<script>
var tabSelected = '';
var userID = getParameterByName("userID");
//alert(userID);
function setUserID() {
//userID = getParameterByName("userID");
document.getElementById("userID").value = userID;
//alert(document.getElementById("userID").value);
}
function getParameterByName(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
//alert('Query Variable ' + variable + ' not found');
}
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
if (tabName == "entity") {
tabSelected = "getEntity";
alert(tabSelected);
} else if (tabName == "claim") {
tabSelected = "getClaim";
alert(tabSelected);
}
}
document.getElementById("defaultOpen").click();
</script>
3) AJAX:
$("#simplepost").click(function(e) {
//getUsersAndDisplay();
tabSelected = "getEntity";
//alert(tabSelected);
convertJSONToTable(tabSelected);
});
//GETUSERS Button ends
$("#claimpost").click(function(e) {
tabSelected = "getClaim";
//alert(tabSelected);
convertJSONToTable(tabSelected);
});
AJAX REST-ENDPOINT CALL: Want to call same method based on the variable which is getting the right values. But problem is how to display same DIV for different TAB Selections.
function convertJSONToTable(tab) {
var MyFormData = $("#ajaxform").serializeJSON();
console.log(MyFormData);
var MyFormJSON = JSON.stringify(MyFormData,null, 2);
console.log(MyFormJSON);
var urlSelected = '';
if (tab == "getEntity") {
urlSelected = "http://localhost:8089/restserver/rest/getEntity";
} else if (tab == "getClaim"){
urlSelected = "http://localhost:8089/restserver/rest/getClaim";
}
$.ajax({
url : urlSelected,
type: "POST",
contentType: "application/json",
data : MyFormJSON,
success: function(response) {
//Store result in Session and Enable Download button
response = removeAllBlankOrNull(response);
var cacheString = JSON.stringify(response, null, 2);
console.log("-----------------> cacheString is: " + cacheString);
var sessionresponse = sessionStorage.setItem("i98779", cacheString);
console.log("----------------------------------------------------------------");
console.log("Response is: " + response);
console.log("----------------------------------------------------------------");
if(cacheString != null && cacheString != "[]") {
document.getElementById("download").disabled = false;
}
createTable2(response);
},
error: function(jqXHR, textStatus, errorThrown)
{
console.log(errorThrown);
alert("Error: " + errorThrown);
}
});
} //convertJSONToTable() Ends here
You only need one form and therefore only one "tab". But with two buttons you can let it appear like having two tabs. Each of these buttons shows/hide a submit-button in the form.
The form has to submit-buttons. One is sending the variable "claim" to the ajax-function. The other one is sending "entity" to the ajax-function.
HTML
<div class="tab">
<button class="tablinks" name="entity" id="open-entity">Entity
Search</button>
<button class="tablinks" name="claim" id="open-claim">Claim
Search</button>
</div>
<div>
<form>
<!--Input fields goes here-->
<!--Two submit buttons in the same form, each is sending its individual variable to your ajax function-->
<input type="button" id="submit-entity" value="Download"
disabled=true align="center">
<input type="button" id="submit-claim" value="Download"
disabled=true align="center"></td>
</form>
</div>
JS
$(function() {
//Define which form should be shown on page-load, in this case "claim"
$('#submit-claim').show();
$('#submit-claim').hide();
//Show button to submit claim-form, hide button for entity-form
$('#open-claim').click(function(){
$('#submit-claim').show();
$('#submit-claim').hide();
});
//Hide button to submit claim-form, show button for entity-form
$('#open-entity').click(function(){
$('#submit-entity').show();
$('#submit-entity').hide();
});
//Call ajax if submit button is clicked
$('#submit-entity').click(function(){
convertJSONToTable('entity');
});
$('#submit-claim').click(function(){
convertJSONToTable('claim');
});
});
SECOND OPTION:
Instead of having two submit buttons you can add a hidden input-field to your form. If the user clicks on the #open-claim button the value of the input field is changed to 'claim'. If clicked on open-entityits value gets 'entity'.
$('#open-claim').click(function(){
$('#form-type').val('claim');
});
$('#open-entity').click(function(){
$('#form-type').val('entity');
});
Then, when clicked on the submit-button of the form the value of the input field is sent to the ajax-function.
$('#submit-btn').click(function(){
convertJSONToTable($('#form-type').val());
});
I have already seen the pages here for this error, but neither window.load nor putting script in the div block have solved it. If I write document.getElementById("fullname_error"), it is working, but it is not working with document.getElementById(ident) though the var ident is equal to the id of p , I have checked it.
<div class="most_page">
<div id="form_container" >
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td><input type="text" name="fullname" value="Full name" ></td>
<td><p id="fullname_error" > hh</p></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address"></td>
</tr>
</table>
<button class="button" id="submitreg" ><input id="submit" type="submit" value="submit"></button>
<script type="text/javascript">
function validatename_degree(x,ident) {
var iden='"'+ident+'"';
document.getElementById(iden).innerHTML=iden;
}
</script>
</form>
</div>
</div>
You don't require var iden='"'+ident+'"'; just use var iden=ident;. Please try this.
<!DOCTYPE html>
<html>
<body>
<div class="most_page">
<div id="form_container">
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td>
<input type="text" name="fullname" value="Full name">
</td>
<td>
<p id="fullname_error"> hh</p>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address">
</td>
</tr>
</table>
<button class="button" id="submitreg">
<input id="submit" type="submit" value="submit">
</button>
<script type="text/javascript">
function validatename_degree(x, ident) {
var iden = ident;
document.getElementById(iden).innerHTML = iden;
}
</script>
</form>
</div>
</div>
</body>
</html>
Just pass the parameter ident to the document.getElementById property and use the your existing code,below is a working snippet
<div class="most_page">
<div id="form_container" >
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td><input type="text" name="fullname" value="Full name" ></td>
<td><p id="fullname_error" > hh</p></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address"></td>
</tr>
</table>
<button class="button" id="submitreg" ><input id="submit" type="submit" value="submit"></button>
<script type="text/javascript">
function validatename_degree(x,ident) {
console.log(""+ident)
var iden='"'+ident+'"';
document.getElementById(ident).innerHTML=iden;
}
</script>
</form>
</div>
</div>
This is my code so far:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<p>
<br />
<input onclick="addtext();" type="button" value="Strip HTML Formatting" />
</p>
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</tbody>
</table>
</form>
Now I want to add a button that clears the two textareas.
Where should I be putting the JavaScript for that, and what should it say?
You can use the reset type attribute:
<input type="reset" value="Reset" />
Code snippet:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input type="reset" value="Reset" />
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This resets all form values to their default values.
If you have other textareas besides these and you only want to empty these two, you should create another button that links to a function that empties the values:
HTML:
<input onclick="emptyText()" type="button" value="Clear fields" />
JS:
function emptyText() {
document.myform.inputtext.value = "";
document.myform.outputtext.value = "";
}
Demo on Fiddle
HTML:
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>
<textarea name="inputtext"></textarea>
</td>
<td>
<p>
<br />
<input type="button" value="Strip HTML Formatting" />
</p>
</td>
<td>
<textarea name="inputtext" readonly></textarea>
</td>
</tr>
<tr>
<td>
<button>Empty</button>
</td>
</tr>
</tbody>
</table>
JavaScript:
var removeBtn = document.getElementsByTagName('button')[0];
var copyBtn = document.querySelector('input[type="button"]');
copyBtn.onclick = function () {
var inpt = document.getElementsByTagName('textarea')[0].value;
document.getElementsByTagName('textarea')[1].value = inpt;
}
removeBtn.onclick = function () {
document.getElementsByTagName('textarea')[0].value = "";
document.getElementsByTagName('textarea')[1].value = "";
}
OPTION 1:
Use a reset type input-button:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input type="reset" value="Clear fields" /> <!--THIS LINE-->
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This resets all form values to their default values.
OPTION 2:
If you have other textareas besides these and you only want to empty these two, you should create another button that links to a function that empties the values:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
function clearFields() {
document.myform.inputtext.value = "";
document.myform.outputtext.value = "";
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input onclick="clearFields()" type="button" value="Clear fields" /> <!--THIS LINE-->
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This literally sets the values of the two textareas to 'empty'.
I have a form that contain ten text boxes for entering some data. That form has a submit button and a next button. When I click on the next button, it has to open again ten text boxes, and has to store previous information into a temporary table in a MySQL database or in any other way. And finally, if I click on the submit button, it has to store that complete information into another permanent MySQL database table.
How can I do this?
This is what I tried so far:
<form name="form2" action="addingstuden_data.jsp" method="POST">
<table align="center">
<th colspan="3" class="style30"><font size="5">Adding Students for<%=stream%>-<%=year3%></th>
</table>
<table align="center" border="1">
<tr>
<td class="heading" align="center" >SNo</td>
<td class="heading" align="center" >Student Id</td>
<td class="heading" align="center">Student Name</td>
</tr>
<%
int i;
for(i=0;i<62;i++)
{
%>
<tr>
<td><input type="text" name="SNo" value="<%=i%>" id="r2" size="1"> </td>
<td><input type="text" name="stdid" id="sid" size="4" value=""> </td>
<td><input type="text" name="stdname" id="sname" value=""> </td>
</tr>
<% } %>
</table>
<table width="100%" class="pos_fixed">
<tr>
<td align="center" class="border"><input type="submit" name="submit" value="submit"> </td>
</tr>
</table>
</form>
Try this, Style it according to your need
<form name="myform" method="POST" action="youraction">
<div id="forms">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
</div>
<input type="button" name="next" value="next" onclick="next()">
<input type="submit" name="submit" value="Submit">
</form>
Javascript code
function next()
{
var ele = document.getElementById('forms');
for(var i=0;i<10;i++)
{
var name = document.createElement("input");
name.setAttribute('type',"text");
name.setAttribute('name',"feilds[]");
ele.appendChild(name);
}
}
On server side loop through feilds[] array and get all the values