Reputation: 34151
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
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
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');
});
Another suggestion: Read up on Unobtrusive JavaScript with jQuery, a technique which made my web-developer life much easier :)
Upvotes: 1
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