Post multiple clicks in a table to different consecutive input text boxes - javascript

I have the following partially completed code example that clicking on any table cell populates the firstinput text box. I'd like 2nd and 3rd clicks in the table to populate the 2nd and 3rd input fields. And if a fourth text cell is clicked, it starts the count over by populating from the first field, etc.
There's also a small bug in the function that when the page first loads, it doesn't recognize the first mouse click. It takes a 2nd click to populate the first field.
Thank you in advance for helping me solve this and learn from it. :)
<html>
<head>
<style>
td:hover { cursor: hand; color: blue; font-weight: bold; background: #FFDE00; }
</style>
</head>
<body >
<p>Click on a cell to have it populate the text fields below<p>
<table border="1" onclick="populateFields()" style=font-size:11; cellspacing="1" cellpadding="5">
<tr><td>apple</td><td>orange</td><td>banana</td><td>peach</td></tr>
<tr><td>tomato</td><td>potato</td><td>onion</td><td>garlic</td></tr>
<tr><td>chicken</td><td>fish</td><td>beef</td><td>pork</td></tr>
</table>
<form>
<p>The cells you clicked on contain this data:</p>
<input type="text" name="item1" id="txtCellData"></input>
<input type="text" name="item2" id="textCellData2"></input>
<input type="text" name="item3" id="textCellData3"></input>
</form>
<script>
function populateFields(){
//put all tds in an array
var alltds = document.getElementsByTagName("td");
//go through each item in the array
for (var i in alltds) {
alltds[i].onclick = function (){
txtCellData.value = this.innerHTML;
}
}
}
function setThis(value) {
document.getElementById("txtCellData").value = value;
}
</script>
</body>
</html>

Created a fiddle for you . Look at this code
<body onload=populateFields() >
<p>Click on a cell to have it populate the text fields below<p>
<table border="1" onclick="populateFields()" style=font-size:11; cellspacing="1" cellpadding="5">
<tr><td>apple</td><td>orange</td><td>banana</td><td>peach</td></tr>
<tr><td>tomato</td><td>potato</td><td>onion</td><td>garlic</td></tr>
<tr><td>chicken</td><td>fish</td><td>beef</td><td>pork</td></tr>
</table>
<form>
<p>The cells you clicked on contain this data:</p>
<input type="text" name="item1" id="txtCellData"></input>
<input type="text" name="item2" id="textCellData2"></input>
<input type="text" name="item3" id="textCellData3"></input>
</form></body>
<script>
var index=0;
function populateFields(){
//put all tds in an array
var alltds = document.getElementsByTagName("td");
//go through each item in the array
for (var i in alltds) {
alltds[i].onclick = function (){
if(index==1){txtCellData.value = this.innerHTML;}
else{
setThis(this.innerHTML);
}
}
}
if(index<3){
index++;
}else{
index = 1;
}
alert(index);
}
function setThis(value) {
document.getElementById("textCellData"+index).value = value;
}
</script>

Related

How to create a text area word counter?

I created a couple inputs that feed into a JavaScript command to create custom sentences. Whatever the user inputs or selects is added to a sentence framework. When the user selects submit, the sentence is created in a textarea. How can I add a feature to my app that counts the words within the textarea? I simply want a small text box to the bottom right of the text area that states how many words are in the text area.
Thanks so much for your help!
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<style type="text/css">
table,td,th {margin-left: auto;margin-right: auto}
.display {display: flex;align-items: center;justify-content: center;}
p {text-align: center;}
textarea {display: block;margin-left:auto;margin-right: auto;}
.chosen-select {width:200px}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
function sentence() {
document.getElementById("s1").value = "";// reset
document.getElementById("s1").style.display = "block";
document.getElementById("r1").style.display = "block";
if (document.getElementById("z1").value == "") {
alert("Year, Make, and Model are needed");
document.getElementById("z1").focus();
}
else {
const input1 = document.getElementById("z1").value;
var input3 = $('#z3').val();
console.log(input3);
var input3Formatted = "";
if(input3.length==1){
// Only one value...
input3Formatted = input3[0];
}
if(input3.length==2){
// Two values... Just add and "and"
input3Formatted = input3[0]+" and "+input3[1];
}
if(input3.length>2){
// more than 2 values...
for(i=0;i<input3.length-1;i++){
input3Formatted += input3[i]+", ";
}
input3Formatted += "and "+input3[input3.length-1];
}
const input5 = "It has minor curb rash on the "+input3Formatted+"."
const input7 = document.getElementById("z5").value;
document.getElementById("s1").value =
"This is my " +input1+ ". It is in good condition.The vehicle's rims have curb rash. "+input5+" The "+input1+"'s color is "+input7+"."
}
}
function reset() {
document.getElementById("s1").value = "";
}
</script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen({
disable_search_threshold: 4
})
});
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100" >
</td>
<td>
<select data-placeholder="Minor Curb Rash" name="minorrash" multiple class="chosen-select" id="z3">
<option value=""></option>
<option value="front left rim">Front Left Rim</option>
<option value="back left rim">Back Left Rim</option>
<option value="front right rim">Front Right Rim</option>
<option value="back right rim">Back Right Rim</option>
</select>
</td>
<td>
<input type="text" id="z5" placeholder="Color" name="name" maxlength="100">
</td>
</tr>
</table>
<br>
<div class="display">
<button onclick="sentence()"> Submit </button>
</div>
<hr>
<br>
<textarea rows="10" cols="100" id="s1"></textarea>
<br>
<div class="display">
<button onclick="reset()" id="r1">Reset</button>
</div>
</body>
</html>
i don t know if this is what are you trying, this is what I understood of your question:
<script type="text/javascript">
var nameValidationInput = document.getElementById('s1');//here you search in your text area al the words
function useValue() {
var NameValue = nameValidationInput.value;
document.getElementById("demo").innerHTML = NameValue.split(" ").length // here you count the word separated by a space
}
</script>
<br>
<textarea rows="1" cols="5" id="demo"></textarea>// just to show the count in the text area
<br>
in this way the function will count each word separated for a space (if you want something more detailed if will be a much more dificult)
Well, the simplest way to do it is to store all the text from the textarea in an array (separated by white spaces). You can use .split to achieve that. Once done, then simply get the length of the array. It'll return the world count.
Try this.
var splitData = textarea.value.split(" ");
var wordCount = splitData.length;
I will leave a another version of what was sugested. Using length is not enough because it will count every whitespace as a word, and at the begining it will count 1 word even when its empty. I sugest using trim() and filter to prevent those bugs, for example:
wordsArr = text.trim().split(" ")
wordsArr.filter(word => word !== "").length

