extracting html table with filled in radio buttons - javascript

I have table which contains several radio buttons. After selecting a radio button and clicking a button, the html of the table (including the filled in radio button) should be stored in a variable. However, only the html table is stored in a variable (i.e. there is no checked property in the stored html code).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<form>
<table id="satisfaction_table">
<tr>
<th>Nr</th>
<th>Question</th>
<th>1 (Unacceptable)</th>
<th>2 (Poor)</th>
<th>3 (Average)</th>
<th>4 (Good)</th>
<th>5 (Excellent)</th>
</tr>
<tr>
<td>1</td>
<td>Did you call more than once before your call was answered?</td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
</tr>
</table>
</form>
<button type="button" onClick="extract_table()">Extract</button>
<script>
function extract_table()
{
// store html table
var table = $('form').html();
alert(table);
}
</script>
</body>
</html>


You can reflect the checked or other applied properties, if you loop the items and set as attributes before getting html().
function extract_table() {
var table = $('form');
$('form :radio').each(function() {
$(this).attr('checked', this.checked);
})
alert(table.html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form>
<table id="satisfaction_table">
<tr>
<th>Nr</th>
<th>Question</th>
<th>1 (Unacceptable)</th>
<th>2 (Poor)</th>
<th>3 (Average)</th>
<th>4 (Good)</th>
<th>5 (Excellent)</th>
</tr>
<tr>
<td>1</td>
<td>Did you call more than once before your call was answered?</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
</tr>
</table>
</form>
<button type="button" onClick="extract_table()">Extract</button>

Related

How To Add multiple Button Selections to a Div

So I have A Table With Buttons and match information, I am trying to script a code when I click on the specific button, it adds my selections to div(cart) for example if i click on the first button (1.59), it should add the match Name to the cart (Arsenal-Chelsea) ,The related selection (Arsenal) OR Header Name (Home) and The Value (1.59) in this order
Arsenal-Chelsea
Arsenal
1.59
Plus, I need it to be functional whenever I Re-click on the same button (1.59) it should be able to remove the selection from the cart
$(".nr").click(function() {
var $item = $(this).closest("tr").find(".nr").val();
$("#cart").append($item);
$("#cart").append("<div class='cart' Id='cart'>");
});
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javscript" src="script.js"></script>
<div class="cart" Id="cart">
<div class="title">Bet Slip</div>
<chr/>
<div id="sel"><span></span></div><br>
<span>Selections:</span><br>
<button class="bet1">Bet</button><br>
</div>
<br>
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
<thead>
<tr class="ui-widget-header ">
<th>Match</th>
<th>Home</th>
<th>Draw</th>
<th>Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arsenal-Chelsea</td>
<td><input type=button class="nr" value="1.59"></td>
<td><input type=button class="nr" value="3.40"></td>
<td><input type=button class="nr" value="2.90"></td>
</td>
</tr>
<tr>
<td>Man United-Man City</td>
<td><input type=button class="nr" value="2.70"></td>
<td><input type=button class="nr" value="2.90"></td>
<td><input type=button class="nr" value="2.50"></td>
</td>
</tr>
<tr>
<td>Barcelona-Real Madrdid</td>
<td><input type=button class="nr" value="3.60"></td>
<td><input type=button class="nr" value="3.20"></td>
<td><input type=button class="nr" value="1.95"></td>
</td>
</tr>
</tbody>
</table>

You need to use DOM traversal to find the content related to the button which was clicked. To get the venue you can get the index of the containing td and then retrieve the matching thead th which holds the text. To get the match you can get the text of the first td in the current row.
When appending the new content, don't use id attributes as they must be unique.
Also note in the following example that I fixed some of the issues in your HTML, such as extra </td> tags and removing the <chr /> tag, which doesn't exist.
let $th = $('#choose-address-table thead th');
$(".nr").on('click', e => {
let $btn = $(e.target);
let $option = $(`.cart[data-id="${$btn.prop('id')}"]`);
if ($option.length) {
$option.remove();
return;
}
let $tr = $btn.closest('tr');
let selectionIndex = $btn.closest('td').index();
let match = $tr.find('td:first').text().trim();
let result = $th.eq(selectionIndex).text().trim();
let value = $btn.val();
$("#cart").append(`<div class="cart" data-id="${$btn.prop('id')}">${match} ${result} ${value}</div>`);
});
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class="cart" Id="cart">
<div class="title">Bet Slip</div>
<div id="sel"><span></span></div><br />
<span>Selections:</span><br />
<button class="bet1">Bet</button><br />
</div><br />
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
<thead>
<tr class="ui-widget-header">
<th>Match</th>
<th>Home</th>
<th>Draw</th>
<th>Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arsenal-Chelsea</td>
<td><input type="button" class="nr" value="1.59" id="option_0_0" /></td>
<td><input type="button" class="nr" value="3.40" id="option_0_1" /></td>
<td><input type="button" class="nr" value="2.90" id="option_0_2" /></td>
</tr>
<tr>
<td>Man United-Man City</td>
<td><input type="button" class="nr" value="2.70" id="option_1_0" /></td>
<td><input type="button" class="nr" value="2.90" id="option_1_1" /></td>
<td><input type="button" class="nr" value="2.50" id="option_1_2" /></td>
</tr>
<tr>
<td>Barcelona-Real Madrdid</td>
<td><input type="button" class="nr" value="3.60" id="option_2_0" /></td>
<td><input type="button" class="nr" value="3.20" id="option_2_1" /></td>
<td><input type="button" class="nr" value="1.95" id="option_2_2" /></td>
</tr>
</tbody>
</table>

Reveal fields if needed

I'm trying to make a contact-form in php. You can find it here.
I try to make the textbox with datepicker invisible until the visitor checks the radiobutton "ja", only then it needs to be visible.
Here's the code for the form:
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div class="reveal-if-active">
<tr>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

you use $('input[type="radio"]').click(function(){}) to detect you input change see code snippet.
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
/* this is the function to handle you need */
$(function(){
$('input[type="radio"]').click(function(){
if ($('input[type="radio"]#ja').is(':checked'))
{
$(".reveal-if-active").show();
}
else if('input[type="radio"]#nee'){
$(".reveal-if-active").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div >
<!-- make the tr the element to hide and show -->
<tr class="reveal-if-active" style="display:none">
<td ><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

Firstly, your markup is kinda messed up:
You shouldn't mix div tags with tr, only tr tags should be present on the same 'level' of nesting in table tag
Secondly, answering you actual question - add click event listeners on the radiobuttons, so that when YES is clicked, you make visible your "reveal-if-active" row:
var inputToHide = document.getElementsByClassName("reveal-if-active")[0];
var jaInput = document.getElementById("ja");
var neeInput = document.getElementById("nee");
function makeInputVisibleAgain() {
inputToHide.style.display = "block";
}
function hideInput() {
inputToHide.style.display = "none";
}
jaInput.addEventListener("click", makeInputVisibleAgain);
neeInput.addEventListener("click", hideInput);
Thirdly - don't use several ids with same name, better change your id="nospacing" to class

It is possible that you want something like this? Notice that it's very easy to do it in very few lines of code. Since you're a beginner I'll explain:
$( ... ); is jQuery's way to say "when the page is totally loaded, start executing what's inside". In case you didn't know, without this the scripts would start executing any time and could cause errors, mainly because of not finding the elements you work with.
$('input[name="reservatie"]').change(function(){ ... });: the radio buttons have name "reservatie", so when they are changed it will execute the function inside change().
$('#reveal').prop('hidden', !$('#ja').prop('checked'));: I identified the row of the table where the datepicker was as "reveal", because, maybe I'm wrong, but putting one row of it inside of a div didn't let my code go well, so I believe that was just wrong. I deleted the div and used the row instead. So, its attribute hidden will be the opposite of the checked property of "ja", which means, if "ja" is checked, the datepicker won't be hidden, and if it's not, it will.
Hope it helps you.
$(function(){
$('input[name="reservatie"]').change(function(){
$('#reveal').prop('hidden', !$('#ja').prop('checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<tr id="reveal" hidden>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

Disabling certain inputs in table on button press

I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.
Does anyone know of a good way to go about this?
<tr>
<td>Text A</td>
<td>Text B</td>
<td><input class="editable"></td>
<td>Text C</td>
<td><input class="editable></td>
<td>Text D</td>
<td><button class="disableInput">OK</button></td>
<tr>
I have ~40 rows like this
Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds

$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})

Since you are using jQuery, you can do something like this:
$(document).ready(function() {
$("table td .btn").click(function() {
if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
$(this).closest("tr").find("input").removeAttr("disabled", "disabled");
$(this).closest("tr").find("button").text("Disbale");
}
else{
$(this).closest("tr").find("input").attr("disabled", "disabled");
$(this).closest("tr").find("button").text("Enable");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
</tbody>
</table>

You can do this via traversing the DOM.
$('.disableInput').on('click',function(){
var input = $(this).closest('tr').find('input');
var currstatus = input.prop('disabled');
input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
</table>

jQuery Find First Row From Closest Method

Using jQuery, I'm trying to find the first row of a given column in a table based on the control that has focus. The below kind of works, but it finds the last row of the given column. I want it to find the first row.
var $next= $('input:focus').closest('table').find('td:nth-child(3)').find('input')
I believe this is going to the last row because of the use of the 'closest()' method which traverses through the elements starting from the bottom.
What this ultimately being used for is navigate through a table using the arrow keys. It's based on this helpful code someone was kind enough to share: https://gist.github.com/krcourville/7309218.
EDIT: Adding additional fuller jquery and html as requested.
jQuery (stripped down version):
<script>
$('table.arrow-nav').keydown(function(e){
switch(e.which){
case //... other cases for other keycodes ...
case e.ctrlKey && 38: // <ctrl> + <Up>
$next = $('input:focus').closest('tr').parent().find("tr:first").find('td:nth-child(3)').find('input');
break;
}
if($next && $next.length){
$next.focus();
}
});
</script>
HTML:
<html>
<head></head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><input id="ctl_1_1" type="text"></td>
<td><input id="ctl_2_1" type="text"></td>
<td><input id="ctl_3_1" type="text"></td>
<td><input id="ctl_4_1" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_2" type="text"></td>
<td><input id="ctl_2_2" type="text"></td>
<td><input id="ctl_3_2" type="text"></td>
<td><input id="ctl_4_2" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_3" type="text"></td>
<td><input id="ctl_2_3" type="text"></td>
<td><input id="ctl_3_3" type="text"></td>
<td><input id="ctl_4_3" type="text"></td>
</tr>
</table>
</body>
<html>

Try like this
$('input:focus').closest('tr').parent().find("tr:nth-child(2)").find('td:nth-child(3)').find('input')

You can use the ids for referencing each row:
$(function() {
$('input').on('focus', function(event) {
var foc = $(this).attr('id');
var ctl = parseInt(foc.charAt(6), 10);
var next = $('tr')[ctl];
if (next === $('tr')[2]) {
next = $('tr')[0];
}
console.log('Focused input is ' + foc);
console.log('The next row is ' + (ctl + 1));
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Next Row</title>
</head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>
<input id="ctl_1_1" type="text">
</td>
<td>
<input id="ctl_2_1" type="text">
</td>
<td>
<input id="ctl_3_1" type="text">
</td>
<td>
<input id="ctl_4_1" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_2" type="text">
</td>
<td>
<input id="ctl_2_2" type="text">
</td>
<td>
<input id="ctl_3_2" type="text">
</td>
<td>
<input id="ctl_4_2" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_3" type="text">
</td>
<td>
<input id="ctl_2_3" type="text">
</td>
<td>
<input id="ctl_3_3" type="text">
</td>
<td>
<input id="ctl_4_3" type="text">
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>

Insert data in to the table and submit like a form

I need to create a table with two rows and three columns.
<table border="1">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here I need the second row table data's as a input field like a form. I need to fill them by my own and submit it. How can this be done.
Thank You

if your sending your form to serverside then there is no need to take hidden field. Instead give name attribute to your fields. It will be available on the serverside page.
<form id="FormName" action="server.php">
<table border = "1">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> <input type="text" id="name" name="name" /></td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitForm()" />
</form>
function submitForm(){
if(false)//check for errors
{
}else{
$('#FormName').submit();
}
}

Create a form
<form name="myform" action="xxx.php">
//create 3 hidden fields here
</form>
HTML
<table border = "1" id="mytable">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitTableData()" />
On your button click, get the values of each td and assign it to the hidden fields and then call submit
function submitTableData()
{
$('#hidden1').val('value of td1'); //$('#mytable tr:nth-child(2)').find('td:nth-child(1)').text()
$('#hidden2').val('value of td2'); //$('#mytable tr:nth-child(2)').find('td:nth-child(2)').text()
$('#hidden3').val('value of td3'); //$('#mytable tr:nth-child(2)').find('td:nth-child(3)').text()
$('#myform').submit();
}

<form action="submit.php" method="post">
<table width="100%">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
function addForm {
if{
somecodes here if true
}else{
$('variablenamehere') .submit();
}
}

In the cells of the second row just put some inputs:
<tr>
<td><input type="text" name="male"></td>
<td><input type="text" name="female"></td>
<td><input type="text" name="total"></td>
</tr>
When submitting the form, you will have 3 additional parameters: male, female and total in your request which will contain the values.
You can go on even further and - if i understood it right - since you have only numbers, you can specify the input type as being number and, with a small javascript function, you can make the total be calculated automatically.

Categories