Storing text box values in temporary table - javascript

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

Related

Copy contents of textarea to input

In this table each row has a text area wd. I want to copy the contents of #wd to #wdi.
That is the user types in wd and the wdi value becomes wd value.
I am assuming I need to use onkeyup function but not sure.
<tbody>
while(rs1.next())
{ %>
<tr>
<td>
<textarea id="wd" rows="4" cols="50" name="wd" ></textarea>
</td>
<td>
<form method='POST' action="actonissue.jsp" id='form1'>
<input id='issue_id' name ='issue_id' value='<%=rs1.getString(1)%>' class='disable' type="hidden">
<input id='wdi' name ='wdi' class='disable' type="hidden" >
<button type="submit" >Resolve Issue</button> </form>
</td>
</tr>
<% } %>
</tbody>
You can use keyup function as, note that you need get #wdi within each tr.
$('[name ="wd"]').keyup(function(){
//console.log($(this).val())
$(this).closest("tr").find("#wdi").val($(this).val());
})
$('[name ="wd"]').keyup(function(){
//console.log($(this).val())
$(this).closest("tr").find("#wdi").val($(this).val());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<textarea id="wd" rows="4" cols="50" name="wd" ></textarea>
</td>
<td>
<form method='POST' action="actonissue.jsp" id='form1'>
<input id='issue_id' name ='issue_id' value='test1' class='disable' type="hidden">
<input id='wdi' name ='wdi' class='disable' type="hidden" >
<button type="submit" >Resolve Issue</button> </form>
</td>
</tr>
<tr>
<td>
<textarea id="wd" rows="4" cols="50" name="wd" ></textarea>
</td>
<td>
<form method='POST' action="actonissue.jsp" id='form1'>
<input id='issue_id' name ='issue_id' value='test2' class='disable' type="hidden">
<input id='wdi' name ='wdi' class='disable' type="hidden" >
<button type="submit" >Resolve Issue</button> </form>
</td>
</tr>
</tbody>
</table>

Cannot set property 'innerHTML' of null at validatename_degree

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>

Change Button Text

I am learning php and want to set the display text for a button that I have. I know that you can use javascript to change the button text,but that (at least from what I have seen) works for .onclick I want the button text to be changed when the page loads. By default the button text on my page when it loads displays Submit Query when my page loads I want the text to read Button on Page
Is there a way using php to 1) set the button text and 2) have it span 2 rows in the table?
This is the code I am working with:
<html>
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td rowspan="2"><input type="submit" name="btn123" text="Button On Page"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
You should use value instead of text for your submit button
<body>
<form id="TestForm" runat="server">
<div>
<div id="calculationfields">
<table id="calculations">
<tr>
<td><label for="lblreadonly1:">Read Only 1:</label></td>
<td><input type="text" name="txtReadOnly1" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly2:">Read Only 2:</label></td>
<td><input type="text" name="txtReadOnly2" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td><label for="lblreadonly3:">Read Only 3:</label></td>
<td><input type="text" name="txtreadonly3" maxlength="50" size="10" readonly></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="btn123" value="<?php echo 'Button On Page'; ?>" style="width:100%"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
If you always know what you want your button to say, you don't need php or javascript. You can just use the html "value" attribute. You are incorrectly using a attribute labled "text", you should use "value". Update your code to the following.
Change your button html from:
<input type="submit" name="btn123" text="Button On Page">
To:
<input type="submit" name="btn123" value="Button On Page">
Edit:
In order to have your button go full width. You should use "colspan" instead of "rowspan". Your td is in a row, and needs to span columns.
Change this code from:
<td rowspan="2"><input type="submit" name="btn123" value="Button On Page"></td>
to (note that I added an id of "button" to your button):
<td rowspan="2"><input type="submit" id="button" name="btn123" value="Button On Page"></td>
Then add a little css:
#button{
width: 100%;
}
Here is a fiddle with a working example:
https://jsfiddle.net/joeydehnert/m1ttcr86/

Autofill other fields automatically if one field is entered with jquery

