I have typed the following code in Front Page and it gives error in displaying Radio Button Values (as undefined):
function f1() {
var fn = document.frm.T1.value;
var ln = document.frm.T2.value;
var ad = document.frm.S1.value;
var sex = document.frm.R1.value;
var nat = document.frm.D1.value;
var typ = document.frm.R2.value;
var typ1 = document.frm.C1.value;
var typ2 = document.frm.C2.value;
var typ3 = document.frm.C3.value;
var budg = document.frm.R3.value;
var mail = document.frm.T5.value;
var mob = document.frm.T3.value;
var resi = document.frm.T4.value;
var city = document.frm.D2.value;
var com = document.frm.S2.value;
document.write("Welcome Dear " + fn + " " + ln + "<br>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " +
" and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" +
" You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" +
" You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com);
}
body {
background-color: #222;
}
<p align="center"> </p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<p align="center"><span style="background-color: #FFFFFF">
<font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and
out Customer Support Team will contact you shortly!</font></span>
</p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<form method="POST" name="frm" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan -->
<input TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<!--webbot bot="SaveResults" i-checksum="43374" endspan -->
<div align="left">
<table border="1" width="39%">
<tr>
<td colspan="2">
<p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>First Name</b></font>
</td>
<td>
<input type="text" name="T1" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Last Name</b></font>
</td>
<td>
<input type="text" name="T2" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Postal Address</b></font>
</td>
<td>
<textarea rows="2" name="S1" cols="20"></textarea>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Gender</b></font>
</td>
<td>
<input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE
</font>
<input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF">
FEMALE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Nationality</b></font>
</td>
<td>
<select size="1" name="D1">
<option selected value="Indian">INDIAN</option>
<option value="British">BRITISH</option>
<option value="Canadian">CANADIAN</option>
<option value="Chinese">CHINESE</option>
<option value="Japanese">JAPANESE</option>
<option value="GCC">MID EASTERN</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Looking For</b></font>
</td>
<td>
<input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY
<input type="radio" name="R2" value="Lease">LEASE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Type</b></font>
</td>
<td>
<input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1
BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK
<input type="checkbox" name="C3" value="3 BHK">3 BHK</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Budget</b></font>
</td>
<td>
<input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30
LAKHS</font>
<p>
<input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60
LAKHS</font>
</p>
<p>
<input type="radio" name="R3" value="MORE
THAN 60 LAKHS"><font color="#FFFFFF">MORE
THAN 60 LAKHS</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">E-Mail ID</font>
</td>
<td>
<input type="text" name="T5" size="20">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">Phone Number</font>
</td>
<td>
<input type="text" name="T3" size="20">
<font color="#FFFFFF">Mob</font>
<p>
<input type="text" name="T4" size="20"><font color="#FFFFFF">
Res</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Preferred City</b></font>
</td>
<td>
<select size="1" name="D2">
<option selected value="Mumbai">MUMBAI</option>
<option value="Bangalore">BANGALORE</option>
<option value="Pune">PUNE</option>
<option value="Ahmedabad">AHMEDABAD</option>
<option value="Kochi">KOCHI</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Comments</b></font>
</td>
<td>
<textarea rows="2" name="S2" cols="20"></textarea>
</td>
</tr>
</table>
</div>
<p align="left">
<input type="submit" value="Inquire" name="B1" onclick="f1()">
<input type="reset" value="Reset" name="B2">
</p>
</form>
<p align="center">
<a href="Home.htm">
<img border="0" src="home_1.png" width="75" height="72">
</a>
</p>
Rest of the things are working except radio buttons. Kindly help with a solution for the same. Thank you in advance
<form>
What color do you prefer?<br>
<input type="radio" name="colors" id="red">Red<br>
<input type="radio" name="colors" id="blue">Blue
</form>
<button onclick="check()">Check "Red"</button>
<button onclick="uncheck()">Uncheck "Red"</button>
<script>
function check() {
document.getElementById("red").checked = true;
}
function uncheck() {
document.getElementById("red").checked = false;
}
</script>
link:-http://www.w3schools.com/jsref/prop_radio_checked.asp
All Radio Buttons has the same name. So you have to select the checked radio button by using document.querySelector('input[name=R1]:checked').value. I have even checked for unselected checkbox value as "Empty"
function f1() {
var fn = document.frm.T1.value;
var ln = document.frm.T2.value;
var ad = document.frm.S1.value;
var sex = document.frm.R1.value;
var nat = document.frm.D1.value;
var typ = document.frm.R2.value;
var typ1 = document.frm.C1.value;
var typ2 = document.frm.C2.value;
var typ3 = document.frm.C3.value;
var budg = document.frm.R3.value;
var mail = document.frm.T5.value;
var mob = document.frm.T3.value;
var resi = document.frm.T4.value;
var city = document.frm.D2.value;
var com = document.frm.S2.value;
document.write("Welcome Dear " + fn + " " + ln + "<br/>" + "Your Sex is " + ((document.querySelector('input[name=R1]:checked'))?document.querySelector('input[name=R1]:checked').value:"Empty") + "<br/>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " +
" and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" +
" You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" +
" You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com);
}
body {
background-color: #222;
}
<p align="center"> </p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<p align="center"><span style="background-color: #FFFFFF">
<font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and
out Customer Support Team will contact you shortly!</font></span>
</p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<form method="POST" name="frm" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan -->
<input TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<!--webbot bot="SaveResults" i-checksum="43374" endspan -->
<div align="left">
<table border="1" width="39%">
<tr>
<td colspan="2">
<p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>First Name</b></font>
</td>
<td>
<input type="text" name="T1" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Last Name</b></font>
</td>
<td>
<input type="text" name="T2" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Postal Address</b></font>
</td>
<td>
<textarea rows="2" name="S1" cols="20"></textarea>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Gender</b></font>
</td>
<td>
<input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE
</font>
<input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF">
FEMALE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Nationality</b></font>
</td>
<td>
<select size="1" name="D1">
<option selected value="Indian">INDIAN</option>
<option value="British">BRITISH</option>
<option value="Canadian">CANADIAN</option>
<option value="Chinese">CHINESE</option>
<option value="Japanese">JAPANESE</option>
<option value="GCC">MID EASTERN</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Looking For</b></font>
</td>
<td>
<input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY
<input type="radio" name="R2" value="Lease">LEASE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Type</b></font>
</td>
<td>
<input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1
BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK
<input type="checkbox" name="C3" value="3 BHK">3 BHK</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Budget</b></font>
</td>
<td>
<input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30
LAKHS</font>
<p>
<input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60
LAKHS</font>
</p>
<p>
<input type="radio" name="R3" value="MORE
THAN 60 LAKHS"><font color="#FFFFFF">MORE
THAN 60 LAKHS</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">E-Mail ID</font>
</td>
<td>
<input type="text" name="T5" size="20">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">Phone Number</font>
</td>
<td>
<input type="text" name="T3" size="20">
<font color="#FFFFFF">Mob</font>
<p>
<input type="text" name="T4" size="20"><font color="#FFFFFF">
Res</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Preferred City</b></font>
</td>
<td>
<select size="1" name="D2">
<option selected value="Mumbai">MUMBAI</option>
<option value="Bangalore">BANGALORE</option>
<option value="Pune">PUNE</option>
<option value="Ahmedabad">AHMEDABAD</option>
<option value="Kochi">KOCHI</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Comments</b></font>
</td>
<td>
<textarea rows="2" name="S2" cols="20"></textarea>
</td>
</tr>
</table>
</div>
<p align="left">
<input type="submit" value="Inquire" name="B1" onclick="f1()">
<input type="reset" value="Reset" name="B2">
</p>
</form>
<p align="center">
<a href="Home.htm">
<img border="0" src="home_1.png" width="75" height="72">
</a>
</p>
You can do this either by jQuery or jsvascript
In jQuery use $('input[name="R1"]:checked').val(); here R1 is your checkbox name
In javascript get the dom elements by name and loop through the elements to get the selection.
I have attached a sample code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function ChangeSelection() {
//Using Jquery
var selection = $('input[name="R1"]:checked').val();
console.log("jQuery Result - " + selection);
//Javascript
var radios = document.getElementsByName('R1');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
//Selected Radio
selection = radios[i].value;
// only one radio can be logically checked, don't check the rest
break;
}
}
console.log("JavaScript Result - " + selection);
}
</script>
</head>
<body>
<input type="radio" value="MALE" name="R1" onclick="ChangeSelection()"><font>MALE</font>
<input type="radio" value="FEMALE" name="R1" onclick="ChangeSelection()"><font>FEMALE</font>
</body>
</html>
Related
I am creating an enquiry form for which user can input their information and display all the data in pop up windows.
Everything can show up except for multiple choice selection which only show a single output.
I want to show all the output which I select.
For example: When I select Green and Blue as the color, It only show 1 color which is Green.
Look at this image screenshot here:
Hoping someone can help me, here is my HTML and Javascript code.
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<b>Your form has been submitted! </b>"
message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
message += "<li><b>Address: </b>" + document.form1.address.value;
message += "<li><b>Email: </b>" + document.form1.email.value;
message += "<li><b>Favourite Color: </b>" + document.form1.eyeColor.value;
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Enquiry Form</h1>
<form name="form1">
<table>
<tr>
<td valign="top">
<label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
</td>
<td valign="top">
<select name="enquiryType" id="enquiryType" >
<option value="General Infomation">General Information</option>
<option value="Reservations">Reservations</option>
<option value="Rates">Rates</option>
</td>
</tr>
<tr>
<td valign="top">
<label for="Salutation">Salutation</label>
</td>
<td valign="top">
<label for="Mr">Mr</label>
<input type="radio" name="salutation" id="Mr" value="Mr">
<label for="Mrs">Mrs</label>
<input type="radio" name="salutation" id="Mrs" value="Mrs">
<label for="Miss">Miss</label>
<input type="radio" name="salutation" id="Miss" value="Miss">
<label for="male">Dr</label>
<input type="radio" name="salutation" id="Dr" value="Dr">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="20" NAME="yourname">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Adress: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="30" NAME="address">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Phone Number: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="15" NAME="phone">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="FavColor">Favourite Color</label>
</td>
<td valign="top">
<select name="eyeColor" id="eyeColor" multiple>
<option value="Green">Green</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Red">Yellow</option>
</option>
</select>
</td>
</tr>
</table>
</p>
<p><input TYPE="BUTTON" VALUE="Submit" onClick="display();"></p>
</form>
</body>
</html>
You need to replace document.form1.eyeColor.value; by Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value); then you can got selected value. From this map() method to get whole selected value.
Note: window.open() method is not working in this editor so I used alert() method for render fill-up result.
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<b>Your form has been submitted! </b>"
message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
message += "<li><b>Address: </b>" + document.form1.address.value;
message += "<li><b>Email: </b>" + document.form1.email.value;
message += "<li><b>Favourite Color: </b>" + Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value);
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
alert(message);
DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Enquiry Form</h1>
<form name="form1">
<table>
<tr>
<td valign="top">
<label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
</td>
<td valign="top">
<select name="enquiryType" id="enquiryType" >
<option value="General Infomation">General Information</option>
<option value="Reservations">Reservations</option>
<option value="Rates">Rates</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<label for="Salutation">Salutation</label>
</td>
<td valign="top">
<label for="Mr">Mr</label>
<input type="radio" name="salutation" id="Mr" value="Mr">
<label for="Mrs">Mrs</label>
<input type="radio" name="salutation" id="Mrs" value="Mrs">
<label for="Miss">Miss</label>
<input type="radio" name="salutation" id="Miss" value="Miss">
<label for="male">Dr</label>
<input type="radio" name="salutation" id="Dr" value="Dr">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="20" NAME="yourname">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Adress: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="30" NAME="address">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Phone Number: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="15" NAME="phone">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="FavColor">Favourite Color</label>
</td>
<td valign="top">
<select name="eyeColor" id="eyeColor" multiple="multiple">
<option value="Green">Green</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Red">Yellow</option>
</select>
</td>
</tr>
</table>
<p><input type="button" value="Submit" onclick="display()"></p>
</form>
</body>
</html>
You can use selected option to get selected options.
let selectedOptions= document.form1.eyeColor.selectedOptions;
let selectedValues = [];
for (let i=0; i < selectedOptions.length; i++) {
selectedValues[i] = selectedOptions[i].value;
}
console.log(selectedValues);
Hope this helps.
I have the below working script to create 2 dynamic text-box where user enters min and max values. There is a hidden text box where entered values are comma separated. But I am trying to add comma after two values.
Example:
User clicks on Add Element --> Two dynamic boxes are generated. Asking him to enter Min and Max values.
Let's imagine he enters 103 in first text box and 209 in second. I want the output in my text box (Configsize) to be as 103 - 209 Sqft.
Also want to join this Sqft.. by default. This should be appended.
This is my working website : https://getrightproperty.com/post_property.php
Text box code:
<textarea name="configsize" id="configsize"/></textarea>
J-Query code:
<script>
$(document).ready(function() {
var iCnt = 0;
// CREATE A "DIV" ELEMENT AND DESIGN IT USING jQuery ".css()" CLASS.
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '170px', border: '1px dashed',
borderTopColor: '#999', borderBottomColor: '#999',
borderLeftColor: '#999', borderRightColor: '#999'
});
$('#btAdd').click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Min Size ' + iCnt + '" />');
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Max Size ' + iCnt + '" />');
// SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
if (iCnt == 1) {
var divSubmit = $(document.createElement('div'));
$(divSubmit).append('<input type=button class="bt"' +
'onclick="GetTextValue()"' +
'id=btSubmit value=Submit />');
}
// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);
}
// AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
// (20 IS THE LIMIT WE HAVE SET)
else {
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
});
// REMOVE ONE ELEMENT PER CLICK.
$('#btRemove').click(function() {
if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }
if (iCnt == 0) {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
}
});
// REMOVE ALL THE ELEMENTS IN THE CONTAINER.
$('#btRemoveAll').click(function() {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
iCnt = 0;
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
});
});
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
function GetTextValue() {
$(divValue)
.empty()
.remove();
values = '';
var values = [];
$('.input').each(function() {
values.push(this.value);
});
$("#configsize").text(values.join(','));
}
</script>
Here is the Code::
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function (e) {
$("#form1").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function()
{
}
});
}));
});
</script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var text_max = 300;
$('#textarea_count').html(text_max + ' characters remaining');
$('#comment').keyup(function() {
var text_length = $('#comment').val().length;
var text_remaining = text_max - text_length;
$('#textarea_count').html(text_remaining + ' characters remaining');
});
});
$(document).ready(function() {
var text_max = 300;
$('#textarea_count1').html(text_max + ' characters remaining');
$('#comment1').keyup(function() {
var text_length = $('#comment1').val().length;
var text_remaining = text_max - text_length;
$('#textarea_count1').html(text_remaining + ' characters remaining');
});
});
$(document).ready(function() {
var text_max = 600;
$('#textarea_count2').html(text_max + ' characters remaining');
$('#comment2').keyup(function() {
var text_length = $('#comment2').val().length;
var text_remaining = text_max - text_length;
$('#textarea_count2').html(text_remaining + ' characters remaining');
});
});
</script>
<script>
$(document).ready(function() {
var iCnt = 0;
// CREATE A "DIV" ELEMENT AND DESIGN IT USING jQuery ".css()" CLASS.
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '170px', border: '1px dashed',
borderTopColor: '#999', borderBottomColor: '#999',
borderLeftColor: '#999', borderRightColor: '#999'
});
$('#btAdd').click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Min Size ' + iCnt + '" />');
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Enter Max Size ' + iCnt + '" />');
// SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
if (iCnt == 1) {
var divSubmit = $(document.createElement('div'));
$(divSubmit).append('<input type=button class="bt"' +
'onclick="GetTextValue()"' +
'id=btSubmit value=Submit />');
}
// ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
$('#main').after(container, divSubmit);
}
// AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
// (20 IS THE LIMIT WE HAVE SET)
else {
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
});
// REMOVE ONE ELEMENT PER CLICK.
$('#btRemove').click(function() {
if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }
if (iCnt == 0) {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
}
});
// REMOVE ALL THE ELEMENTS IN THE CONTAINER.
$('#btRemoveAll').click(function() {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
iCnt = 0;
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
});
});
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
function GetTextValue() {
$(divValue)
.empty()
.remove();
values = '';
var values = [];
$('.input').each(function() {
values.push(this.value);
});
$("#configsize").text(values.join(','));
}
</script>
<script type="text/javascript">
function updateTextArea() {
var allVals = [];
$('#mydiv :checked').each(function () {
allVals.push($(this).val());
});
$('#txtValue').val(allVals)
}
$(function () {
$('#mydiv input').click(updateTextArea);
updateTextArea();
});
</script>
</head>
<!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>Untitled Document</title>
</head>
<body>
Logout
<form action="upload.php" method="post" name="form1" id="form1" enctype="multipart/form-data">
<table border="1" align="center" cellpadding="15" cellspacing="15">
<tr valign="baseline">
<td nowrap="nowrap" align="right">Builder Name:</td>
<td><input type="text" name="property_builder" value="" class="form-control" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Name:</td>
<td><input type="text" name="property_name" value="" class="form-control" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Location:</td>
<td><input type="text" name="property_location" value="" class="form-control" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property City:</td>
<td><input type="text" name="property_city" class="form-control" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property RERA Id:</td>
<td><input type="text" name="property_rera_id" class="form-control" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property For:</td>
<td><select name="property_for" class="form-control">
<option value="Sale" <?php if (!(strcmp("Sale", ""))) {echo "SELECTED";} ?>>Sale</option>
<option value="New" <?php if (!(strcmp("New", ""))) {echo "SELECTED";} ?>>New</option>
<option value="Re-Sale" <?php if (!(strcmp("Re-Sale", ""))) {echo "SELECTED";} ?>>Re-Sale</option>
</select></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Type:</td>
<td><select name="property_type" class="form-control">
<option value="Apartment" <?php if (!(strcmp("Apartment", ""))) {echo "SELECTED";} ?>>Apartment</option>
<option value="Villa" <?php if (!(strcmp("Villa", ""))) {echo "SELECTED";} ?>>Villa</option>
<option value="Plot" <?php if (!(strcmp("Plot", ""))) {echo "SELECTED";} ?>>Plot</option>
</select></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Status:</td>
<td>
<select name="property_status" class="form-control">
<option value="Under-Construction" <?php if (!(strcmp("Under-Construction", ""))) {echo "SELECTED";} ?>>Under-Construction</option>
<option value="Pre-Launch" <?php if (!(strcmp("Pre-Launch", ""))) {echo "SELECTED";} ?>>Pre-Launch</option>
<option value="Read to move in" <?php if (!(strcmp("Read to move in", ""))) {echo "SELECTED";} ?>>Read to move in</option>
</select>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Possession:</td>
<td><input class="form-control" type="text" name="property_possession" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Configuration:</td>
<td><input class="form-control" type="text" name="property_configuration" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Price Range:</td>
<td><input class="form-control" type="text" name="property_price_range" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Launch Date:</td>
<td><input class="form-control" type="text" name="property_launch_date" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Discription 1st Para:<br /><br />
<div id="textarea_count" class="badge pull-right"></div></td>
<td><textarea class="form-control" name="1stpara" id="comment" rows="5" maxlength="300"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Discription 2nd Para:<br /><br />
<div id="textarea_count1" class="badge pull-right"></div></td>
<td><textarea class="form-control" name="2ndpara" id="comment1" rows="5" maxlength="300"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Discription 3rd Para:<br /><br />
<div id="textarea_count2" class="badge pull-right"></div></td>
<td><textarea class="form-control" name="3rdpara" id="comment2" rows="5" maxlength="600"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Amenities (List all the amenities by comma seperated values)</td>
<td><textarea name="amenities" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Select Photo (one or multiple): <br /> Note: Upload 3 Images ( Supported image format: .jpeg, .jpg, .png, .gif )</td>
<td>
<div id="uploadFormLayer">
<input name="userImage" id="inp_file" type="file" class="inputFile" /><br/>
<input id="userImage" name="userImage" type="hidden" value="">
<input name="userImage1" type="file" class="inputFile" /><br/>
<input name="userImage2" type="file" class="inputFile" /><br/>
<input name="userImage3" type="file" class="inputFile" /><br/>
<input name="userImage4" type="file" class="inputFile" /><br/>
</div>
</div>
</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Configurations</td>
<td>
<div id="mydiv">
<input type="checkbox" name="1 RK Apartment" id="1 RK Apartment" value="1 RK" onClick="dynInput(this);"/> 1 RK Apartment<br />
<input type="checkbox" name="1 BHK Apartment" id="1 BHK Apartment" value="1 BHK" onClick="dynInput(this);" /> 1 BHK Apartment<br />
<input type="checkbox" name="1.5 BHK Apartment" id="1.5 BHK Apartment" value="1.5 BHK" onClick="dynInput(this);" /> 1.5 BHK Apartment<br />
<input type="checkbox" name="2 BHK Apartment" id="2 BHK Apartment" value="2 BHK" onClick="dynInput(this);" /> 2 BHK Apartment<br />
<input type="checkbox" name="2.5 BHK Apartment" id="2.5 BHK Apartment" value="2.5 BHK" onClick="dynInput(this);" /> 2.5 BHK Apartment<br />
<input type="checkbox" name="3 BHK Apartment" id="3 BHK Apartment" value="3 BHK" onClick="dynInput(this);" /> 3 BHK Apartment<br />
<input type="checkbox" name="3.5 BHK Apartment" id="3.5 BHK Apartment" value="3.5 BHK" onClick="dynInput(this);" /> 3.5 BHK Apartment <br />
<input type="checkbox" name="4 BHK Apartment" id="4 BHK Apartment" value="4 BHK" onClick="dynInput(this);" /> 4 BHK Apartment <br />
<input type="checkbox" name="4+ BHK Apartment" id="4+ BHK Apartment" value="4+ BHK" onClick="dynInput(this);" /> 4+ BHK Apartment <br />
<textarea id="txtValue" name="config"></textarea>
</div>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Configuration Sizes</td>
<td> <div id="main">
<input type="button" id="btAdd" value="Add Element" class="bt" />
<input type="button" id="btRemove" value="Remove Element" class="bt" />
<input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br />
</div>
<textarea name="configsize" id="configsize"/></textarea>
</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Youtube Link</td>
<td><textarea name="youtubelink" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Facebook Page Link:</td>
<td><input class="form-control" type="text" name="fblink" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Twitter Page Link:</td>
<td><input class="form-control" type="text" name="TwitterPagelink" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Pincode</td>
<td><textarea name="property_pincode" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Address</td>
<td><textarea name="property_address" class="form-control"></textarea></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Google Maps URL:</td>
<td><input class="form-control" type="text" name="property_maps_url" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Latitude:</td>
<td><input class="form-control" type="text" name="property_lat" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Property Longitude:</td>
<td><input class="form-control" type="text" name="property_log" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Floor Plans:</td>
<td><div id="uploadFormLayer">
1 RK Apartment <input name="userImage6" type="file" class="inputFile" /><br/>
1 BHK Apartment <input name="userImage7" type="file" class="inputFile" /><br/>
1.5 BHK Apartment <input name="userImage8" type="file" class="inputFile" /><br/>
2 BHK Apartment <input name="userImage9" type="file" class="inputFile" /><br/>
2.5 BHK Apartment<input name="userImage10" type="file" class="inputFile" /><br/>
3 BHK Apartment <input name="userImage11" type="file" class="inputFile" /><br/>
3.5 BHK Apartment <input name="userImage12" type="file" class="inputFile" /><br/>
4 BHK Apartment <input name="userImage13" type="file" class="inputFile" /><br/>
4+ BHK Apartment <input name="userImage14" type="file" class="inputFile" /><br/>
</div></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Logo:</td>
<td><input type="file" name="image" /><br/>
</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right"> </td>
<td> </td>
</tr>
<tr valign="baseline">
<td colspan="2" align="right" nowrap="nowrap"><input type="submit" class="form-control btn-primary" value="Insert record" /></td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form1" />
</form>
<p> </p>
</body>
</html>
You need to change the "$("#configsize").text()" line as follows. Here is the fiddle https://jsfiddle.net/wrpteuak/
function GetTextValue() {
$(divValue).empty().remove();
values = '';
var values = [];
$('.input').each(function() {
values.push(this.value);
});
$("#configsize").text(values.join(' - ') + " Sqft.");
}
I built a script which is clone every child rows from the parent typing on a checkbox checked here.
It was working until now. I want each child input value to be saved by ajax. But only the last child is echoed.
JS
function cloneAllz(clsName) {
var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
//console.log($input1.attr('id'));//test master input
$input1.on('input', function() {
var $this = $(this);
window.setTimeout(function() {
if ($('input.' + clsName).is(':checked')) {
var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
$child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
console.log($this.attr('id'));
});
$input1.attr('readonly', false);
} else {
$('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
}
}, 0);
});
}
HTML
<table class="table table-bordered table-striped prdEdt">
<tr>
<th>ID</th>
<th>Code
<label class="pull-right label label-default">
<input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Title
<label class="pull-right label label-default">
<input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Cost</th>
</tr>
<tr>
<td>00067</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER KRABI AIRPORT-AO NANG" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
</td>
</tr>
<tr>
<td>00068</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER KRABI AIRPORT-AO NANG " />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
</td>
</tr>
</table>
So the question is : How to echo each row input to save them data via ajax???
function cloneAllz(clsName) {
var $input1 = $('.prdEdt').find('td.' + clsName + ' input[type="text"]').filter(':visible:first'); //master input
//console.log($input1.attr('id'));//test master input
$input1.on('input', function() {
var $this = $(this);
window.setTimeout(function() {
if ($('input.' + clsName).is(':checked')) {
var $child = $('.prdEdt').find('td.' + clsName + ' input[type="text"]');
$child.val($this.val()).attr('readonly', true).each(function() { //how to loop each input in the column???
console.log($this.attr('id'));//only first row echoed twice!
});
$input1.attr('readonly', false);
} else {
$('.prdEdt').find('td.' + clsName + ' input[type="text"]').removeAttr('readonly', ); //remove readonly
}
}, 0);
});
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped prdEdt">
<tr>
<th>ID</th>
<th>Code
<label class="pull-right label label-default">
<input type="checkbox" class="cde" onChange="cloneAllz('cde')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Title
<label class="pull-right label label-default">
<input type="checkbox" class="tt_en" onChange="cloneAllz('tt_en')" /> <em class="fa fa-clone"></em></label>
</th>
<th>Cost</th>
</tr>
<tr>
<td>00067</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
</td>
</tr>
<tr>
<td>00068</td>
<td class="cde">
<input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
</td>
<td class="tt_en">
<input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER" />
</td>
<td>
<input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
</td>
</tr>
</table>
I have written code for html table and want to navigate it up/down/left/right using arrow keys as in excel.
https://jsfiddle.net/daa3muLp/6/ is the fiddle post created. It works for up/down arrow keys and ctrl+right/left but the problem is when columns are added dynamically using add employee button.
<input type="button" value="Add Employee" id="btnAddCol" onclick="window.addCol('dataTable')" />
<table id="dataTable">
<tr id="r_0">
<th></th>
<th>Date</th>
<th>RM</th>
<th>WS</th>
<th>FH</th>
<th>OT-R</th>
<th>OT-W</th>
<th>OT-F</th>
</tr>
<tr id="r_1">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="22-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_1.1" title="ROM, Date: 1" size="1">
</td>
<td>
<input type="text" name="waste_1.1" title="Waste, Date: 1" size="1">
</td>
<td>
<input type="text" name="fh_1.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_1.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_1.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_1.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_2">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="23-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_2.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_2.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_2.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_2.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_2.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_2.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_3">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="24-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_3.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_3.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_3.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_3.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_3.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_3.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_4">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="25-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_4.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_4.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_4.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_4.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_4.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_4.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
<tr id="r_5">
<td>
<input type="checkbox" name="chkbox_1" id="check-1" class="chk" checked>
</td>
<td>
<input type="text" value="26-sep-2016" name="date_1" size="9">
</td>
<td>
<input type="text" name="rom_5.1" title="ROM, Date: 1" size="1"> </td>
<td>
<input type="text" name="waste_5.1" title="Waste, Date: 1" size="1"> </td>
<td>
<input type="text" name="fh_5.1" size="1" title="FH, Date: 1"> </td>
<td>
<input type="text" name="ot-rom_5.1" class="ot" size="1" title="OT-ROM, Date: 1"> </td>
<td>
<input type="text" name="ot-waste_5.1" class="ot" size="1" title="OT-Waste, Date: 1"> </td>
<td>
<input type="text" name="ot-FH_5.1" class="ot" size="1" title="OT-FH, Date: 1">
</td>
</tr>
</table>
<script type="text/javascript">
$(function() {
//cursor movement with keyboard js code
$('input[name^="rom_"], input[name^="waste_"], input[name^="fh_"], input[name^="ot-rom_"], input[name^="ot-waste_"],input[name^="ot-FH_"]').bind('keyup', function(e) {
var isCtrl = false;
if (window.event)
isCtrl = !!window.event.ctrlKey;
else
isCtrl = !!ev.ctrlKey;
var $this = $(this);
var $tr = $this.closest('tr');
var name = this.name.substring(0, this.name.indexOf('_'));
var str = this.name;
row = str.substring(str.indexOf("_") + 1, str.indexOf("."));
pos = str.indexOf("_") + 1;
next = str.replace(row, parseInt(row) + 1);
prev = str.replace(row, parseInt(row) - 1);
if (e.keyCode == 38) {
$('input[name="' + prev + '"]').focus();
} else if (e.keyCode == 40) {
$('input[name="' + next + '"]').focus();
} else if (isCtrl && e.keyCode == 37) {
temp = $this.closest("td").prev().children().focus();
} else if (isCtrl && e.keyCode == 39) {
$this.closest("td").next().children().focus();
}
});
});
window.addCol = function addCol(tableName) {
var countCol = parseInt($("#"+tableName).attr('data-countCol'), 10) || 1;
var row = 0;
$("#"+tableName).attr('data-countCol', ++countCol);
var tempName = $("#"+tableName+" #searchName_1").clone(false, false);
var tempToken = $("#"+tableName + " #searchToken_1").clone(false, false);
tempName.prop("value", "");
tempName.prop("readonly", true);
tempToken.prop("value", "");
tempName.attr("id", "searchName_" + countCol);
tempToken.attr("id", "searchToken_" + countCol);
tempName.prop("name", "searchName_" + countCol);
tempToken.prop("name", "searchToken_" + countCol);
$("#"+tableName+" tr:first ").append("<th colspan=\"6\"> </th>").find("th:last").wrapInner(tempName);
$("#"+tableName+ " tr:nth-child(2)").append("<th colspan=\"6\"></th>").find("th:last").wrapInner(tempToken);
$("#"+tableName +" tr:nth-child(3)").append("<th>R</th><th>W</th> <th>FH</th><th>OTR</th><th>OTW</th><th>OTFH</th>");
$('#dataTable tr:gt(2)').each(
function () {
row = row + 1;
$('<td><input type="text" size=1 name=rom_' + row + '.' + countCol + ' title= "ROM, Date: '+ row +'" onblur="validateField(this)"></td><td><input type="text" size=1 name=waste_' + row + '.' + countCol + ' title= "Waste, Date: '+ row +'" onblur="validateField(this)"></td><td><input type="text" size=1 name=fh_' + row + '.' + countCol + ' title= "FH, Date: '+ row +'" onblur="validateField(this)"></td><td><input type="text" name="ot-rom_' + row + '.' + countCol + '" title= "OT-ROM, Date: '+ row +'" size=1 class="ot" onblur="validateField(this)"> </td><td><input type="text" title= "OT-Waste, Date: '+ row +'" name="ot-waste_' + row + '.' + countCol + '" size=1 class="ot" onblur="validateField(this)"></td><td><input type="text" title= "OT-FH, Date: '+ row +'" name="ot-FH_' + row + '.' + countCol + '" size=1 class="ot" onblur="validateField(this)"> </td>').insertAfter($(this).children('td:last'));
}
);
};
</script>
I have even tried using .on() of jquery but it didn't work.
Use $(document).on('keyup','input[name^="rom_"], input[name^="waste_"]........', function(e) {
You have to bind the event to a parent element because the input doesn't exist yet.
Updated Fiddle : https://jsfiddle.net/daa3muLp/7/
hotmailI need the values entered into the form to print out on the screen when submit is pressed. How do I do the Javascript to do this. I don't know where to start so please help!
Also does it look formatted correctly, I feel i am missing some things and that using tables to format was probably the wrong way of doing it.
<script type="text/javascript">
info = document.getElementById("personalInfo");
info.innerHTML = "<strong>Peronal Info: </strong>" + "<br>" + "Name: " +
document.feedback.fname.value +
" " +
document.feedback.lname.value +
"<br>" + "Email: " +
document.feedback.email.value;
info = document.getElementById("experienceSubmit");
info.innerHTML = "<strong>Experience and Salary: </strong>" + "<br>" + "Years of experience: " +
document.feedback.experience.value +
"<br>" + "Date of availability: " +
document.feedback.date.value +
"<br>" + "Compensation Chosen: " +
document.feedback.comp.value +
"<br>" + "Region Selected: " +
document.feedback.region.value;
info = document.getElementById("otherSubmit");
info.innerHTML = "<strong>Other information: </strong>" + "<br>" + "# of References " +
document.feedback.reference.value +
"<br>" + "Additional Comments: " +
document.feedback.comments.value;
return false;
}
</script>
</head>
<body background="../Assignment 5/_images/abstract_color_background_picture_8016-wide.jpg" >
<form name="feedback" method="post" onSubmit="return checkform()">
<section id="pinfo" class="inputArea">
<fieldset>
<table>
<tr>
<td>Last Name: </td>
<td><input name="lname"
type="text"
autofocus
required
placeholder="lname"
size="25" />
</td>
</tr>
<tr>
<td>First Name: </td>
<td><input name="fname"
type="text"
size="25"
required
placeholder="fname" />
</td>
</tr>
<tr>
<td>Email: </td>
<td><input name="email"
type="email"
size="40"
required
placeholder="....#hotmail.com" />
</td>
</tr>
<td>Gender: </td>
<td><select name="gender">
<option selected disabled style='display:none;'>
Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
</table>
</fieldset>
</section>
<section id="experience">
<fieldset>
<table>
<tr>
<td>
<label for="experience">Years of Experience: </label>
<input name="experience" type="number" />
</td>
</tr>
<tr>
<td>
<label for="date">Date</label>
<input name="date" type="date" />
</td>
<tr>
<td>
<label for="comp">Compensation: </label><br>
<input name="comp" type="radio" id="Salary" value="Salary Selected">Salary
<input name="comp" type="radio" id="SalaryWB" value="Salary with bonus Selected">Salary with Bonus
<input name="comp" type="radio" id="Commission" value="Commission Selected">Commission
</td>
</tr>
<tr>
<td>
<label for="region">Region: </label><br>
<input name="region" type="checkbox" id="East" value="East Selected">East
<input name="region" type="checkbox" id="West" value="West Selected">West
<input name="region" type="checkbox" id="North" value="North Selected">North
<input name="region" type="checkbox" id="South" value="South Selected">South
</td>
</tr>
</table>
</fieldset>
</section>
<section id="other">
<fieldset>
<table>
<tr>
<td>
<label for="reference">References<br>0   1   2    3    4    5<br></label>
<input name="reference" id="reference"
type="range"
value="0"
min="0"
max="5"
step="1" />
</td>
</tr>
<tr>
<td>
<label for="comments">Additional Comments: <br></label>
<textarea
name="comments"
rows="5"
cols="20"
placeholder="Please include any other pertinent information here"></textarea> </td>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</section>
</form>
<section id="personalInfo"></section>
<section id="experienceSubmit"></section>
<section id="otherSubmit"></section>
</body>
Yes in onsubmit checkform() function do the codding of printing values...
like...
<script>
function checkform()
{
document.getElementById("outL").innerHTML=feedback.lname.value;
//like this you can do for all field
}
</script>
i have created sample for you. please check below code
$("#feedback").submit(function(e){
alert("hi");
event.preventDefault();
});
Link