jqtransform form events problem

Question

I'm a web designer with css experience, but I'm not a JS developer.

I used jqtransform to style a search form , the problem is it removes all events from selectors and the search button .

here is the code before jqtransform

<input id="go-search" type="button" name="btn_search" value="search" onclick="searchLocations()" />

and after applying the script, the button doesn't do any thing I opened the page source and here how it looks like:

<button class=" jqTransformButton" type="button" name="btn_search" id="go-search"><span><span>search</span></span></button>

Please help me !

Answer 1

As far as can see only buttons are affected. The script replaces your original buttons with new ones, so everything besides the id, name, type & class attributes is removed. You would have to assign the function anew when jqtransform finished its job.

// after jqtransform
// probably $("#go-search").click(searchLocations); in jQuery, but I’m not a jQuery user … thus in plain JavaScript:
var bt = document.getElementById("go-search");
if (window.addEventListener) {
    bt.addEventListener("click", searchLocations, false);
}
else {
    bt.attachEvent("onclick", searchLocations);
}

I would hazard a guess at using it like

$(function() {
    //find all form with class jqtransform and apply the plugin
    $("form.jqtransform").jqTransform();
    // fix your button
    $("#go-search").click(searchLocations);
});

Answer 2

THAAAAAAAAAAAAAAAAAAANKS Dormilich The second code works like a charm and the button is functioning pretty well !!!!!!!!

I still need your help in a related problem in the same form it's in a selector which enlist some cities, when i click a one, it should update the selector below it with some locations within that city.

here is the code of the selector

<select name="city" id="city" class="wide" onclick="populateDestrict(this)"> 

I tried to do it like you (but I failed) :

 $(function() { $("form.jqtransform").jqTransform(); $("#city").click(populateDestrict(this)); }); 

Answer 3

I think it’s best to put new questions in new posts …

$(function() { $("form.jqtransform").jqTransform(); $("#city").click(populateDestrict); });

when assigning functions to an event by JavaScript, you only assign the function reference. putting parentheses behind a function identifyer will execute the function.

function myFunction(x)
{
    alert(x);
    return 1;
}

// correct, the onload event will trigger the function
window.onload = myFunction;
// alerts "[object Event]"

// wrong
window.onload = myFunction("hello");
// this assigns "1" to the onload property*
// * - IE may execute this, but no standard compliant browser