Please check my fiddle.
Fiddle
When i enter any data in any rows in slab_range, i need to autofill all the other rows of 'Slab Range' with a value 'No Bid'. If i left blank, nothing has to be filled. Likewise if i enter any data in 'Part Number', all the other rows of 'Part Number' has to be filled with value '2'. The rows are coming from db, so i cant tell how many rows it will be, it should iterate all the rows.
<tr>
<td>
<input size="1" id="sl[0]" name="sl[0]" value="1" type="text">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
There you go, now it's your task to refactoring the code because both methods are equals.
var ProcessTable = (function () {
var _slabs, _partsNumber;
var _init = function () {
_slabs = $('input[name^="slab_range"]');
_partsNumber = $('input[name^="item_partno"]');
_slabs.on('blur', _slabBlurHandler);
_partsNumber.on('blur', _partNumberBlurHandler);
};
var _slabBlurHandler = function (e) {
var value = $.trim($(this).val());
if (value !== '') {
_slabs.val('No bid');
} else {
_slabs.val('');
}
$(this).val(value); // Because the previous line override the original value
};
var _partNumberBlurHandler = function (e) {
var value = $.trim($(this).val());
if (value !== '') {
_partsNumber.val('2');
} else {
_partsNumber.val('');
}
$(this).val(value); // Because the previous line override the original value
};
return {
init: _init
}
})();
ProcessTable.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cart1" name="cart" method="post" class="single" action="price_edit_save.php?supplier_name=Jupiter+Microwave+Components+Inc&tender_id=151501">
<div class="clone_row">
<table style="border-collapse: collapse;" id="table" border="1" cellpadding="2" cellspacing="2" width="100%">
<thead>
<tr bgcolor="#E6E6FA">
<th width="4%">SlNo</th>
<th width="4%">Slab Range</th>
<th width="6%">Part Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input size="1" name="id[0]" value="9978" readonly="readonly" type="hidden">
<input size="1" id="sl[0]" name="sl[0]" value="1" type="text">
<input size="1" id="item_id[0]" name="item_id[0]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
<tr>
<td>
<input size="1" name="id[1]" value="9979" readonly="readonly" type="hidden">
<input size="1" id="sl[1]" name="sl[1]" value="2" type="text">
<input size="1" id="item_id[1]" name="item_id[1]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
<tr>
<td>
<input size="1" name="id[1]" value="9979" readonly="readonly" type="hidden">
<input size="1" id="sl[1]" name="sl[1]" value="2" type="text">
<input size="1" id="item_id[1]" name="item_id[1]" readonly="readonly" type="hidden">
</td>
<td>
<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
</td>
<td>
<input size="9" name="item_partno[]" id="item_partno[]" type="text">
</td>
</tr>
</tbody>
</table>
</div>
<div class="addMoreDIV">
</div>
<table>
<tr>
<td>
<input value="--Update Data--" type="submit">
</td>
</tr>
</table>
</form>
And please, be more kindly when you ask for "help".

onfocus not working in javascript

i am putting together some javascript form validation and i cant figure out how to get this onfocus to take hold of my div... i just need it to alert me that my onfocus function is making contact with my last name imput... :(
html:
<div id="contact">
<form name="form1" action="send.php" method="post" id="contact_f">
<table id="contact_table">
<tr>
<td class="col1" colspan="2">
<h1 class="center_text">Contact Aron</h1>
<div id="error_messages">
errors
</div>
</td>
</tr>
<tr>
<td class="col1">
<label for="first_name">First Name*</label><br>
<input id="first_name" required name="Name" type="text" pattern="[a-zA-Z]+">
</td>
<td class="col2">
<label for="last_name">Last Name*</label><br>
<input id="last_name" required type="text">
</td>
</tr>
<tr>
<td class="col1">
<label for="email">Email*</label><br>
<input id="email" required type="email">
</td>
<td class="col2">
<label for="confirm_email">Confirm Email*</label><br>
<input id="confirm_email" required type="text">
</td>
</tr>
<tr>
<td class="col1">
<label for="phone">Phone Number <span id="color_gray">xxx-xxx-xxxx</span></label><br>
<input id="phone" type="tel" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
</td>
<td class="col2">
</td>
</tr>
<tr class="col2">
<td class="col1" colspan="2">
<label for="message">Message*</label><br>
<textarea id="message" required type="text"></textarea>
</td>
</tr>
<tr>
<td class="col1" colspan="2">
<button id="submit_button" type="submit" value="submit">Submit Form</button>
</td>
</tr>
</table>
</form>
javascript in question:
document.getElementById("last_name").onfocus=function() {
alert("last name");
};
Actually your code is working fine. You can try it with using jquery, like this -
$(document).ready(function() {
$( "#last_name" ).focus(function() {
alert("Last name");
});
});
You need to use:
document.getElementById("last_name").onfocus=function() {
alert(this.value);
};
Try this
window.addEventListener('load',function(){
document.getElementById("last_name").addEventListener('focus',function() {
alert(this.value);
});
});

Categories