CODEWITHSUNDEEP
javascriptjqueryfunctiononclick
Chris Barr
Chris Barr

Reputation: 34151

Modify onclick function with jQuery

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

Upvotes: 0

Views: 2011

Answers (3)

Chris Barr
Chris Barr

Reputation: 34151

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.

Upvotes: 0

fresskoma
fresskoma

Reputation: 25791

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 :)

Upvotes: 1

user471679
user471679

Reputation:

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.

Upvotes: 0

Related Questions