Accessing text field inside html table in javascript - javascript

I want to access text placed inside rows of a dynamic table in javascript.
My table structure:-
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="650px" border="2">
<TR >
<TD><INPUT type="checkbox" name="chk[]" /></TD>
<TD ><INPUT type="text" name="txt[]" /></TD>
<TD>
<INPUT type="text" name="time[]" />
</TD>
</TR>
</TABLE>
</BR>
</BR>
<INPUT type = "button" value = "Submit" onclick = "myFunction()"></BODY>
--
Thanks

if you mean to get the whole input value in the table, you can do this.
var a = document.getElementById("dataTable").getElementsByTagName("input");
so var a became an array and inside it are elements that you wanted to get the value just use loop.
var e = a.length; // get how many input inside the table
for(x=0;x<e;x++){
console.log(a[x].name+" the value inside is "+a[x].value);
}

Do you have id for specified row? If you dont have place id on row from where you want to change text and "catch" it with javascript. function is called var a= document.getElementById('ID_OF_SAMPLE_ROW').value and text is stored into variable a. This function must be called on click or something similar so you must specify when you read and from which row.

Simply grab the elements in question with .getElementsByName(), and then return their .value. You can see whether the checkbox is checked or not with .checked.
Note that .getElementsByName() returns a NodeList collection of objects, so you'll want to grab the first result with [0].
This can be seen in the following:
function myFunction() {
let chk = document.getElementsByName('chk[]')[0].checked;
let txt = document.getElementsByName('txt[]')[0].value;
let time = document.getElementsByName('time[]')[0].value;
console.log("Checkbox checked?:", chk);
console.log("Text:", txt);
console.log("Time:", time);
}
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="650px" border="2">
<TR>
<TD>
<INPUT type="checkbox" name="chk[]" />
</TD>
<TD>
<INPUT type="text" name="txt[]" />
</TD>
<TD>
<INPUT type="text" name="time[]" />
</TD>
</TR>
</TABLE>
<BR />
<BR />
<INPUT type="button" value="Submit" onclick="myFunction()" />
</BODY>
Note that your final <input> is missing the closing /, and your </br> tags should be <br />. These have been fixed in the above example.

Related

How to fix dropdown to make one of the hidden div appear and to append

I'm a newbie and I 'm practicing creating a questionnaire that the user can add more question. So I have a dropdown with two choices: checkbox and radio button but when I click the checkbox the hidden div does not appear.
Also can I use .attr for the choices?
JSFiddle
<div class="container">
Question:
<br>
<textarea rows = "5" cols = "50" name = "description" placeholder="Enter a question">
</textarea>
<br>
<select name="choice" id="choice" onchange="selectorchecker()">
<option value="">Select choices</option>
<option value="checkbox">Checkbox</option>
<option value="radiobtn">Radio Button</option>
</select>
</div>
Add Question
<div style="display:none;" id="chkbox_choice">
<table id="dataTable" width="350px" >
<tr>
<td><input type="checkbox" name="check"/></td>
<td> <INPUT type="text" /> </td>
</tr>
</table>
<input type="button" value="Add choices" onclick="addRow('dataTable')" />
<input type="button" value="Delete choices" onclick="deleteRow('dataTable')" />
</div>
<div style="display:none;" id="rdbtn_choice">
<table id="dataTable" width="350px" >
<tr>
<td><input type="radio" name="radio"/></td>
<td> <INPUT type="text" /> </td>
</tr>
</table>
<input type="button" value="Add choices" onclick="addRow('dataTable')" />
<input type="button" value="Delete choices" onclick="deleteRow('dataTable')" />
</div>
Another way to do this would be to use the listener that you set on your <select> tag, and have it call the function you have already initialized rather than set a listener on an item that already has an onchange event attached to it.
function selectorchecker(){
var hiddenDiv = document.getElementById("chkbox_choice");
hiddenDiv.style.display = (this.value == "") ? "none":"block";
}
Also make sure the script is called before the <select> tag is initialized, so that the html knows the function exists
JSFiddle
The below script should be changed:
<select name="choice" id="choice" onchange="selectorchecker()">
...
var elem = document.getElementById("selectorchecker");
to
<select name="choice" id="choice">
...
var elem = document.getElementById("choice");
the function getElementById get the element by its id, so you should pass the id to that function
Also can I use .attr for the choices?
Yes, you can put the attr to <option>
<option value="checkbox" custom-field="custom-value">Checkbox</option>
And get it inside the onchange handle:
this.options[this.selectedIndex].getAttribute('custom-field')

Get input inside same <td>

