Modify onclick function with jQuery

Question

I've got a button that has an onclick event in it, which was set on the back end from .NET. Beside it is a checkbox

<button class="img_button" onclick="if(buttonLoader(this)){WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('uxBtnRelease', '', true, '', 'somepage.aspx?oupid=5&fp=true', false, true))} return false;" type="button">Release</button>
<input type="checkbox" checked="checked" id="myCheckbox">

When the checkbox is clicked, needs to change the value of the query string in the URL inside the onclick function of the button.

So far I have this, and the idea is right, but I keep getting errors when it's run: "Uncaught SyntaxError: Unexpected token ILLEGAL"

var defaultReleaseOnClick=null;
$("#myCheckbox").click(function(){
    var $releaseBtn = $(".img_button");
    if(defaultReleaseOnClick==null) defaultReleaseOnClick=$releaseBtn.attr("onclick");

    var newOnClickString =  defaultReleaseOnClick.toString().replace(/&fp=[a-z]+'/i,"&fp="+this.checked);
    $releaseBtn.removeAttr("onclick").click(eval(newOnClickString));
});

I know it seems kinda hacky to convert the function to a string, do a replacement, and then try to convert it back to a function, but I don't know any other way to do it.

Any ideas?

I've set up a demo here: http://jsbin.com/asiwu4/edit

Is the function set by the server already known? Then just prevent default click event and execute the known click event with adjusted value. If not, then your solution seems the best (not a good one, but it works). — jerone
– jerone, Commented Feb 10, 2011 at 23:09

fresskoma · Accepted Answer · 2011-02-10 23:27:25Z

Why don't you use a data-* attribute? For example:

<button ... onclick="doStuff(this);" data-url="something.aspx"></button>

Now in your doStuff() function (or whatever you've got in your onclick attribute) you read from the data-url attribute, and in your checkbox.click event you change it accordingly. That way you won't have to deal with modifying your JavaScript code with regexes, which is something I wouldn't really recommend to anyone.

As of jQuery 1.4.3 you won't even have to deal with jQuery.attr to read from data-* attributes, but you can use jQuery.data which will automatically retrieve the data for you (you can also set it this way).

A simple example:

<input type="submit" id="button" data-url="google.com">
<input type="checkbox" id="checkbox"> 

$('#button').click(function() {
    alert($(this).data('url')); 
});

$('#checkbox').click(function() {
    $('#button').data('url', 'bing.com');
});

http://jsfiddle.net/dSEpR/

Another suggestion: Read up on Unobtrusive JavaScript with jQuery, a technique which made my web-developer life much easier :)

user471679 · Accepted Answer · 2011-02-10 23:08:37Z

0

Couldn't you update a hidden form element with the new fp value?

<input type='hidden' name='fp' value='whatever' />

That way your code to post the form can be a little more generic.

answered Feb 10, 2011 at 23:08

user471679

Comments

Chris Barr · Accepted Answer · 2011-02-14 15:30:15Z

0

I actually found a much simpler solution. I am just going to render two different buttons to the page that each have the needed script in them. The state of the checkbox will only determine which one is visible to be clicked on.

answered Feb 14, 2011 at 15:30

Chris Barr

34.6k28 gold badges105 silver badges157 bronze badges

Collectives™ on Stack Overflow

Modify onclick function with jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related