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>
Related
When I fetch data in from datatabse to dynamic form it shows like this. How to force the second, third... and next rows to show DELETE button. I want the first row only to show Add and the rest is delete.
My blade code
#foreach ($form->requirements as $reqs)
<tr>
<td><input type="text" name="addMoreInputFields[0][requirement]"
placeholder="Enter requirements"
value="{{ $reqs['requirement'] }}"class="form-control" />
</td>
<td><button type="button" name="add" id="dynamic-ar"
class="btn btn-outline-primary">Add</button>
</td>
</tr>
#endforeach
the script
var i = 0;
$("#dynamic-ar").click(function() {
++i;
$("#dynamicAddRemove").append('<tr><td><input type="text" name="addMoreInputFields[' + i +
'][requirement]" placeholder="Enter requirements" class="form-control" /></td><td><button type="button" class="btn btn-outline-danger remove-input-field">Delete</button></td></tr>'
);
});
$(document).on('click', '.remove-input-field', function() {
$(this).parents('tr').remove();
});
You can use the $loop variable made available to you by Laravel:
#foreach ($form->requirements as $reqs)
<tr>
<td><input type="text" name="addMoreInputFields[0][requirement]"
placeholder="Enter requirements"
value="{{ $reqs['requirement'] }}"class="form-control" />
</td>
<td><button type="button" name="add" id="dynamic-ar"
class="btn btn-outline-primary">Add</button>
</td>
#if (!$loop->first)
// your delete button code here
#endif
</tr>
#endforeach
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);
}
Within my PHP I have a while loop that is gong through the entries in the DB.
I would like to have a input where I can change a columns value.
<td><input type="text" id="cardId-<?php echo $cardId; ?>" /></td>
<td><button type="button" class="btn btn-primary mb-2" onclick="update(<!-- pass cardId-0.val() -->)">Submit</button></td>
My JS
function update(id) {
var inputVal = document.getElementById("cardId-<?php echo $cardId; ?>").value;
console.log(inputVal);
}
How can I make this work. No matter which one I click on, it only passes the first value in the first box.
Delegation is a good idea
Please change
"table tbody"
and "mb-2"
to better selectors matching your actual markup
window.addEventListener("load",function() {
document.querySelector("table tbody").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("mb-2")) { // if tgt has a class mb-2
const inp = tgt.closest("tr").querySelector("input[id^=card]"); // starting with "card"
console.log(inp.id,inp.value);
}
});
});
<table>
<tbody>
<tr>
<td><input type="text" id="cardId-1" /></td>
<td><button type="button" class="btn btn-primary mb-2">Submit</button></td>
</tr>
<tr>
<td><input type="text" id="cardId-2" /></td>
<td><button type="button" class="btn btn-primary mb-2">Submit</button></td>
</tr>
<tr>
<td><input type="text" id="cardId-3" /></td>
<td><button type="button" class="btn btn-primary mb-2">Submit</button></td>
</tr>
<tr>
<td><input type="text" id="cardId-4" /></td>
<td><button type="button" class="btn btn-primary mb-2">Submit</button></td>
</tr>
</tbody>
</table>
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");
});
});
<?=form_open('blog/register');?>
<table>
<tr>
<td><label for="register_name">Username : </label></td>
<td><input type="text" name="register_name" readonly="readonly" value="<?=$_POST['username']?>"/></td>
</tr>
<tr>
<td><label for="register_email">Email:</label></td>
<td><input type="text" name="register_email" readonly="readonly" value="<?=$_POST['email']?>"/></td>
</tr>
<tr>
<td><label for="register_password">Password:</label></td>
<td><input type="password" name="register_password" readonly="readonly" value="<?=$_POST['password']?>"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register" onclick="return true;"/></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Edit" onclick="window.location.replace('http://localhost/index.php?username='<?=$_POST['username']?>'&email='<?=$_POST['email']?>');return true;"/>
</td>
</tr>
</table>
<?=form_close()?>
That is the form with two buttons as two choices, the Register button is to redirect the user to the registered screen whereas the second button will direct him to the logon screen. It doesn't work, could someone offer me a hint or any instructions please ?
I click the second button and nothing happens. The first button works fine
Try replacing
<input type="button" value="Edit" onclick="window.location.replace('http://localhost/index.php?username='<?=$_POST['username']?>'&email='<?=$_POST['email']?>');return true;"/>
with
<input type="button" value="Edit" onclick="window.location.href = 'http://localhost/index.php?username=<?=$_POST['username']?>&email=<?=$_POST['email']?>';return true;"/>
I believe you have some quotes mixed up.
To clarify, I removed the single quotes around your php because I believe they aren't necessary and cut off your location string at a place you don't want.
The location string that your code produces is 'http://localhost/index.php?username=', which is incorrect.
UPDATE
Changed replace() to href
Replace the code
<input type="button" value="Edit" onclick="window.location.replace('http://localhost/index.php?username='<?=$_POST['username']?>'&email='<?=$_POST['email']?>');return true;"/>
with
<input type="button" value="Edit" onclick="window.location.replace('http://localhost/index.php?username=<?=$_POST['username']?>&email=<?=$_POST['email']?>');return true;"/>