How can I get previous input inside the same ?
I have the following table:
start-loop
<td>...</td>
<td>...</td>
<td align=center>
<input type="hidden" id="ContactPW" name="ContactPW" value="#UserPW#" />
<input type="hidden" id="ContactEmail" name="ContactEmail" value="#UserEmail#" />
<input type="hidden" id="ContacName" name="ContactName" value="#UserName#" />
<input class="btn btn-primary" type="button" onclick="test();" value="Login" />
</td>
end- loop
I would like to get in my test() function the values for "ContactPW", "ContactEmail", and "ContactName", but using $("#ContactPW").val() I just get the first item in the loop, not the row that I click the button.
Does anyone know how I can do it?
Thanks
in your test function, you can use jquery .parent().find() which means, your btn elem will look for parent and find the child with the name that you define. function as sample below,
html
<input class="btn btn-primary" type="button" onclick="test(this);" value="Login" />
javascript
function test(e){
$(e).parent().find("[name='ContactPW']").val();
}

adding html in correct position of document using java script

I've written this code for this purpose: I want to have a form for search, whenever the user clicked on the delete bottom all the html tages in that row must be deleted (the whole div) and whenever they click on the add word bottom another group of field for search must be added. the same for add group bottom. after clicking on add group bottom all the field set should repeat and by the next click again and again. now the problem is where to add and what to delete!! as you see the form is copying and its out of my control to delete or add what I want ( for example after clicking on delete bottom on the first row just the first row must go away not others. I hope I am clear. is there any solution?
<form action="search1.php" method="post">
<fieldset style="width:50%;" id="g1">
<legend>search form</legend>
<table>
<tr>
<td style="border-left:1px solid #000">
<select name="opration" size="1">
<option>AND</option>
<option>OR</option>
</select>
</td>
<td>
<div id="w2">
<input type="text" name="textfield" placeholder="search here" />
<input type="submit" name="delete" value="delete" onclick="DoDelete()" /> synonimes
<input type="checkbox" name="checkfield" onchange="DoAlert()" />
</div>
</br>
<div id="w1">
<input type="text" name="textfield" placeholder="search here" />
<input type="submit" name="delete" value="delete" onclick="DoDelete()" /> synonime
<input type="checkbox" name="checkfield" />
</div>
</br>
<input type="submit" name="addw" value="add word" onclick="DoAddW()" />
</td>
</tr>
</table>
</fieldset>
<input type="submit" name="addg" value="add group" onclick="DoAddG()" />
</br>
<input type="submit" name="search" value="search" />
</form>
<script>
function DoDelete() {
$("w1").remove();
}
function DoAddW() {
alert("add word");
$("#w").append(" </br><div id='w1'><input type='text' name='textfield' placeholder='search here'/><input type='submit' name='delete' value='delete' onclick='DoDelete()'/>synonime<input type='checkbox' name='checkfield' /> </div></br> ");
}
function DoAddG() {
alert("add group");
$("#g").append(" <fieldset style='width:50%;' id='g1'><legend>serach form</legend><table><tr><td style='border-left:1px solid #000'><select name='opration' size='1'><option>AND</option><option>OR</option>/select></td><td><div id='w1'><input type='text' name='textfield' placeholder='search here' /><input type='submit' name='delete' value='delete' onclick='DoDelete()'/>synonime<input type='checkbox' name='checkfield' /></div></br><input type='submit' name='addw' value='add word' onclick='DoAddW()'/></td></tr></table></fieldset>
");
}
function DoAlert() {
alert("I want to add some synonimes")
}
</script>
You should try including the element which you click in the javascript methods you invoke in the onClick event.
<input type="submit" name="delete" value="delete" onclick="DoDelete(this)" />
In your action methods you are specifying the element in which you perform the action instead of making them flexible for using them in any element.
Try this
function DoDelete(){
$(this).closest('div').remove();
}
Add id to the td which contains W like this
<td id="forW">
<div id="w2">
<input type="text" name="textfield" placeholder="search here" />
<input type="submit" name="delete" value="delete" onclick="DoDelete()" /> synonimes
<input type="checkbox" name="checkfield" onchange="DoAlert()" />
</div>
</td>
function DoAddW() {
alert("add word");
$("#forW").append(" </br><div id='w1'><input type='text' name='textfield' placeholder='search here'/><input type='submit' name='delete' value='delete' onclick='DoDelete()'/>synonime<input type='checkbox' name='checkfield' /> </div></br> ");
}

Javascript assign table to a variable

My goal is to create a button using javascript, that creates a table, that is the same as one I already have. Here I have a table with id="create_table_test", and a button with onsumbit function createTable().
The problem is whenever the button is executed, instead of a table I get [object HTMLTableElement] .Also tried to do it without the function getElemntById, but the result was the same. With some testing I found that this script doesn't like input types.I tried to do it with the same table, but without the input field types set and it worked out.Maybe thats the cause ?
The next thing that maybe have to be kept in mind is that I need to store the filled tables into php variables, then insert them into table.
<!DOCTYPE html>
<html>
<head>
<script>
var table = document.getElementById("create_table_test");
function createTable() {
document.getElementById("create_table").innerHTML += table;
}
</script>
</head>
<body>
<span id="create_table">
<table id="create_table_test" class="repeat_table">
<tr class="tr_test" style="border-bottom:3px solid #0066FF; font-weight:bold">
<td id="Question">
Въпрос
</td>
<td>
A
</td>
<td>
B
</td>
<td>
C
</td>
<td>
D
</td>
<td>
True answer
</td>
<td>
</td>
</tr>
<form name="test" action="send.php" onsubmit="" method="post">
<tr>
<td>
<textarea id="question" name="question" style="width:300px; height:120px;"></textarea></td>
<td>
<textarea id="answer1" name="answer1" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer2" name="answer2" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer3" name="answer3" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer4" name="answer4" style="width:80px; height:120px"></textarea></td>
<td>
<input id="true_answer" type="radio" name="true_answer" value="A">A<br>
<input id="true_answer" type="radio" name="true_answer" value="B">B<br>
<input id="true_answer" type="radio" name="true_answer" value="C">C<br>
<input id="true_answer" type="radio" name="true_answer" value="D">D<br>
</td>
<td>
<input name="submit" type="submit" value="" class="btn"/>
</form>
</td>
</tr>
</table>
<input type="button" onclick="createTable()" value="CreateTable"/>
</span>
</body>
try this one...
function createTable() {
var table = document.getElementById("create_table_test").outerHTML;
document.getElementById("create_table").innerHTML += table;
}
Looks like you want:
document.getElementById("create_table").innerHTML += table.outerHTML;
But beware of duplicate IDs.
Just change this code from:
var table = document.getElementById("create_table_test");
function createTable() {
document.getElementById("create_table").innerHTML += table;
}
to:
var table = document.getElementById("create_table_test");
function createTable() {
document.getElementById("create_table").innerHTML = table.outerHTML;
}
This will create the same table with the same ids. You might wanna re-think your logic.

Two buttons display same div. One button has more visibility of options

I have two <input type=Button>. When clicked, both will load one dialogue box contained inside a div.
I want to add a separate button and text into the div which is only viewable when the second button is clicked. Instead of rewriting this one for btn one and one for btn two. How can I make the extra text and button only available if the 2nd btn is clicked?
<div id="LabourOrPlantDialog" title="Comments" style="display:none;">
<table class="table">
<tr>
<th>Item</th>
</tr>
<tr>
<td id="Item"></td>
</tr>
</table>
<br />
<textarea id="ExistingComments" type="text" runat="server" rows="7" cols="30" maxlength="2000"></textarea>
<input id="SubmitComment" type="button" value="Submit" onclick="SubmitButton()" />
<!-- BELOW IS THE TEXT AND BTN I ONLY WANT AVAILABLE WHEN 2ND BTN IS CLICKED -->
<input type="text" name="BoqTextBox" />
<input type="AddValueButton" value="+" onclick="Add(BoqTextBox)" />
</div>
Some sort of bool im guessing? Have never done this before...any help would be great. Thanks
EDIT:
<input id="SubmitCommentsForOne" type="button" value="Comments" onclick="ShowComment('<%: item.ItemCode %>')" />
<input id="SubmitCommentsForTwo" type="button" value="Comments" onclick="ShowComment('<%: item.Number %>')" />
var Code
function ShowCommentBoxForBOQ(Number) {
Code = Number;
Work.DisplayBoxForBOQ(Number);
$("#LabourOrPlantDialog").dialog({ modal: true });
}
LabourOrPlantDialog loads the div.
EDIT: Can I give anything else which would help? Does anyone have any idea a tall? Thank you for any replies
Add this wherever you'd like the new text & button:
<div id="hiddenBox">
<input type="text" name="BoqTextBox" />
<input type="button" value="+" onclick="Add(BoqTextBox);" />
</div>
Add this somewhere in your stylesheet:
#hiddenBox{display:none;}
Add this somewhere in your javascript
$("#SubmitCommentsForTwo").click(function(){
$("#hiddenBox").show();
});

Categories