Develop Reference

how to get text value from button?

I'm trying to get the text value inside a button. example:
if I click on papier I want the alert to say papier how can I call the HTML text of the button. right now I get undefined instead of "papier" when I click on papier.
<h1>Jeu de Roche,Papier,Ciseau</h1>
<div id="conteneur">
<div id="interface">
<table>
<tr>
<td><button class="button" type="text" onclick="clique(this)">Roche</button></td>
<td><button class="button" type="text" onclick="clique(this)">Roche</button></td>
</tr>
<tr>
<td><button class="button" type="text" onclick="clique(this)">Papier</button></td>
<td><button class="button" type="text" onclick="clique(this)">Papier</button></td>
</tr>
<tr>
<td><button class="button" type="text" onclick="clique(this)">Ciseau</button></td>
<td><button class="button" type="text" onclick="clique(this)">Ciseau</button></td>
</tr>
</table>
</div>
</div>
<script>
function clique(x) {
var element = document.querySelector("button").innerHTML;
alert(x.element);
}
</script>

It would better to use attribute selector and fire addEventlistener.
<h1>Jeu de Roche,Papier,Ciseau</h1>
<div id="conteneur">
<div id="interface">
<table>
<tr>
<td><button class="button" type="text" data-name="button">Roche</button></td>
<td><button class="button" type="text" data-name="button">Roche</button></td>
</tr>
<tr>
<td><button class="button" type="text" data-name="button">Papier</button></td>
<td><button class="button" type="text" data-name="button">Papier</button></td>
</tr>
<tr>
<td><button class="button" type="text" data-name="button">Ciseau</button></td>
<td><button data-name="button" class="button" type="text" >Ciseau</button></td>
</tr>
</table>
</div>
</div>
<script>
const buttons = document.querySelectorAll("[data-name='button']")
buttons.forEach(button => button.addEventListener('click', function() {
console.log(this.innerHTML)
}))
</script>

x in your clique function is already the element you clicked, you don't have to find it again, simply use x.innerHTML or better x.innerText:
function clique(x) {
alert(x.innerText);
}
<h1>Jeu de Roche,Papier,Ciseau</h1>
<div id="conteneur">
<div id="interface">
<table>
<tr>
<td><button class="button" type="text" onclick="clique(this)">Roche</button></td>
<td><button class="button" type="text" onclick="clique(this)">Roche</button></td>
</tr>
<tr>
<td><button class="button" type="text" onclick="clique(this)">Papier</button></td>
<td><button class="button" type="text" onclick="clique(this)">Papier</button></td>
</tr>
<tr>
<td><button class="button" type="text" onclick="clique(this)">Ciseau</button></td>
<td><button class="button" type="text" onclick="clique(this)">Ciseau</button></td>
</tr>
</table>
</div>
</div>

you don't need a selector you are passing the button as a reference to your handler.
you can use value inside the button as well, value could be more versatile in my opinion.
function clique(btn) {
alert(btn.value);
alert(btn.innerHTML);
alert(btn.innerText)
}
<h1>Jeu de Roche,Papier,Ciseau</h1>
<div id="conteneur">
<div id="interface">
<table>
<tr>
<td><button class="button" type="text" value="Roche" onclick="clique(this)">Roche</button></td>
<td><button class="button" type="text" value="Roche" onclick="clique(this)">Roche</button></td>
</tr>
<tr>
<td><button class="button" type="text" value="Papier" onclick="clique(this)">Papier</button></td>
<td><button class="button" type="text" value="Papier" onclick="clique(this)">Papier</button></td>
</tr>
<tr>
<td><button class="button" type="text" value="Ciseau" onclick="clique(this)">Ciseau</button></td>
<td><button class="button" type="text" value="Ciseau" onclick="clique(this)">Ciseau</button></td>
</tr>
</table>
</div>
</div>

Because querySelector will only pick up the first matching element.
Now you could use querySelectorAll but in JavaScript there's a process called event delegation. It allows you to add one listener to a parent element that captures the events from its child elements as they "bubble up" the DOM. It makes your code and markup cleaner, and has one single point of failure rather than many.
// Cache the container
const interface = document.querySelector('#interface');
// Add a listener to it
interface.addEventListener('click', handleClick);
// Check the clicked element is a button, and
// log its text content
function handleClick(e) {
if (e.target.matches('button')) {
console.log(e.target.textContent);
}
}
<h1>Jeu de Roche,Papier,Ciseau</h1>
<div id="conteneur">
<div id="interface">
<table>
<tr>
<td><button>Roche</button></td>
<td><button>Roche</button></td>
</tr>
<tr>
<td><button>Papier</button></td>
<td><button>Papier</button></td>
</tr>
<tr>
<td><button>Ciseau</button></td>
<td><button>Ciseau</button></td>
</tr>
</table>
</div>
</div>
Additional documentation
matches
addEventListener

