jQuery change value of html input onClick - javascript

I need to change the value of the url of the onclick portion of my input tags
<input type="image" onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" />
I have the needed url being dynamically stored in a variable on hover function.
$('ul.photos img').hover(function(){
var imgSrc = $(this).attr("src");
How can I take this variable and plug it into the needed area?
Thanks for any help

Something like this should work:
<input type="image" onclick="return launchEditor('image1', window.foo);" />
And the hover callback:
$('ul.photos img').hover(function(){
window.foo = $(this).attr("src");
});
Replace foo by anything you want.
But some more details on what it should do would let us help you better. Even though this should work, it's probably not the cleanest solution.

If you have that local variable in your hover handler, you either will have to make it globally available and use it in the onclick function, or you will have to change the onclick function (here: attribute) in the hover handler.

The simplest solution is to add:
<input onmouseover="this.onclick=function(){ [javascript] }"/>
with [javascript] being the code you want executed on click.

Related

How to pass an alt attribute in an on click method

Hello I have the following code:
<img alt="image321" onclick="image(//here i want to pass the alt attribute to my function Bild()//);" src="http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg" />
<script>
function image(alt){
alert(alt.src);
}
</script>
I have my image and have given it an alt attribute with the value "image321".Now I want to pass this value to my function image() and output the value with alert as soon as I clicked on the image. But the output is always undifined. Could someone please help me how to solve this problem.
Many greetings Nils
First thing would be to avoid inline handlers - they have quite a few problems, too many to be worth using nowadays, such as a demented scope chain and quote escaping issues. Attach event listeners properly using Javascript with addEventListener instead.
Inside the listener, reference this to get to the clicked element, and its src property to get to its src:
document.querySelector('img').addEventListener('click', function() {
console.log(this.src);
console.log(this.alt);
});
<img alt="image321" src="http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg" />
function myfunc(img){
alert(img.alt);
}
<img alt="image321" onclick="myfunc(this);" src="http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg" />
You should try using this, which sends the element that you run the function with.
Here is an example:
function image(alt) {
alert(alt.src);
}
<img alt="image321" src="http://i3.ytimg.com/vi/${videoId}/hqdefault.jpg" onclick="image(this)"/>

jQuery chained functions and "this": Where is my syntax incorrect in this example?

Here's the situation:
I have 3 buttons
<button type="button" class="job-update-button wp-core-ui button-primary" id="delete-btn">Remove</button>
<button type="button" class="job-update-button wp-core-ui button-primary" id="update-btn">Update</button>
<button type="button" class="job-update-button wp-core-ui button-primary" id="add-btn">Add</button>
and an input
<input type="hidden" name="jobAction" value="" />
whose value is supposed to relate to the id of whichever button has been clicked. It might look silly, but this is my way of consolidating the logic on the page so that a single script on the server can handle a bundle of related AJAX requests.
delete-btn clicked --> jobAction gets value of delete
update-btn clicked --> jobAction gets value of update
add-btn clicked --> jobAction gets value of add
The function I'm using for the click events starts with
jQuery('.job-update-button').click(function(){
// change the value of the memberAction hidden input based on which member-update-button was clicked
jQuery('input[name="jobAction]"').val(jQuery(this).attr('id').substring(0, this.IndexOf('-')));
and I'm trying to figure out why I'm getting
this.IndexOf is not a function.
My thinking is that by the time I call this.IndexOf('-') the this refers to the object invoking substring, which is the string returned by jQuery(this).attr('id').
Is that wrong? If so, can you help me understand why? And is there a more efficient and compact way of going about this whole procedure?
Your Jquery function is messed up all you need is:
$('.job-update-button').click(function(){
// change the value of the memberAction hidden input based on which member-update-button was clicked
var id = $(this).attr('id');
var value = id.replace("-", " ");
$('input[name="jobAction"]').val(value);
})
For starters you dont need to call jQuery the shorthand way is simply $
It looks like you have a " outta place in your code. Change this:
'input[name="jobAction]"'
To:
'input[name="jobAction"]'
Working codepen example
Please note instead of:
jQuery('.job-update-button').click(function(){}
I used:
$('.job-update-button').click(function(){}
You could call jQuery every time but $ is easier.
If its not what you're looking for just let me know and I will edit or delete.
Let's break your code down a bit to make it clearer:
jQuery('.job-update-button').click( function(){
var value = jQuery(this).attr('id').substring(0, this.IndexOf('-'));
jQuery('input[name="jobAction"]').val( value );
});
Inside the click event handler, this refers to the HTML element that triggered it. That is just the way jQuery works internally (you can explicitly set this or 'scope' when calling or applying a function).
That means you are trying to call indexOf (note the correct spelling) on an HTML element, which does not have an indexOf method.
Also, note that most people use the $ shorthand for the jQuery method.
To fix your code, this would probably suffice:
$('.job-update-button').click( function(){
$('input[name="jobAction"]').val( $(this).attr('id').replace(/-btn$/, '') );
});
Here, I'm using the replace method with a Regular Expression in order to strip out the appended '-btn' part of the id.

JQUERY appending a button with onClick event and passing javascript variable in it

parameters=eval([[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]);
<input type="submit" value="Pie Chart" onClick="showChart('<?php echo $title;?>',parameters,'#container','chart','Pie Chart')"/>
this works fine when I'm just including this into my html code.
but I want to append this into a specific div using javascript or jquery. like this.
<script>
parameter=eval("[[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]");
myButton="<input type="submit" value="Pie Chart" onClick="showChart('<?php echo $title;?>',parameters,'#container','chart','Pie Chart')"/>";
$('#content').append(myButton);
</script>
My problem is, it does not perform the function whenever I click the button. Maybe because of the variable parameter that I passed and my question is how can I do this correctly? And I'm avoiding using ajax cause it will affect a big portion of my codes.
Try this : use escape characters and add parameter variable using plus operator
<script>
parameter=eval("[[\"April\",[[\"medical\",\"1\"],[\"financial\",\"4\"],[\"burial\",\"1\"]]],[\"May\",[[\"medical\",\"2\"],[\"financial\",\"6\"],[\"burial\",\"6\"]]]]");
myButton="<input type=\"submit\" value=\"Pie Chart\" onClick=\"showChart('<?php echo $title;?>',"+parameters+",'#container','chart','Pie Chart')\"/>";
$('#content').append(myButton);
</script>
jQuery('#yourbutton').on('click', function() {
}); // your on click event
//to add content to innerhtml of div:
jQuery('#divelementorother').html(jQuery('#divelementorother').html() + YourDataToInside);
First, you see the .on function of jQuery to get an event handler on click to execute function. You can append that as JavaScript to the html of div, so you doesn`t have to use the button itselfs onclick
Second, to extend the innerhtml or html of an elemnt like , you've to use .html(data) . Or, i see above my post: you can use append.
Greetings

Split up and modify an element with jQuery

Here's a confusing question. I need to replace an <input> with a different <input> but I need to preserve the onclick attribute. Here's an example:
<input type="image" class="previous_page_img graybutton mediumbutton" src="btn_prevpage.png" onclick="Add_Search_Param('page', 1); Refine();" alt="">
Since I cannot change the <input> type to a button, I want to replace it with a button, however, I need to preserve the "onclick" attribute. So first, I'd have to break up the element. Replace it with a button and append the original onclick attribute to the new button.
So in the end, I'd have this onclick="Add_Search_Param('page', 1); Refine();" added to the new button. Since the onclick changes, a simple .attr or .prop function would not be sufficient. It must clone the onclick attribute. Can anyone help me? Thanks.
Here's jsFiddle that does not preserve the onclick attribute but does everything else: http://jsfiddle.net/rAMcw/
You could do (i used a simple javascript function to test it)
<input type="image" class="previous_page_img graybutton mediumbutton" src="btn_prevpage.png" onclick="Add_Search_Param('page', 1); Refine();" alt="">
var onclick = $('.mediumbutton').attr('onclick');
var but = $('<input/>', { type: "button", value: "pressme", onclick: onclick});
$('.mediumbutton').replaceWith(but);
fiddle here http://jsfiddle.net/KjBm3/
Just create a new button right after the input, set the input to display: none; (or jQuery('#input').hide()) and have the button onclick trigger the input's onclick (jQuery('#button').click(function(){ jQuery('#input').trigger('click'); });
How about cloning?
var x = $('input').clone(true);
x.attr('type','button').addClass('previous_page_img graybutton mediumbutton').val('Previous Page');
$('input').replaceWith(x);
Updated jsFiddle
What is wrong with turning the existing input element into a button?
$("input.previous_page_img").prop("type", "button").val("Previous Page");
jQuery 1.4.2: (set the property in plain-old JavaScript);
$("input.previous_page_img").val("Previous Page")[0].type = "button";
Demo

Javascript getElementById()

I'm trying to create a generic javascript function that would change attributes on events.
The way it would work is
function fooFunction(sourceElement)
{
var newName = sourceElement+'Span';
var newElement = document.getElementById(newName);
//Important line
newElement.property = "enter properties here";
}
and I'd call it with something like
<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction(this.id);"/>
<span id="fooSpan" name="fooSpan">some text here</span>
So in theory, when hovering the image, it should change whatever propery I need to change on the fooSpan object. It works in Opera, but on IE it returns a null object.
Any ideas ?
The idea would be that I would have multiple images that would automatically trigger the property change on the associated text span (typically the css style).
Are you sure you're getting the ID properly in IE? Maybe the ID being passed in is null in IE (perhaps this.id isn't working?).
Try calling it like this:
<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction('foo');"/>
and see if that helps. I don't see any reason why getElementById() would fail, so the only thing I can think of is that it's an ID issue.
May be this line won't work in IE. "newElement.property"
I don't know the exact reason.
You can use this instead of that line
newElement.setAttribute(property,"enter properties here");
In the mean time, i am trying to find out the reason behind the error.
My suggestion would to do something like this.
function fooFunction(sourceElement,property,propertyValue) {
var newElement = document.getElementById(sourceElement);
newElement.setAttribute(property,propertyValue);
};
And your HTML would look like:
<img src="foo.gif" id="foo" name="foo"
onmouseover="fooFunction('fooSpan','class','mouseover_span');"/>
<span id="fooSpan" name="fooSpan">some text here</span>
I'd STRONGLY urge you to consider using jQuery's built-in attr() method which integrates the function you want perfectly across browsers and is incredibly easy to use.
Using your example, if you wanted to change the "src" property for "foo", you could do it in a single line of code:
$("#foo").attr("src","images/whatever.png");
Similarly, if you wanted to change the html WITHIN "fooSpan", all you'd have to do is:
$("#fooSpan").html("something else");
You can even tie these to events that are going to give you a lot more flexibility than the onmouseover property:
$(document).ready(function(){
$("#foo").mouseover(function(){
$("#fooSpan").html("something else");
$("#foo").attr("src","images/whatever.png");
});
});

Categories