I have a button thats value is set based on a mysql query in php like so:
echo "<td><button class='jsontable' onclick='Copythat(this.value)' value='" . $row['json'] . "'> " . $row['name'] . "</button></td>";
the text of the button is the name row, which works currently.
and a function that i have basically in place to try and grab the string and send it to the load function. the load function needs to receive only text of that mysql row json
function Copythat(el.val) {
var jsontoload = $(el.val).html();
load(jsontoload);
}
If you pass this to your function, you get the context of the element where the event occurred. Once you've got that, you can pass it to jQuery and you can get the "value" attribute using the .val() shortcut method.
Note that function Copythat(el.val) { needs to be something simply like function Copythat(val) { - function parameters must be standalone variables, they cannot be written like object properties.
function Copythat(input) {
var attrValue = $(input).val();
alert(attrValue);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='jsontable' onclick='Copythat(this)' value='Something'>A button</button>
You could also convert the whole thing to jQuery and ditch the inline event handler:
$(function() {
$(".jsontable").click(function(event) {
var attrValue = $(this).val();
alert(attrValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='jsontable' value='Something'>A button</button>
Or it should also be noted that for something as simple as this you don't really need jQuery at all:
function Copythat(input) {
alert(input.value);
}
<button class='jsontable' onclick='Copythat(this)' value='Something'>A button</button>
Another further simplification if you literally only need the value to go into your function:
function Copythat(input) {
alert(input);
}
<button class='jsontable' onclick='Copythat(this.value)' value='Something'>A button</button>
Related
I'm trying to pass 2 variable using onClick inside of <a> tag
Here's my code:
<a onClick="pbDiv(id=1);">Enter</a>
<script>
function pbDiv(id){
alert(id);
}
</script>
This works perfectly as it should be.
But the problem is I need to pass 2 variable
Example of variable
id=1
name=myname
inside of onClick
Is that even possible?
tried this one onClick="pbDiv(id=1,name=name);"
seems not working to me.
In javascript, you define the name as an argument, and never pass in the name of the argument as a parameter. TypeScript (a version of javascript) does this, however.
function pbDiv(id, name){
alert("id: " + id + ", name: " + name);
}
<a onclick="pbDiv(1, 'foo');" href="#">Enter</a>
Pass object instead
<a onClick="pbDiv(options={id:1, name: 'deepak'});">Enter</a>
<script>
function pbDiv(options) {
alert(options.id + options.name);
}
</script>
I have Bootstrap Table that contains an edit button on each row. I've used a data formatter to make the pass the id of the record over with a data attribute that can be extracted when clicked. When I inspect the element in the console I can see the ID is in the dataset property, but when I try to get it out using element.dataset the console contains an error telling me that the dataset is undefined. It's frustrating because I can see it's there!
Here's my click event:
$(".job-edit").click(function(event) {
var editModal = $("#jobEditModal");
var clicked = $(event.target);
var id = clicked.dataset.jobid;
console.log(id);
event.stopPropagation();
//editModal.modal();
});
And the formatter that sets the button up:
job.editFormatter = function (value) {
return "<button class='btn job-edit text-center' data-jobId='" + value + "'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> Edit</button>";
}
So far I've tried replacing .dataset with .getAttribute(), but that didn't work either, I've also tried changing the casing of jobid to jobId, past that I'm not sure what could be causing the problem.
instead of using dataset you can directly get the jobid by using .data() method of jquery like below.you are getting undefined value for dataset as the clicked variable is a jquery object which does not have a definition for dataset
$(".job-edit").click(function(event) {
var editModal = $("#jobEditModal");
var id = $(this).data("jobid");
console.log(id);
event.stopPropagation();
//editModal.modal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn job-edit text-center' data-jobId='2'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> Edit</button>
Your issue is because clicked is a jQuery object which has no dataset property.
To fix this you need to use the native element reference:
var id = e.target.dataset.jobid;
Alternatively, use the data() method of the jQuery object:
var id = clicked.data('jobid');
I have used a function to capture the Query String value of "name" - i.e. imagine a party invite site;
https://cometomyparty.com?name=phil
The function used is;
<script type="text/javascript">
function getQuerystring(){
var q=document.location.toString();
q=q.split("?");
q=q[1].split("&");
var str=""
for(i=0;i<q.length;i++){
tmp=q[i].split("=")
str+=" "+tmp[1]+"<br />"
}
document.getElementById("name").innerHTML=str
}
onload=function(){
getQuerystring()
}
</script>
Then I can call the value of 'name' using id="name" where I want to use this on my page, i.e. in the heading, I could say, Phil, looking forward to having you at the party...
How can I dynamically append my 'name' value (var str) within a html link placement i.e.
Link Text
Which would return, in the example above;
http://example.com?name=phil
You can access the href attribute of the <a> tag directly or by using .setAttribute:
// Using .href:
document.getElementById("name").href=str;
// Using . setAttribute:
document.getElementById("name").setAttribute ("href", str);
Be aware that you should have that <br/> tag in the src of the link.
Try this:
<a href="#" onclick='goToPage(event)'>Link Text</a>
<script>
function goToPage(event) {
event.preventDefault();
window.location='http://example.com?name='+str;
}
</script>
Ideally you would want to use jquery where you could use:
$('#link').click(function(event) {
event.preventDefault();
var link = $(this).attr('src');
window.location=link+str
});
You would of course want to remove "str" from the href
Is there a way to pass the value attribute from HTML side to JavaScript function via onclick event?
html/php
echo '';
javascript
<script>
doFunction(value){
alert(value);
}
</script
this.value is undefined. This.id is the way I've handled it in the past, but now that i am dynamically writing a list with classnames, I don't quite understand how to pass the value from the HTML. This = [object OBJECT] and this.value is undefined. I can get the value if i use ID but not class. what am i doing wrong?
Alternatively, you could use the getAttribute method to get the value. Example:
<?php
$varVal = 100;
echo 'test';
?>
<script type="text/javascript">
function doFunction(value) {
alert(value);
}
</script>
JSBin
Would something like this work for you? (using getAttribute)
HTML
<a href="#" value="myName" id="anchor" >LINK</a>
JS
var a = document.getElementById("anchor");
a.addEventListener("click", function(event){
event.preventDefault();
alert(this.getAttribute("value"));
}, false);
I'm having some trouble getting this work, I'm using JQuery to get a list of results from mySQL, the results include a name and handler link (JQuery) that should trigger a function/event, but it is not working for some reason
Here is the code from my first page:
This script runs a query and gets the results from the ajax_load.php file using JQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$("#lets_library").bind('submit',function() {
var value_name = $('#name').val();
if(value_name)
{
$("#find_library").html('Loading results...');
}
$.post('ajax_load.php',{value_name:value_name}, function(data){
$("#search_results_library").html(data);
});
return false;
});
});
</script>
This other script in the same first page is for the click handler, showing the ID clicked, but it is not working:
<script type="text/javascript">
$(document).ready(function(){
/// shows my ID from the result row ///
$('.next-click').click(function() {
alert("my id: " + $(this).data("id"));
});
});
</script>
This is part of the code from the ajax_load.php that returns the results with the link and ID to be clicked:
while($row = mysql_fetch_array($result_query))
{
echo '
<table width="100%" border="1">
<tr>
<td>
';
echo '<a href="#" class="next-click" data-id="'; echo $row['ID']; echo '">';
echo $row['name'];
echo '</a>
</td>
</tr>
</table>';
}
The problem is, when I click on the link it adds an # to the end of the URL page and nothing happens like the script is not even there.
Please help!
You need to use event delegation as the link is created dynamically
$(document).ready(function () {
/// shows my ID from the result row ///
$('#search_results_library').on('click', '.next-click', function () {
alert("my id: " + $(this).data("id"));
});
});
When you use $('.next-click').click(..), the click handler will get registered to only those next-click elements which exists in the page when the script is executed. The elements added later will not get the triggers.
So the solution is to bind the handler to an element which already exists in the dom(which is an ancestor of the target element), but pass a additional selector which will specify the actual target we are looking for. jQuery's .on() method provides this functionality
Try this:
$("#search_results_library").on('click', '.next-click', function(e) {
e.preventDefault();
alert("my id: " + $(this).data("id"));
});