im planning to display my output thru innerHTML but the javascript cant seem to display my input just like i wanted. when user enter input into the form, i want to display the input by using innerHTML.
my attempt output is just in a normal list similar to something like this:
to students
output 1
output 2
output 3
to organizer
k1
k2
k5
<html>
<head>
<title>part b</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<form onsubmit="printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name = "pelajar1" rows = "4" cols = "110"></textarea>
<textarea name = "pelajar2" rows = "4" cols = "110"></textarea>
<textarea name = "pelajar3" rows = "4" cols = "110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
</form>
<script>
function printChecked()
{
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items=document.getElementsByName('kl');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementsByName("pelajar1").innerHTML = pel1;
document.getElementsByName("pelajar2").innerHTML = pel2;
document.getElementsByName("pelajar3").innerHTML = pel3;
document.getElementsByName("kl").innerHTML = items;
}
</script>
</body>
</html>
try this and see console
<html>
<head>
<title>part b</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<th colspan="2">activities</th>
</tr>
<tr>
<html>
<head>
<title>part b</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<form onsubmit="printChecked">
<table>
<tr>
<th colspan="2">activities</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you
interest
</td>
</tr>
<tr>
<td>1. to students</td>
<td>
<textarea
id="pelajar1"
rows="4"
cols="110"
></textarea>
<textarea
id="pelajar2"
rows="4"
cols="110"
></textarea>
<textarea
id="pelajar3"
rows="4"
cols="110"
></textarea>
</td>
</tr>
<tr>
<td>TO ORGANIZER</td>
<td>
<br />
<input
type="checkbox"
id="k1"
value="communication"
/>K1
<input
type="checkbox"
id="k2"
value="problems"
/>K2
<br />
<input
type="checkbox"
id="k3"
value="teamwork"
/>K3
<br />
<input
type="checkbox"
id="k4"
value="info"
/>K4
<br />
<input
type="checkbox"
id="k5"
value="business"
/>K5
<br />
<input
type="checkbox"
id="k6"
value="ethics"
/>K6
<br />
<input
type="checkbox"
id="k7"
value="leadership"
/>K7
<br />
</td>
</tr>
</table>
<br /><br />
<input
type="button"
onclick="printChecked()"
value="Submit"
/>
</form>
<div id="form"></div>
<script>
function printChecked() {
var pel1 =
document.getElementById("pelajar1");
var pel2 =
document.getElementById("pelajar2");
var pel3 =
document.getElementById("pelajar3");
var items = [];
for (let i = 0; i < 7; i++) {
var a = document.getElementById(
"k" + (i + 1),
);
a.checked ? items.push(a.value) : null;
}
console.log(
"1 : " +
pel1.value +
"\n2 :" +
pel2.value +
"\n3 :" +
pel3.value,
);
items.forEach((element) => {
console.log(element);
});
}
</script>
</body>
</html>
</tr>
</table>
</form>
</body>
</html>
Okay i am not so clear about what you want to achieve in here, i believe you want the form submit not to do submission and get the details in the function for some kind of computation , i use this as for a javascript approach for preventing default form submit
make use of a return function that returns false stating not to submit the form as in below example
if this satisfies your query, please refer=>
function printChecked() {
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items = document.getElementsByName('kl');
var selectedItems = "";
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox' && items[i].checked == true)
selectedItems += items[i].value + "\n";
}
console.log("pel1-data=> "+pel1[0].value);
console.log("pel2-data=> "+pel2[0].value);
console.log("pel3-data=> "+pel3[0].value);
console.log("checkbox-data=> "+selectedItems);
return false;
}
table,
th,
td {
border: 1px solid black;
}
<form onsubmit="return printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name="pelajar1" rows="4" cols="110"></textarea>
<textarea name="pelajar2" rows="4" cols="110"></textarea>
<textarea name="pelajar3" rows="4" cols="110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
</form>
you can see return for onsubmit of form which gets value from the function printChecked() -> see last return statement in function
Additional
for jquery inside the called function definition we can just add the received event's preventDefault function
$("form").submit(function(event){
event.preventDefault();
});
Edit-> prints data on the same page using innerHtml
function printChecked() {
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items = document.getElementsByName('kl');
var selectedItems = "";
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox' && items[i].checked == true)
//selectedItems += items[i].value + "\n";
//add values as li elements
selectedItems += '<li>'+ items[i].value + '</li>';
}
//show list on submit
document.getElementById("toStudents").style.display = "block";
document.getElementById("toOrganizer").style.display = "block";
//add tostudents text area values in to list
document.getElementById("pelajar1").innerHTML=pel1[0].value;
document.getElementById("pelajar2").innerHTML=pel2[0].value;
document.getElementById("pelajar3").innerHTML=pel3[0].value;
//add toorganizer checkbox values in to list
document.getElementById("toOrganizer").innerHTML=selectedItems;
//just printing values in console
//console.log("pel1-data=> "+pel1[0].value);
//console.log("pel2-data=> "+pel2[0].value);
//console.log("pel3-data=> "+pel3[0].value);
//console.log("checkbox-data=> "+selectedItems);
return false;
}
table,
th,
td {
border: 1px solid black;
}
/*list is hidden at first*/
#toStudents,#toOrganizer{
display:none;
list-style:none;
}
<form onsubmit="return printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name="pelajar1" rows="4" cols="110"></textarea>
<textarea name="pelajar2" rows="4" cols="110"></textarea>
<textarea name="pelajar3" rows="4" cols="110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
<h2>To Students</h2>
<ul id="toStudents">
<li id="pelajar1"></li>
<li id="pelajar2"></li>
<li id="pelajar3"></li>
</ul>
<h2>To Organizer</h2>
<ul id="toOrganizer">
</ul>
</form>
the issue you seem to be experiencing is from the page reloading on the form submit BEFORE the JS function is called. Based on your code, you are calling printChecked() onsubmit when the button is clicked.
To fix your issue, look into Stop form refreshing page on submit, which, among other things, would involve adding return false to your onsubmit call. Other solutions from the same page mention not using button type="submit", and instead focusing on using the type="button" with a separate call from there onclick.
Hopefully this helps!
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
<script>
function delBoxes(){
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for(var i = 0; i<boxes.length; i++){
box = boxes[i];
txt = texts[i];
if(box.checked){
box.parentNode.removeChild(box);
txt.parentNode.removeChild(txt);
}
}
}
</script>
<html>
<body>
<form action="" method="post">
<table border="1" id="table">
<tr> <td colspan="2">Select Technolgy:</td> </tr>
<tr> <td>c</td>
<td><input type="checkbox" name="techno[]" value="c" class='chk'></td>
</tr>
<tr> <td>hadoop</td>
<td><input type="checkbox" name="techno[]" value="hadoop" class = 'chk'></td>
</tr>
<tr> <td>core java</td>
<td><input type="checkbox" name="techno[]" value="Core JAVA" class='chk'></td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />
<input type="button" value="Delete checked boxes" onclick = "delBoxes();" />
</form>
</body>
</html>
Using this code, I candelete the checked checkbox. But how can I remove the checked checkbox containing row of table in the form?
I've read through this question, but it didn't help me.
Editing your code you can do it like this
function delBoxes() {
var boxes = document.getElementsByClassName('chk');
var texts = document.getElementsByClassName('txt');
for (var i = 0; i < boxes.length; i++) {
box = boxes[i];
if (box.checked) {
rowTag = box.parentNode.parentNode;
tableTag = box.parentNode.parentNode.parentNode;
tableTag.removeChild(rowTag);
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
<form action="" method="post">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr>
<td>c</td>
<td>
<input type="checkbox" name="techno[]" value="c" class='chk'>
</td>
</tr>
<tr>
<td>hadoop</td>
<td>
<input type="checkbox" name="techno[]" value="hadoop" class='chk'>
</td>
</tr>
<tr>
<td>core java</td>
<td>
<input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
</td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class='chk' />and
<input type="text" class='txt' />
<input type="button" id="deleteButton" value="Delete checked boxes" />
</form>
But you have to consider changing design to something better. Set ids or classes and refer to them, instead of relative "magic number of levels".
If you mark rows with data-tech attribute then you could do something like:
function delBoxes() {
var classname = document.getElementsByClassName("chk");
for (var i = 0; i < classname.length; i++) {
box = classname[i]
if (box.checked) {
elements = document.querySelectorAll('[data-tech="' + box.value + '"]');
elements[0].parentNode.removeChild(elements[0]);
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
<form action="" method="post">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr data-tech="c">
<td>c</td>
<td>
<input type="checkbox" name="techno[]" value="c" class='chk'>
</td>
</tr>
<tr data-tech="hadoop">
<td>hadoop</td>
<td>
<input type="checkbox" name="techno[]" value="hadoop" class='chk'>
</td>
</tr>
<tr data-tech="Core JAVA">
<td>core java</td>
<td>
<input type="checkbox" name="techno[]" value="Core JAVA" class='chk'>
</td>
</tr>
<input type="button" value="Click" id="btntest" />
<input type="checkbox" class='chk' /> and
<input type="text" class='txt' />
<input type="button" id="deleteButton" value="Delete checked boxes" />
</form>
I have designed a table below using HTML. I have validated for only one row, but for the 2nd row it was not validated. Below UI have given submit that validates entire table.
Condition is that at least one checkbox should be selected from each row.
Using pure js: https://jsfiddle.net/v8mghww9/1/
function validate(form)
{
var rows = document.getElementsByTagName('tr');
var isTableValid = true;
for(var i=0;i<rows.length;i++) {
var checkboxs=rows[i].getElementsByTagName("input");
var okay=false;
for(var j=0;j<checkboxs.length;j++)
{
console.log('here' + checkboxs[j].checked);
if(checkboxs[j].checked)
{
okay=true;
break;
}
}
if(!okay && checkboxs.length > 0) {
isTableValid = false;
break;
}
}
if(isTableValid)
return true;
else
{
alert("Please select atleast one item for male patients");
return false;
}
}
Your code was fine but you weren't writing the jsfiddle the right way, this is a live snippet showing that your code works fine:
function validate(form) {
var checkboxs = document.getElementsByName("m1");
var okay = false;
for (var i = 0, l = checkboxs.length; i < l; i++) {
if (checkboxs[i].checked) {
okay = true;
break;
}
}
if (okay) return true;
else {
alert("Please select atleast one item for male patients");
return false;
}
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 0.5em;
line-height: 1.5em;
}
#color {
background-color: lightblue;
}
.adjust {
text-align: left;
}
input[type="checkbox"] {
margin-left: 47%;
}
<table border="1" width="100%">
<tr>
<th rowspan="3">OAB Patient Types</th>
<th colspan="6" id="color">Therapy of First Choice</th>
</tr>
<tr>
<th colspan="4" id="color">Muscarinic Antagonists</th>
<th style="background-color:lightblue">Beta-3 Adrenergic Agonist</th>
<th style="background-color:lightblue">Other Therapies</th>
</tr>
<tr>
<th>Detrol LA
<br>(tolterodine)</th>
<th>Enablex
<br>(darifencian)</th>
<th>Toviaz
<br>(festoridine)</th>
<th>VESIcare
<br>(solifencian)</th>
<th>Myrbetriq
<br>(merabergan)</th>
<th>Other</th>
</tr>
<tr>
<th colspan="7" id="color" class="adjust">General Patient Types</th>
</tr>
<tr>
<td>Male Patients</td>//
<form name=form1>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>//</form>
</tr>
<tr>
<td>Female Patients</td>
<form name=form2>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<!-- <td><input type="submit" value="submit"></td> -->
</form>
</tr>
<tr>
<th colspan="7" id="color" class="adjust">Line of Therapy</th>
</tr>
<tr>
<td>First-line (newly daignosed OAB patients on their first course of therapy)</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
<tr>
<td>Second-line</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
<tr>
<td>Third-line</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
</table>
<br>
<br>
<center>
<input type="button" value="Submit" onclick='return validate()'>
</center>
Note:
The button Submit should be of type button and not submit.
First thing because it's not inside any form to be submitted
Second thing is that you have many forms in your page (which is strange here), so you may have a conflict in submitting which form of them wityh this submit button?
give the same name on all the checkboxes of each row and then give it a class to all which you want to validate.
function validate() {
var flag = true;
var array = [];
$(".js-validate-required-radio").each(function () {
array.push($(this).prop('name'));
});
var uniqueNames = $.unique(array);
for (var i = 0; i < uniqueNames.length; i++) {
if ($('input:checkbox[name=' + uniqueNames[i] + ']:checked').val() == undefined) {
if (flag) {
flag = false;
}
}
}
if(!flag){
alert('select atleast one radio on each row');
}
else{
alert('yeee');
}
return flag;
}
here is fiddle
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)"/>
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="myFunction(this)" />
</td>
</tr>
</table>
I want to clear textbox when we corresponding checkboc is checked. Here is my Java script,
<script type="text/javascript" language="javascript">
function CheckCheckboxes1(chk){
if(chk.checked == true)
{
var txt = document.getElementById('TextBox1');
txt.value = "";
txt.disabled = false;
}
else
{
var txt = document.getElementById('TextBox1');
txt.value = "Enter Username";
txt.disabled = true;
}
}
</script>
Any idea?
In order to get the corresponding textbox, you can't get it by ID. Instead you should get the inputs parent table row and then find the input from there, so that it is relative to the checkbox.
Working demo
function CheckCheckboxes1(chk){
var txt = chk.parentNode.parentNode.cells[2].getElementsByTagName('input')[0];
if(chk.checked == true)
{
txt.value = "";
txt.readOnly = false;
}
else
{
txt.value = "Enter Username";
txt.readOnly = true;
}
}
Notes:
Use txt.readOnly not txt.disabled because disabled is something different.
Use the checkbox onchange event not onclick.
Hi in order to disable and enable you need to assign the id's to both checkbox and textboxs. please look at the below code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript">
function CheckCheckboxes1(chk){
if(chk.checked == true)
{
var txt = document.getElementById('TextBox'+chk.id);
txt.value = "";
txt.disabled = false;
}
else
{
var txt = document.getElementById('TextBox'+chk.id);
txt.value = "Enter Username";
txt.disabled = true;
}
}
</script>
</head>
<body>
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox1" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" id="1" onclick="CheckCheckboxes1(this)"/>
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox2" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="2" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>`enter code here`
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox3" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="3" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox4" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="4" onclick="myFunction(this)" />
</td>
</tr>
</table>
</body>
</html>
As #Adil said it is easier if you use jQuery. You can give your textbox an id and your checkbox a cutstom attribute e.g.:
<td>
<input type="text" id="txt_1" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" specId="1" onclick="CheckCheckboxes1(this)"/>
</td>
function CheckCheckboxes1(chk){
var specId = $(chk).attr("specId");
var txt = $("#txt_"+specId);
if(chk.checked == true)
{
$(txt).val("");
$(txt).attr("disabled","disabled");
}
else
{
$(txt).val("Enter Username");
$(txt).removeAttr("disabled");
}
}
Hope it helps!
I am trying to do simple form validation by using jQuery. Actually I am try to validate the input boxes on blur and focus. I am just validating first input for now which validate user first name.It is not functioning properly.
Can any please help me?
HTML & JS 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Test
</title>
<style type="text/css">
.showerror{
display:block;
}
.noshowerror{
display:none;
}
.remerr{
display:none;
}
.redborder{
border:#F00 solid 1px;
background-color:yellow;
}
.greenborder {
border:#0F3 solid 1px;
background-color:#6F6;
}
</style>
</head>
<body>
<div style="width:450px">
<div style="float:left">
<table>
<form id="eg">
<tr>
<td>
<label>
Name:
</label>
<td>
<input type="text" id="name" />
</tr>
<tr>
<td>
<label>
Surname:
</label>
<td>
<input type="text" id="surname" />
</tr>
<tr>
<td>
<label>
Email:
</label>
<td>
<input type="text" id="email" />
</tr>
<tr>
<td>
<label>
Number:
</label>
<td>
<input type="text" id="number" />
</tr>
<tr>
<td>
<label>
Age:
</label>
<td>
<input type="text" id="age" />
</tr>
<tr>
<td>
<label>
Comment:
</label>
<td>
<input type="text" id="comment" />
</tr>
<tr>
<td>
<label>
Password
</label>
<td>
<input type="password" id="pwd" />
</tr>
<tr>
<td>
<label>
Confirm Password
</label>
<td>
<input type="password" id="cnfmpwd" />
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" />
</td>
</tr>
</form>
</table>
</div>
<div style="float:right">
<p id="fail" class="noshowerror" >
Please enter name
</p>
<p id="nameerr2" class="remerr">
Name is correct
</p>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
var fname = document.getElementById("name").value;
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
} else if (fname == " ") {
$("#name").addClass('redborder');
} else {
$("#name").addClass('greenborder');
return false;
}
});
});
</script>
</body>
</html>
Thanks in advance
I have refined our code and its working as you intended, there were several mistake in defining the elements within table,may be you can have a look at my code on how to define it .
LIVE DEMO
HTML CODE:
<body>
<div style="width:450px">
<div style="float:left">
<form id="eg" action="/">
<table>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" id="name" />
</td>
</tr>
<tr>
<td>
<label>Surname:</label>
</td>
<td>
<input type="text" id="surname" />
</td>
</tr>
<tr>
<td>
<label>Email:</label>
</td>
<td>
<input type="text" id="email" />
</td>
</tr>
<tr>
<td>
<label>Number:</label>
</td>
<td>
<input type="text" id="number" />
</td>
</tr>
<tr>
<td>
<label>Age:</label>
</td>
<td>
<input type="text" id="age" />
</td>
</tr>
<tr>
<td>
<label>Comment:</label>
</td>
<td>
<input type="text" id="comment" />
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" id="pwd" />
</td>
</tr>
<tr>
<td>
<label>Confirm Password</label>
</td>
<td>
<input type="password" id="cnfmpwd" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" onclick="return false;" />
</td>
</tr>
</table>
</form>
</div>
</div>
<div style="float:right">
<p id="fail" class="noshowerror">Please enter name</p>
<p id="nameerr2" class="remerr">Name is correct</p>
</div>
</body>
JS CODE:
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
// var fname = document.getElementById("name").value;
var fname = $("#name").val();
alert(nameRegex.test(fname));
if (!(nameRegex.test(fname))) {
$("#name").removeClass('greenborder').addClass('redborder');
} else if (fname == " ") {
$("#name").removeClass('greenborder').addClass('redborder');
} else {
$("#name").removeClass('redborder').addClass('greenborder');
return false;
}
});
});
When your using jQuery lib, make sure you make the most of it, i have seen that there was raw javascript syntax in your code. jQuery was designed make things easier by reducing the syntax.
Edited:
I have refined the code, so that the code work on any number of times.
Happy Coding :)
$('#name').blur(function(){
trigger the blur event.
To listen for the blur event, made by the user :
$('#name').on("blur", function(){
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
can be changed by :
<input type="text" name="name" id="name" placeholder="Name Please" />
http://www.w3schools.com/tags/att_input_placeholder.asp
For your issue :
var fname = $("#name").val(); //jQuery style
$('#name').on("blur", function(){
// we want element #name a range of letters
var regexp = /^([A-Za-z])+$/;
// if the element #name contains a range of letters defined in var regexp
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
return true;
}
// if the element #name is empty, does not contain string
if ( $("name").length === 0 ) {
$("#name").addClass('redborder');
return true;
}
// if we are still here, means that the element #name is valid
$("#name").addClass('greenborder');
return false;
}
// on focus name input
$("#name").on("focus", function() {
// if the input get the redborder class, then reset
if ( fname.hasClass("redborder") ){
fname.removeClass("redborder");
}
}
I have a simple table with a series of Yes/No radio button questions and have added some Javascript that should apply a red colour to the label of an adjacent text area input. It's working but not for the first row in the table - all other rows it works.
Here's a cutdown version of the html for the first 3 rows in the table:
<table width="71%" class="record">
<tr>
<td width="63%" valign="top" class="field_name_left"><p><strong>Section 1</strong><br>
(a) section 1A.</p>
</td>
<td width="11%" valign="top" class="field_data">
<input type="radio" name="Scale1A" value="Yes" validate = "required:true " class = "radioClick">Yes
<input type="radio" name="Scale1A" value="No" validate = "required:true " class = "radioClick">No <label for = "Scale1A" class = "error">Please ensure this is completed</label> </td>
<td width="26%" valign="top" class="field_data">
<span class="field_name_left style1" id = "Scale1AWhereLabel"><strong>Where:</strong></span>
<textarea id = "Scale1AWhere" class="where" name="Scale1AWhere" cols="25" rows="2" validate="required:'input[name=Scale1A][value=Yes]:checked'"> </textarea>
<label for = "Scale1AWhere" class = "error">Please ensure this is completed</label> </td>
</tr>
<tr>
<td valign="top" class="field_name_left"> (b) section 1B.</td>
<td valign="top" class="field_data"> <input type="radio" name="Scale1B" value="Yes" validate = "required:true " class = "radioClick" />
Yes <input type="radio" name="Scale1B" value="No" validate = "required:true " class = "radioClick" />
No <label for = "Scale1B" class = "error">Please ensure this is completed</label> </td>
<td valign="top" class="field_data"><span class="field_name_left style1" id = "Scale1BWhereLabel"><strong>Where:</strong></span>
<textarea id = "Scale1BWhere" class="where" name="Scale1BWhere" cols="25" rows="2" validate="required:'input[name=Scale1B][value=Yes]:checked'"></textarea> <label for = "Scale1BWhere" class = "error">Please ensure this is completed</label> </td>
</tr>
<tr>
<td width="63%" valign="top" class="field_name_left"><strong>Section 2.</td>
<td valign="top" class="field_data">
<input type="radio" name="Scale2" value="Yes"validate = "required:true" class="radioClick">Yes <input type="radio" name="Scale2" value="No"validate = "required:true" class="radioClick">No <label for = "Scale2" class = "error">Please ensure this is completed</label> </td>
<td valign="top" class="field_data">
<span class="field_name_left style1" id = "Scale2WhereLabel"><strong>Where:</strong></span>
<textarea id = "Scale2Where" class="where" name="Scale2Where" cols="25" rows="2" validate="required:'input[name=Scale2][value=Yes]:checked'"></textarea> <label for = "Scale2Where" class = "error">Please ensure this is completed</label></td>
</tr>
<tr class="submit_btn">
<td colspan="3">
<input type="submit" name="-edit" value="Finish">
<input type="reset" name="reset" value="Reset"> </td>
</tr>
</table>
and here's my script:
$(".radioClick").click(function(){
theStr = $("#"+this.name+"Where").val().length;
if($(this).val()=="Yes" && theStr == 0){
$("#"+this.name+"WhereLabel").addClass("emphasise");
} else {
$("#"+this.name+"WhereLabel").removeClass("emphasise");
}
$(".where").keyup(function(){
str = this.value.length;
if(str == 0){
$("#"+this.name + "Label").addClass("emphasise");
}else{
$("#"+this.name + "Label").removeClass("emphasise");
}
});
});
$.metadata.setType("attr", "validate");
$("#editRecord").validate();
You can see this in action over at this jsFiddle
For some reason that I can't fathom the Where label for the Question 1A is never changed to red when the Yes button is clicked, but is for all others?
Issue is an extra space in your text area. You need to trim it. or remove it.
theStr = $.trim($("#"+this.name+"Where").val()).length;
Extra space in the text area:-
<textarea id = "Scale1AWhere" class="where"
name="Scale1AWhere" cols="25" rows="2"
validate="required:'input[name=Scale1A][value=Yes]:checked'"> </textarea>
Fixed Code