Move input between divs

Trying to move user input from one div to another via a move button, back and forth. Even if there is multiple inputs one can move selected input from one to the other.
So far it moves all inputs in "field1" to "field2". Im trying to move only a single line back and forth.
Tried various stuff, still learning this. Any pointers on what i need to look at in order to achieve this?`
Any help appreciated.
var number = [];
function myNotes() {
var x = document.getElementById("field1");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<input type="button" value="move" onclick="move();"/><br/>');
}
function move() {
$('#field1').appendTo('#field2')
}
form {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="input" type=text>
</form>
<input type=submit onclick="myNotes();" value="Send">
<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1"></div>
<h2>Field 2</h2>
<div id="field2"></div>
JSFIDDLE
You've got a mixture of javascript and jQuery going that's kind of hard to understand. I've whipped up an example of this using jQuery, since you seem to have it in your project anyway:
https://jsfiddle.net/j5mvq6L5/7/
HTML:
<form>
<input id="input" type=text>
</form>
<input type=submit id="btnSend" value="Send">
<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1" class="field"></div>
<h2>Field 2</h2>
<div id="field2" class="field"></div>
JS:
//listen for document ready
$(document).ready(function() {
//button click listener:
$("#btnSend").on("click", function(e) {
var $field1 = $("#field1"); //works like getElementById
//create a containing div for later
var $entry = $("<div></div>").addClass("entry");
//create a new button
var $btnMove = $("<input/>").attr("type", "button").attr("value", "move").addClass("btnMove");
//click listener for the new button
$btnMove.click(function(){
//find "sibling" field (I added a class to both), append this button's parent div
$(this).parents(".field").siblings(".field").append($(this).parent());
});
//append entry parts
$entry.append($("#input").val())
.append($btnMove);
//append entry to #field1
$field1.append($entry);
});
});
CSS:
form {
display: inline;
}
.btnMove {
margin-left: .5em;
}

How can I have multiple checkboxes appear when initial checkbox is checked (using PHP/Javascript)

I am trying to implement a small part of my program where when an initial checkbox is clicked, it would open multiple checkboxes are opened up for selection. I don't want to use forloop (or dynamically) to create the multiple checkboxes but I need to manually create them.
My program is below and I am not sure why it doesn't work. If someone can kindly pleaes point me to my mistake, I would greatly appreciate. I am not skilled with PHP/JavaScript.
Thanks!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
<script type="text/javascript">
$(document).ready(function() {
//set initial state.
$('#checkbox').val($(this).is(':unchecked'));
$('#checkbox').change(function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
document.myForm.appendChild(box);
hasBox = true;
}
});
});
</script>
</head>
<body>
<p>Click on this paragraph.</p>
<form action="">
<input id="checkbox" name="click" type="checkbox" onclick="check(this)"/>initial checkbox<br>
</body>
</html>
You can also do this with CSS:
.secondary-checkboxes
{
display: none;
}
.primary-checkbox:checked ~ .secondary-checkboxes
{
display: initial;
}
<input type="checkbox" class="primary-checkbox"> Primary checkbox
<br>
<div class="secondary-checkboxes">
<input type="checkbox"> Secondary checkbox 1
<br>
<input type="checkbox"> Secondary checkbox 2
<br>
<input type="checkbox"> Secondary checkbox 3
<br>
</div>
Source: this Stack Overflow question
Your on the right track.
You have a few problems in your code.
1) You forgot to enclose your new checkbox tag within quotation marks.
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
should be:
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
Also note the change from type "chkbox" to "checkbox"
2) To set the initial state for a checkbox I would use the inbuilt prop function in JQuery. For example:
$('#checkbox').prop('checked', false);
rather than your code of:
$('#checkbox').val($(this).is(':unchecked'));
3) The last problem is when you append the new checkbox to the form. The way that i would do this is using JQuery again:
$("#myForm").append(box);
and give the form element an id of "myForm"
Please find below my full code which works to your requirements:
$(document).ready(function() {
//set initial state.
$('#checkbox').prop('checked', false);
$('#checkbox').on('click', function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
$("#myForm").append(box);
hasBox = true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Click on this paragraph.</p>
<form action="" id="myForm">
<input id="checkbox" name="click" type="checkbox"/>initial checkbox<br>
</form>
Hope that you found this useful.

how to move the selected item in a list box into a text box?

i want to move the selected item of a select tag (list box) into a text box after clicking a button. i am using the below code
<html>
<head>
<script type="text/javascript">
function copy()
{
var sel = document.getElementById('lb').value;
document.getElementById('FileName').value = sel;
}
</script>
</head>
<body>
<form name="frm1" id="frm1">
<select id="lb" name="lb" size="5">
<option value="abc.txt">abc.txt</option>
<option value="def.txt">def.txt</option>
</select>
<input type="button" value=">>" name="btn_move" id="btn_move" onclick="copy()">
<input type="text" name="FileName" id="FileName">
</form>
</body>
</html>
the above code works properly in google chrome browser but it does not work when i run the page in IE. can anyone tell me whats the problem in the code and kindly suggest a javascript or any other code which is compatible ith both google chrome and IE.
above code works after i allow the pop up that comes but
actually the below code is not working.
<html>
<head>
<title>FILE</title>
<style>
body{background-color:#b0c4de;}
#OutBound{text-align:center;}
#btn_sbmt{position:absolute;top:150px;left:700px;}
#div_text_label{position:absolute;top:50px;left:200px;}
#lbl2{position:absolute;top:80px;left:200px;}
#selected_list{position:absolute;width:300px;top:80px;left:335px;}
#btn_move{position:absolute;top:100px;left:650px;}
#FileName{position:absolute;width:300px;top:100px;left:700px;}
</style>
<script type="text/javascript">
function load_list()
{
document.getElementById('div_main_select').style.display="none";
var textbox = document.getElementById('pattern');
var listbox = document.getElementById('selected_list');
var mainListbox = document.getElementById('lb');
listbox.innerHTML = '';
for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++)
{
var child = mainListbox.children[childIndex];
option = document.createElement('option');
option.innerHTML = child.innerHTML;
listbox.appendChild(option);
}
alert (load_list_1);
}
function get_list()
{
var textbox = document.getElementById('pattern');
var listbox = document.getElementById('selected_list');
var mainListbox = document.getElementById('lb');
listbox.innerHTML = '';
for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++)
{
var child = mainListbox.children[childIndex];
if (child.innerHTML.search(textbox.value) != -1)
{
option = document.createElement('option');
option.innerHTML = child.innerHTML;
listbox.appendChild(option);
}
}
alert (get_list_1);
}
function copy()
{
var sel = document.getElementById('selected_list').value;
document.getElementById('FileName').value = sel;
alert (copy_1);
}
</script>
</head>
<body style="color: black; background-color: rgb(255, 255, 255); background-image: url(background-1204x927.jpg);" BGCOLOR="#ffffff" text="black" link="#B03060" vlink="#B03060" onload="load_list()">
<hr>
<form id="OutBound" name="OutBound" action="" method="GET">
<div style="text-align:center;" id="div_text_label" name="div_text_label">
<label id="lbl1" name="lbl1">search :</label>
<input type="text" name="pattern" id="pattern" onKeyUp="get_list()">
</div>
<div style="text-align:center;" id="div_main_select" name="div_main_select">
<select id="lb" name="lb" size="5">
<option value="abc.txt">abc.txt</option>
<option value="def.txt">def.txt</option>
</select>
</div>
<label id="lbl2" name="lbl2">File List:</label>
<select id="selected_list" name="selected_list" size="5">
</select><br>
<input type="button" value=">>" name="btn_move" id="btn_move" onclick="copy()">
<input type="text" name="FileName" id="FileName">
<input type="submit" name="btn_sbmt" id="btn_sbmt" value="MOVE FILES">
</form>
</body>
</html>
the page works like this..
1) there is a list box (lb) populated with some items.
2) there is 1 more empty list box (selected_list).
3) when the page form is loaded load_list() function is called which loads the empty list box (selected_list) with the contents of the original list box (lb).
4) when someone enters a word or a letter in the search text box then get_list() function is called which filters the files according to the words entered.
5) when a filename is selected in the selected_list and >> button is pressed, the copy() function is called and the filename is copied to the FILENAME text box.
but this all is not working in IE but it works in google chrome. can anyone fix the code so that it works with IE also.
Try this:
function copy() {
var sel = document.getElementById('lb');
document.getElementById('FileName').value = sel.options[sel.selectedIndex].text;
}
The code works fine (see fiddle in IE)
If you are opening the file from local file system, the IE may ask your permission to run script. You should click "Allow Blocked Content" for it to work
See image below
Try this using jQuery (1.10.1)
function copy()
{
$("#FileName").val($("#lb").val());
}
http://jsfiddle.net/7Axu8/
Update
http://jsbin.com/onayow/1

jQuery to get Hidden Field Value in Table Row

I have a table with a hidden field in each row. I need to Alert the value of hidden field when a button in that row is clicked. I have the following jQuery code. But it does not work. How do we make it work?
CODE: http://jsfiddle.net/Lijo/xWanB/
<script>
$(document).ready(function () {
//"Show ID" for Associate Button Click
$('.resultGridTable tr > td > .actionButtonNational').click(function () {
//"this" means show ID button
//Traversing to get the parent row and then the required columns in the row
var associateID = $(this).parents('tr:first > .wrapperDivHidden input[type=hidden]').val();
alert(associateID);
return false;
});
});
</script>
HTML
<td>
XXXXX
<input type="submit" name="ctl00$detailContentPlaceholder$grdSubscribedAssociates$ctl04$btnNational"
value="Show ID" id="detailContentPlaceholder_grdSubscribedAssociates_btnNational_2"
class="actionButtonNational" style="color: White; background-color: #A7A7A6;
font-weight: bold; width: 60px" />
<div id="wrapperDivHidden" class="wrapperDivHidden">
<input type="hidden" name="ctl00$detailContentPlaceholder$grdSubscribedAssociates$ctl04$hdnAssociateID"
id="detailContentPlaceholder_grdSubscribedAssociates_hdnAssociateID_2"value="789345680" />
</div>
</td>
your selector starts with tr:first > .wrapperDivHidden ... but .wrapperDivHidden is not an immediate child of tr so change your selector like so:
$(this).parents('tr').find('.wrapperDivHidden input[type="hidden"]').val();
Fiddle: http://jsfiddle.net/xWanB/3/
Try this:
<script type="text/javascript">
$(document).ready(function () {
//"Show ID" for Associate Button Click
$('.actionButtonNational').click(function () {
var associateID = $('input[type=hidden]', $(this).closest("td")).val();
alert(associateID);
return false;
});
});
</script>
Here is an over simplified example of what you are trying to do:
http://jsfiddle.net/6S5rD/
if the first column of your row is hidden then use this
var x = $('input[type=hidden]', $(this).find("td:first")).val();

Categories