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>
Related
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>
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);
});
});
What I am trying to do is to dynamically replace the corresponding text with the string from input field.(field1>field11, field2>field22)
http://jsfiddle.net/c2CUE/3/
Can you give me any clue on how to do it in jquery?
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>
this should do the trick
$(document).ready(function () {
$("input.field1").on("keyup",function () {
$("span.field11").html($(this).val());
});
});
or in live
http://jsfiddle.net/u8EB9/
you could also hook the function to the "change" event but than youll get your text only updated, after you left the input!
this depends on your needs!
Try this:
<form id="form" method="post">
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>
</form>
and jquery:
$(document).ready(function(){
$('#form').submit(function(e){
e.preventDefault();
$('.field11').html($('.field1').val());
$('.field22').html($('.field2').val());
});
}
if your intention is to use this code multiple times it might be better to use classs rather than id's to stop you needing to create a bunch of bind events.
html:
<table>
<tr>
<td>
<h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="replacer" />
<input type="button" class="replace" value="replace" />
</td>
<td>
<span class="replacee field11">asdasd</span>
</td>
</tr>
<tr>
<td>
<h2>Field 1</h2>
<input type="text" class="replacer" name="field2" value="qwerty" />
<input type="button" class="replace" value="replace" />
</td>
<td>
<span class="replacee field22">asdasd</span>
</td>
</tr>
</table>
JS:
$('.replace').on('click', function(){
var parentRow = $(this).closest('tr');
parentRow.find('.replacee').text(parentRow.find('.replacer').val());
});
http://jsfiddle.net/c2CUE/4/
HTML:
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>
JQuery:
$("input[type='text']").on("keyup",function () {
$(this).parent().next().find('span').html($(this).val());
});
Demo:
http://jsfiddle.net/F74ec/
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
i'm having the below jsp page created.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function show(x)
{
document.getElementById(x).style.display='block';
}
function hide(x)
{
document.getElementById(x).style.display='none';
}
function handleKeyEvent(e) {
var charCode;
if (e && e.which) {
charCode = e.which;
} else if (window.event) {
e = window.event;
charCode = e.keyCode;
}
if (charCode == 13) {
//document.getElementById("yourForm").submit();
var m=document.getElementById(e);
alert(m);
hide(x);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="abc.jsp">
<table width="722">
<tr>
<td width="431" height="190">
<table width="439" >
<tr>
<td width="129">PARTS Updated</td>
<td width="108"><p>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select>
</p></td>
<td width="186"><label for="PARTS_Updated"></label></td>
</tr>
<tr>
<td>TSI OK
</td>
<td><p>
<input type="radio" name="radio" id="TSI_N/A" value="TSI_N/A" onClick="hide('TSI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="TSI_Query" value="TSI_Query" onClick="show('TSI_Query_Box')"> TSI Query</p></td>
<td><label for="TSI_Query_Box"></label>
<textarea name="TSI_Query_Box" id="TSI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('TSI_Query_Box')"></textarea></td>
</tr>
<tr>
<td height="65">Special Ins OK
</td>
<td><p>
<input type="radio" name="radio" id="SI_N/A" value="TSI_OK" onClick="hide('SI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="SI_Query" value="SI_Query" onClick="show('SI_Query_Box')"> SI Query</p></td>
<td><label for="SI_Query_Box"></label>
<textarea name="SI_Query_Box" id="SI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('SI_Query_Box')"></textarea></td>
</tr>
</table></td>
<td width="279">
<table width="279" align="center">
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="721" border="1">
<tr>
<td width="374" align="center">
<input type="submit" name="Send for CT Review (SCTR)" id="Send for CT Review (SCTR)" value="Send for CT Review (SCTR)"></td>
<td width="331" align="center">
<input type="submit" name="CT Review Complete (CTRC" id="CT Review Complete (CTRC)" value="CT Review Complete (CTRC)"></td>
</tr>
<tr>
<td align="center">
<input type="submit" name="Cleanup Queries" id="Cleanup Queries" value="Cleanup Queries"></td>
<td align="center">
<input type="submit" name="Cleanup Complete" id="Cleanup Complete" value="Cleanup Complete"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Go_To_Main_Page" id="Go_To_Main_Page" value="Go To Main Page"></td>
</tr>
</table>
<p> </p>
</form>
<h1> </h1>
</body>
</html>
i wanted to see when i enter the text in textarea and hit enter, i want to see the text assed. in the present case it is alerting a message [object]. Also when i check radio buttons, if i check TSI Query Radio button followed SI Query Radio button or vice versa, both are getting displayed, i want only one textarea to be displayed once.
for screenshot you can have a look at this link
http://jsfiddle.net/dYy26/
Thanks.
Check this code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function show(x,y)
{
document.getElementById(x).style.display='block';
document.getElementById(y).style.display='none';
document.getElementById('Ship_IDl').style.display='block';
}
function hide(x,y)
{
document.getElementById(x).style.display='none';
document.getElementById(y).style.display='block';
document.getElementById('Ship_IDl').style.display='none';
}
function handleKeyEvent(e) {
var charCode;
if (e && e.which) {
charCode = e.which;
} else if (window.event) {
e = window.event;
charCode = e.keyCode;
}
if (charCode == 13) {
//document.getElementById("yourForm").submit();
var m=document.getElementById(e);
alert(m);
hide(x);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="abc.jsp">
<table width="722">
<tr>
<td width="431" height="190">
<table width="439" >
<tr>
<td width="129">PARTS Updated</td>
<td width="108"><p>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select>
</p></td>
<td width="186"><label for="PARTS_Updated"></label></td>
</tr>
<tr>
<td>TSI OK
</td>
<td><p>
<input type="radio" name="radio" id="TSI_N/A" value="TSI_N/A" onClick="hide('TSI_Query_Box','SI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="TSI_Query" value="TSI_Query" onClick="show('TSI_Query_Box','SI_Query_Box')"> TSI Query</p></td>
<td><label for="TSI_Query_Box"></label>
<textarea name="TSI_Query_Box" id="TSI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('TSI_Query_Box')"></textarea></td>
</tr>
<tr>
<td height="65">Special Ins OK
</td>
<td><p>
<input type="radio" name="radio" id="SI_N/A" value="TSI_OK" onClick="hide('SI_Query_Box','TSI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="SI_Query" value="SI_Query" onClick="show('SI_Query_Box','TSI_Query_Box')"> SI Query</p></td>
<td><label for="SI_Query_Box"></label>
<textarea name="SI_Query_Box" id="SI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('SI_Query_Box')"></textarea></td>
</tr>
</table></td>
<td width="279">
<table width="279" align="center">
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="721" border="1">
<tr>
<td width="374" align="center">
<input type="submit" name="Send for CT Review (SCTR)" id="Send for CT Review (SCTR)" value="Send for CT Review (SCTR)"></td>
<td width="331" align="center">
<input type="submit" name="CT Review Complete (CTRC" id="CT Review Complete (CTRC)" value="CT Review Complete (CTRC)"></td>
</tr>
<tr>
<td align="center">
<input type="submit" name="Cleanup Queries" id="Cleanup Queries" value="Cleanup Queries"></td>
<td align="center">
<input type="submit" name="Cleanup Complete" id="Cleanup Complete" value="Cleanup Complete"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Go_To_Main_Page" id="Go_To_Main_Page" value="Go To Main Page"></td>
</tr>
</table>
<p> </p>
</form>
<h1> </h1>
</body>
</html>
Check this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function show(x,y)
{
document.getElementById(x).style.display='block';
document.getElementById(y).style.display='none';
document.getElementById('Ship_IDl').style.display='block';
}
function hide(x,y)
{
document.getElementById(x).style.display='none';
document.getElementById(y).style.display='block';
document.getElementById('Ship_IDl').style.display='none';
}
function myKeyPress(e,x,y){
var keynum;
if(window.event){ // IE
keynum = e.keyCode;
}else
if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
//alert(String.fromCharCode(keynum));
//alert(keynum);
if (keynum == 13) {
//document.getElementById("yourForm").submit();
var m=document.getElementById(x).value;
alert(m);
hide(x,y);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="abc.jsp">
<table width="722">
<tr>
<td width="431" height="190">
<table width="439" >
<tr>
<td width="129">PARTS Updated</td>
<td width="108"><p>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select>
</p></td>
<td width="186"><label for="PARTS_Updated"></label></td>
</tr>
<tr>
<td>TSI OK
</td>
<td><p>
<input type="radio" name="radio" id="TSI_N/A" value="TSI_N/A" onClick="hide('TSI_Query_Box','SI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="TSI_Query" value="TSI_Query" onClick="show('TSI_Query_Box','SI_Query_Box')"> TSI Query</p></td>
<td><label for="TSI_Query_Box"></label>
<textarea name="TSI_Query_Box" id="TSI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="return myKeyPress(event,'TSI_Query_Box','SI_Query_Box')"></textarea></td>
</tr>
<tr>
<td height="65">Special Ins OK
</td>
<td><p>
<input type="radio" name="radio" id="SI_N/A" value="TSI_OK" onClick="hide('SI_Query_Box','TSI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="SI_Query" value="SI_Query" onClick="show('SI_Query_Box','TSI_Query_Box')"> SI Query</p></td>
<td><label for="SI_Query_Box"></label>
<textarea name="SI_Query_Box" id="SI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="return myKeyPress(event,'SI_Query_Box','TSI_Query_Box')""></textarea></td>
</tr>
</table></td>
<td width="279">
<table width="279" align="center">
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID" id="Ship_IDl"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="721" border="1">
<tr>
<td width="374" align="center">
<input type="submit" name="Send for CT Review (SCTR)" id="Send for CT Review (SCTR)" value="Send for CT Review (SCTR)"></td>
<td width="331" align="center">
<input type="submit" name="CT Review Complete (CTRC" id="CT Review Complete (CTRC)" value="CT Review Complete (CTRC)"></td>
</tr>
<tr>
<td align="center">
<input type="submit" name="Cleanup Queries" id="Cleanup Queries" value="Cleanup Queries"></td>
<td align="center">
<input type="submit" name="Cleanup Complete" id="Cleanup Complete" value="Cleanup Complete"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Go_To_Main_Page" id="Go_To_Main_Page" value="Go To Main Page"></td>
</tr>
</table>
<p> </p>
</form>
<h1> </h1>
</body>
</html>