Change the value of an existing onclick function

Question

I have a page that is pulling in via an iframe a page of html content from a pre-existing content management system, whose content I can not directly change. I want to use jquery to alter some of the links and button locations dynamically.

For links within the page I was able to change the href attr values of

<a href="/content.asp">more</a>

from content.asp to content2.asp using

$("a[href^='/content.asp']")
.each(function()   {       this.href = this.href.replace("content.asp",          "content2.asp");   });

But the page pulled in also has form buttons that contains javascript onclick functions e.g.

<INPUT type="button" value="Add to basket" onClick="document.location='/shopping-basket.asp?mode=add&id_Product=1076';">

I basically want to use jquery to select any such buttons and change the shopping-basket.asp to shopping-basket2.asp

How can I select these buttons/onclick functions and change the location string?

Answer 1

Attributes are changed with the .attr method.

$("a").each(function(){
  $(this).attr("href","content.asp");
});

You should be able to replace hard-coded-onClick text as well. To select those buttons, you can either grab all of them:

$("input.convertMe").each(function(){...});

Or you can add classes to the buttons you are specifically interested in:

<input type="button" class="convertMe"...>

Once you've done either of those two, you simply run through each testing their onClick attribute, and determining if you need to do any changes:

$("input.convertMe").each(function(){
  // Test onClick attr, and replace string.
});

Answer 2

Give your button a unique id and then reference it from a javascript script with:

document.getElementById("idOfButton").onClick

Simply set the value to a new text string.

Answer 3

Thanks Jonathan, but what I really need to know is if and how to select the input buttons mentioned in my last example and alter the pre-existing onclick function location. Thanks again

Answer 4

Not very proud of this solution, but it works....

var getid = /id_Product=(\d+)/;
$('input[type="button"]').each(function() {
    var onclick = String(this.onclick);
    var id = onclick.match(getid);
    if(id) {
        this.onclick = function() {
            window.location = "/shopping-basket2.asp?mode=add&id_Product=" + id[1];
        };
    }
});

Answer 5

http://docs.jquery.com/Selectors/attributeContains#attributevalue

$("input[onClick*='shopping-basket.asp']").each( ... )

Answer 6

Many Thanks Paolo. This is very helpful. I am a relative newcomer to jQuery and so getting an example solution to the actual problem at hand for me is very helpful, as I was struck. Many Thanks Again.

Answer 7

Just thought that I would update this answer as I have tried several combination in JQuery 1.4.1

1) onclick= function() - not working

$("input").each(function() {
    $(this).onclick = function() {
        window.location.href= 'http://www.google.com';
        return false;
    }
}

2) $newclick = eval(...) not working

$("input").each(function() {
    $jscript = "window.location.href= 'http://www.google.com'; return false;"
    $newclick = eval("(function(){" + $jscript + "});");
    $(this).onclick = newclick;

}

btw. $newclick is evaluated to be undefined

3) the new answer that works in JQuery 1.4.1

$("input").each(function() {
     $(this).click(function() {
        window.location.href = "http://www.google.com";
        return false;
 });

I searched the JQuery API and there is no onclick documentation. Looks like click() is the way to go. Let me know if I have made any mistake(s).

Cheers