You can change your function like this
function clique(x) {
alert(x.innerHTML);
}

Reordering <tr> not working for newly append <tr> [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I am trying to add a row dynamically by clicking the add button and later i am trying to move up and down by clicking the respected buttons... In the code i amhaving 3 static rows, the data typed in the textbox goes up and down perfectly. But regarding the ROW which i have dynamically created, there is no action.
I came to know that javascript wont get action for dynamically created elements.. If so, what i have to do solve this issue...Thanks...
var html = '<tr><td>row 4</td><td><input type="text" name="uname"></td><td><input type="button" value="move up" class="move up" /></td><td><input type="button" value="move down" class="move down" /></td></tr>';
$(function() {
$('#addRow').click(function() {
$('tbody').append(html);
});
$('#mytable input.move').click(function() {
var row = $(this).closest('tr');
if ($(this).hasClass('up'))
row.prev().before(row);
else
row.next().after(row);
});
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table>
<tbody id="mytable">
<tr>
<td>row 1</td>
<td><input type="text" name="uname"></td>
<td><input type="button" value="move up" class="move up" /></td>
<td><input type="button" value="move down" class="move down" /></td>
</tr>
<tr>
<td>row 2</td>
<td><input type="text" name="uname"></td>
<td><input type="button" value="move up" class="move up" /></td>
<td><input type="button" value="move down" class="move down" /></td>
</tr>
<tr>
<td>row 3</td>
<td><input type="text" name="uname"></td>
<td><input type="button" value="move up" class="move up" /></td>
<td><input type="button" value="move down" class="move down" /></td>
</tr>
</tbody>
</table>
<button id="addRow">Add</button>
</body>
</html>
I would like to add new tr with controls dynamically and later i would like to reorder the same by clicking the up and down button and then to get its values in the reordered form..

Use Jquery Event Delegation
$(document).on('click', '#mytable input.move', function() { ... });
var html = '<tr><td>row 4</td><td><input type="text" name="uname"></td><td><input type="button" value="move up" class="move up" /></td><td><input type="button" value="move down" class="move down" /></td></tr>';
$(function() {
$('#addRow').click(function() {
$('tbody').append(html);
});
$(document).on('click', '#mytable input.move', function() {
var row = $(this).closest('tr');
if ($(this).hasClass('up'))
row.prev().before(row);
else
row.next().after(row);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="mytable">
<tr>
<td>row 1</td>
<td><input type="text" name="uname"></td>
<td><input type="button" value="move up" class="move up" /></td>
<td><input type="button" value="move down" class="move down" /></td>
</tr>
<tr>
<td>row 2</td>
<td><input type="text" name="uname"></td>
<td><input type="button" value="move up" class="move up" /></td>
<td><input type="button" value="move down" class="move down" /></td>
</tr>
<tr>
<td>row 3</td>
<td><input type="text" name="uname"></td>
<td><input type="button" value="move up" class="move up" /></td>
<td><input type="button" value="move down" class="move down" /></td>
</tr>
</tbody>
</table>
<button id="addRow">Add</button>

My personal preferred is to write Javascript always in vanilla JS. So I rewrote the answer in vanilla JS.
//define table
const table = document.getElementById('table');
//set eventlisteners for the up,down and add buttons
Array.from(document.getElementsByClassName('table__move-up')).map(button => button.addEventListener('click' , () => moveRowUp(button.parentNode.parentNode)));
Array.from(document.getElementsByClassName('table__move-down')).map(button => button.addEventListener('click' , () => moveRowDown(button.parentNode.parentNode)));
Array.from(document.getElementsByClassName('add__row')).map(button => button.addEventListener('click' , () => addRow(table)));
//the function to move the row up
function moveRowUp(row) {
if (row == table.children[0]) return;
row.parentNode.insertBefore(row, row.previousElementSibling);
}
//the function to move the row down
function moveRowDown(row) {
if (row == table.children[table.children.length - 1]) return;
row.parentNode.insertBefore(row.nextElementSibling, row);
}
//the function to add a new row to the table
function addRow() {
//add new tr
const row = document.createElement('TR');
table.appendChild(row);
//add a new column with inside the text. For example row 6
const tableNameCell = document.createElement('TD');
row.appendChild(tableNameCell);
tableNameCell.innerText = `row ${table.children.length}`;
//add a new column with inside the text input
const inputCell = document.createElement('TD');
row.appendChild(inputCell);
const inputText = document.createElement('INPUT');
inputCell.appendChild(inputText);
inputText.type = 'text';
//add a new column with inside the move up button
const moveUpCell = document.createElement('TD');
row.appendChild(moveUpCell);
const inputButtonUp = document.createElement('INPUT');
moveUpCell.appendChild(inputButtonUp);
inputButtonUp.type = 'button';
inputButtonUp.value = 'move up';
inputButtonUp.addEventListener('click' , () => moveRowUp(inputButtonUp.parentNode.parentNode));
//add a new column with inside the move down button
const moveDownCell = document.createElement('TD');
row.appendChild(moveDownCell);
const inputButtonDown = document.createElement('INPUT');
moveDownCell.appendChild(inputButtonDown);
inputButtonDown.type = 'button';
inputButtonDown.value = 'move down';
inputButtonDown.addEventListener('click' , () => moveRowDown(inputButtonDown.parentNode.parentNode));
}
<body>
<table>
<tbody id="table">
<tr>
<td>row 1</td>
<td><input type="text"></td>
<td><input type="button" value="move up" class="table__move-up" /></td>
<td><input type="button" value="move down" class="table__move-down" /></td>
</tr>
<tr>
<td>row 2</td>
<td><input type="text"></td>
<td><input type="button" value="move up" class="table__move-up" /></td>
<td><input type="button" value="move down" class="table__move-down" /></td>
</tr>
<tr>
<td>row 3</td>
<td><input type="text"></td>
<td><input type="button" value="move up" class="table__move-up" /></td>
<td><input type="button" value="move down" class="table__move-down" /></td>
</tr>
</tbody>
</table>
<button class="add__row">Add</button>
</body>

PHP Form/Table - Sending row contents when checked

I am working on a project and have an idea but not sure how to accomplish (new to PHP/JS).
Basically, I have a table within a form with one row being a checkbox. I would like to check the box(es) and when the form is submitted it sends the values of each column in the selected rows.
For example:
1 - Domain | MatchedTo | Percentage | Checkbox
2 - Domain | MatchedTo | Percentage | Checkbox
If row 1 is checked I would like the submit to POST the domain, matchedto and percentage values.
Here is what I have so far:
<script type="text/javascript">
$('#test-form').submit(function(event) {
event.preventDefault();
var buttonAction = event.originalEvent.explicitOriginalTarget.value;
var formData = $(this).serialize();
var varData = formData + "&action=" + buttonAction;
$.ajax({
type: 'POST',
url: 'test_submit.php',
data: varData,
success: function() {
window.location.reload(true);
console.log("Form posted successfully.", varData);
}
})
});
</script>
<form method="POST" id="test-form">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Ratio</th>
<th>Domain</th>
<th>Matched</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="6" role="row" class="odd">
<td>50</td>
<td class="sorting_1">www.test.com</td>
<td class="sorting_1">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test.com" type="checkbox"></td>
</tr>
<tr id="6" role="row" class="odd">
<td>50</td>
<td class="sorting_1">www.test2.com</td>
<td class="sorting_1">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test2.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test2.com" type="checkbox"></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" type="submit" value="save"><span class="fa fa-arrow-right">Save Selected</span></button>
<button class="btn btn-danger" type="submit" value="delete"><span class="fa fa-times">Delete Selected</span></button>
<button class="btn btn-warning" type="reset" value="reset"><span class="fa fa-times">Clear Selected</span></button>
</form>
I am assuming I need to create an input field for each column? How do I go about POSTing all of these fields when a box is checked?
Thank you for any assistance.

If you're going to submit via ajax, you'll probably want to create the string you'll be submitting. Something like the following may be a starting-point, if I understand what you're trying to do.
Note that this doesn't address actually sending the data, it's simply about how to hijack the form and create the format you're looking for.
// First, I'm stopping the default behaviors
$("button").on("click", function(event){
event.stopPropagation();
event.preventDefault();
})
// Now, when we click save, I want to format
// a string.
$("button[value='save']").on("click", function(){
var returnString = "";
// The following selector gets all the rows
// that have a CHECKED checkbox. Note I
// don't get the checkbox, simply the row.
var rowEls = $("#test-form").find("tr:has(input[type='checkbox']:checked) ");
// For every row, we'll add to our string...
rowEls.each(function(){
var rowEl = $(this);
// First, a row id
returnString += rowEl.attr("id")+" - ";
var cells = rowEl.children("td");
// Next the contents of each cell THAT
// HAS A data-content ATTRIBUTE. This
// way, we don't get the remove/keep.
cells.each(function(){
if($(this).data("content")){
returnString += $(this).data("content")+"="+$(this).text();
if($(this).not(":last"))
returnString += " | ";
}
})
returnString += " ";
})
console.log(returnString);
})
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="test-form">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Ratio</th>
<th>Domain</th>
<th>Matched</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="6" role="row" class="odd">
<td data-content="ratio">50</td>
<td class="sorting_1" data-content="domain">www.test.com</td>
<td class="sorting_1" data-content="matched">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test.com" type="checkbox"></td>
</tr>
<tr id="6" role="row" class="odd">
<td data-content="ratio">50</td>
<td class="sorting_1" data-content="domain">www.test2.com</td>
<td class="sorting_1" data-content="matched">anothertest2.com</td>
<td><button type="button" class="btn btn-danger del_domain" domain="www.test2.com">Remove</button>
<button type="button" class="btn btn-primary update_domain" domain="www.test.com" matchedto="anothertest2.com">Keep</button>
<input name="domain[]" value="www.test2.com" type="checkbox"></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" type="submit" value="save"><span class="fa fa-arrow-right">Save Selected</span></button>
<button class="btn btn-danger" type="submit" value="delete" disabled><span class="fa fa-times">Delete Selected</span></button>
<button class="btn btn-warning" type="reset" value="reset" disabled><span class="fa fa-times">Clear Selected</span></button>
</form>

remove readonly attribute from multiple fields on clicking button in jquery

I have a table with the details of the student. These fields are readonly field and can be edited on clicking the edit button. But I am having problem to select all the input fields of that row at once on clicking the edit button.
Here is my html code
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Checklist</th>
<th>Id</th>
<th>Student Name</th>
<th>Address</th>
<th>Phone</th>
<th>Class</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="editCheck" class="btn1" />
<input type="checkbox" id="deleteCheck" />
</td>
<td>1</td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td>12</td>
<td><button type="button" class="btn btn-info btn-xs" id="btn1">Edit</button></td>
<td><button type="button" class="btn btn-danger btn-xs" id="dbtn1">Delete</button></td>
</tr>
<tr>
<td>
<input type="checkbox" id="editCheck" class="btn2" />
<input type="checkbox" id="deleteCheck" />
</td>
<td>1</td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td><input type="text" class="form-control item" readonly="readonly" /></td>
<td>12</td>
<td><button type="button" class="btn btn-info btn-xs" id="btn2">Edit</button></td>
<td><button type="button" class="btn btn-danger btn-xs" id="dbtn2">Delete</button></td>
</tr>
</tbody>
</table>
And here is the jquery. I have made the checkbox selected on pressing the edit button.
$(document).ready(function(){
$('.btn.btn-info.btn-xs').click(function(){
var newClass = $(this).attr('id');
$('.'+newClass).prop('checked','true');
});
});
</script>

You can simply add this into your click handler
$(this).closest('tr').find('input').removeAttr('readonly');
Which finds the tr containing the clicked button, locates all of its input elements, and removes their readonly attribute.
Live example: http://jsfiddle.net/zxsq0m5n/
Incidentally, you could use the same trick to locate your checkbox, negating the need to tie it together with the edit button using id/class
$('.btn.btn-info.btn-xs').click(function(){
var $tr = $(this).closest('tr')
$tr.find('input:checkbox').first().prop('checked','true');
$tr.find('input').removeAttr('readonly');
});
Live example: http://jsfiddle.net/zxsq0m5n/1/

$('.btn.btn-info.btn-xs').on('click', function (e) {
var $btn = $(e.currentTarget),
newClass = '.' + $btn.attr('id');
$btn
.parents('tr')
.find(newClass).prop('checked', true)
.end()
.find('input').removeAttr('readonly');
});

You can update your code to following
Logic - Get the tr row i.e. parent of parent of input -> tr -> td -> button. Then for that row find all the input and remove the attribute. Please note you can add conditions if required
$('.btn.btn-info.btn-xs').click(function(){
var newClass = $(this).attr('id');
$('.'+newClass).prop('checked','true');
$(this).parent().parent().find("input").each(function(){
$(this).removeAttr("readonly");
});
});

AngularJS auto function

I have a problem with AngularJS. In my HTML I have something like this:
<tbody ng-repeat="show in pastShows">
<tr>
<td><input value="{{show.address}}" type="text" id="addressUp" class="form-control" placeholder="address"></td>
<td><input value="{{show.price}}" type="text" id="priceUp" class="form-control" placeholder="XX euros"></td>
<td><button type="button" class="btn btn-success" ng-click="updateShow({{show.id}})">Update</button></td>
</tr>
</tbody>
I have the function updateShow in his controller, but if I send the variable using {{show.id}} the function doesn't work. To try it I did this in the function:
$scope.updateShow = function(id){
alert(id);
}
Someone has any idea??
Thanks!

Remove the curly braces:
<td><button type="button" class="btn btn-success" ng-click="updateShow(show.id)">Update</button></td>