Javascript assign table to a variable - javascript

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.

Related

Accessing text field inside html table in 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.

Ajax HTML FORM not sending input

i've got a problem I can't figure out.
I have a page (index.php) that open a form, includes another page with PHP (indexsearch.php) and close the form.
This included page is working with a script that display some datas from my website, the data are requested on the page with an AJAX function that is linked to search.php, that is working with a table and checkboxes so we can choose which data to work with.
See this schema :
Everything is working fine but the checkboxes are not send even when they are checked. I did added the name and the value in search.php
<td> <input type="checkbox" name="ajout[]" value="<?php echo $result['id']; ?>"/> </td>
I also did not opened another form.
So I guess the problem may come from the fact the AJAX datas work as an independant form that is not included in my page.
Please see the html code :
<body>
<div class="division">
<table id="text-p">
<tr>
<td>
<form action="" method="get" enctype="multipart/form-data">
<textarea id="text-p1" name="text-p1" maxlength="300" placeholder="Text1"></textarea>
</td>
<td>
<textarea id="text-p2" name="text-p2" maxlength="300" placeholder="Text2"></textarea>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p1" type="file" accept="image/*">
</td>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p2" type="file" accept="image/*">
</td>
</tr>
</table>
</div>
<div class="division">
<div width="100%" style="height: 50px;">
<input type="text" name="recherche" id="recherche" style="width: 75%; float:left; display: inline-block;" placeholder="Rechercher...">
<div style="float:right;">
<input type="radio" name="onglet" value="val1" id="act" checked="">Activité
<input type="radio" name="onglet" value="val2" id="sect">Secteur
<input type="radio" name="onglet" value="val3" id="ecr">Ecrans
</div>
</div>
<div width="100%" id="resultats">
<input id="ok" type="button" class="pageselector" name="pageselector" value="1" checked=""><table id="resultat1" width="100%" style="text-align: center;" class="resultatshow">
<tbody><tr>
<td>Cat</td>
<td>Text-1</td>
<td>Text-2</td>
<td>Sélec</td>
</tr>
<tr>
<td>Cat1</td>
<td>NULL</td>
<td>NULL</td>
<td> <input type="checkbox" name="ajout[]" value="1"> </td>
</tr>
<tr>
<td>CAT2</td>
<td>EMPTY</td>
<td>EMPTY</td>
<td> <input type="checkbox" name="ajout[]" value="2"> </td>
</tr>
</table></div>
<input type="submit" value="UPDATE">
</div>
</body>
How can I fix that ?
I am not sure but I guess it can be caused by square brackets in the name attribute of your checkboxes. If you have reason to do it, you have to work with it properly. For example, here is the HTML form field:
<input type='checkbox' name='checkbox[myOption]'>
You have to remember that POST is an array of options. So doing like above you have to access it in the right way on the server side:
$_POST['checkbox']['myOption'];
I don't know if that solves your problem but I hope it helps a little bit

Reading values from a dynamic table form

OK. So I am assisting my backend developer with some form submission issues. Here's the scenario :
There is a table inside a html form with two columns and dynamic rows. The user can click on an Add button to insert a row with one text input for each column. I did that using jQuery. Here's how the table looks after the user has inserted two rows :
<form>
...
<tbody class="table-hover addScreen">
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="a"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="b"> </td>
</tr>
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="c"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="d"> </td>
</tr>
</tbody>
...
</form>
Now we have no idea how to read this data on the server side when the submit button is clicked. We tried this :
string textboxval1 = screenNameTextBox.value;
string textboxval2 = seatsAvlTextBox.Value;
but that only gives us the first set of values. Please suggest what are the best practices when doing something like this.
PS : I'm an iOS dev so forgive me if i said some blunder. ;-)
Just a quick example of my comment,
function readForm(){
event.preventDefault;
var resultsBox= document.getElementById('results');
var screenNames=document.getElementsByClassName('screenNameTextBox');
var seatsAv=document.getElementsByClassName('seatsAvlTextBox');
for(var i=0;i<=screenNames.length;i++){
resultsBox.innerHTML+=screenNames[i].value+' '+seatsAv[i].value+'<br>';
}
}
<form onsubmit="readForm();">
Enter some values:<br>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="submit" />
</form>
<div id="results">results :<br></div>

Google apps script canot set values from form table

I have a html form like
<script>
function formSubmit() {
google.script.run.getValuesFromForm(document.forms[0]);
}
</script>
<form>
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<tbody>
<tr>
<td>
<input id="date" name="date" style="width:125px;" type="date" />
</td>
<td>
<input id="type" name="type" style="width:125px;" type="text" />
</td>
<td>
<input id="status" name="status" style="width:125px;" type="text" />
</td>
<td>
<input id="name" name="name" style="width:125px;" type="text" />
</td>
<td>
<input id="comment" name="comment" style="width:125px;" type="text" />
</td>
<td>
<input id="where" name="where" style="width:125px;" type="text" />
</td>
</tr>
</tbody>
</table>
</form>
<input onclick="formSubmit()" type="button" value="Submit" />
and trying to put all data to sheet but i got empty cells, if i add .value on the end of variables
form.date.value
then row do not inserting at all
function getValuesFromForm(form) {
var s1 = form.date,
s2 = form.type,
s3 = form.status,
s4 = form.name,
s5 = form.comment,
s6 = form.where,
index = 2,
sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.insertRowBefore(index).getRange(index, 1).setValues([s1,s2,s3,s4,s5,s6]);
}
But this code works as well
sheet.appendRow([s1,s2,s3,s4,s5,s6]);
What i doing wrong?
You need to read value property of input elements:
var s1 = form.date.value,
s2 = form.type.value,
s3 = form.status.value,
s4 = form.name.value,
s5 = form.comment.value,
s6 = form.where.value,
You must have a google.script.run in your HTML somewhere that calls the server side code.
https://developers.google.com/apps-script/guides/html/reference/run
google.script.run is an API that enables you to communicate from the users computer, to Google's servers.
I don't see a submit button in your code, or a <script> tag, or an onClick event. There are various ways to configure the form submission, but there needs to be a google.script.run.myServerFunctionName() call to trigger the function in the .gs Apps Script file.
You can use google.script.run directly from a SUBMIT button:
<input type="button" value="Not Clicked"
onclick="google.script.run
.withSuccessHandler(updateButton)
.withUserObject(this)
.getEmail()" />
, or an button with an HTML onclick Event Attribute:
<button onclick="myFunction()">Click me</button>
or a HTML onsubmit Event Attribute:
<form onsubmit="myFunction()">
Enter name: <input type="text">
<input type="submit">
</form>
and from a SCRIPT tag:
<script>
function myFunction() {
google.script.run.doSomething();
};
</script>
You can pass the data in various ways. There are lots of ways to configure the HTML and client side code.
Solved
var rowData=[[s1,s2,s3,s4,s5,s6]];
sheet.insertRowBefore(index).getRange(index, 1,1,6).setValues(rowData);

Conditional Validation using JQuery Validation Plugin

I have a simple html form that I've added validation to using the JQuery Validation plugin. I have it working for single fields that require a value. I now need to extend that so that if a user answers Yes to a question they must enter something in the Details field, otherwise the Details field can be left blank. I'm using radio buttons to display the Yes/No. Here's my complete html form - I'm not sure where to go from here:
<script type="text/javascript" charset="utf-8">
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("#editRecord").validate();
});
</script>
<style type="text/css">
.block { display: block; }
form.cmxform label.error { display: none; }
</style>
</head>
<body>
<div id="header">
<h1>
Questions</h1>
</div>
<div id="content">
<h1>
Questions Page 1
</h1>
</div>
<div id="content">
<h1>
</h1>
<form class="cmxform" method="post" action="editrecord.php" id="editRecord">
<input type="hidden" name="-action" value="edit">
<h1>
Questions
</h1>
<table width="46%" class="record">
<tr>
<td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td>
<td width="15%" valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question1" value="No" /> No
</label>
<label for="Question1" class="error">You must answer this question to proceed</label>
</td>
<td width="64%" valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"></textarea></td>
</tr>
<tr>
<td valign="top" class="field_name_left">Question 2</td>
<td valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question2" value="No" /> No
</label>
<label for="Question2" class="error">You must answer this question to proceed</label>
</td>
<td valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"></textarea> </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>
</form>
</div>
</body>
</html>
On your <textarea> elements, add a dependency expression for required, for example for question 1, do this:
validate="required:'input[name=Question1][value=Yes]:checked'"
This says if $('input[name=Question1][value=Yes]:checked').length > 0 then the field is required, so if Yes is checked, it's required :)
You can see a working demo here
You can do something like this:
$("#editRecord").validate({
rules: {
'Details1': {
required: function() {
return $('input[name=Question1]').val() == 'yes';
}
}
'Details2': {
required: function() {
return $('input[name=Question2]').val() == 'yes';
}
}
}
});
In response to Nick Craver's suggested response above, I found the correct syntax to be:
class="validate[required][name=Question1][value=Yes]:checked"
instead of what he posted.
Thanks for putting me on the right track, though!

Categories