I have been customizing the Search module, for which I chose to create a search-theme-form.tpl.php file and override the module at the theme level.

One remaining task is attaching some javascript events such as onFocus and OnMouseOver to the text box and the submit button. I could not figure out how to embed havascript into my code fragments. Here is the code from search-theme-form.tpl.php I need to modyfy.

$search["submit"]=str_replace('input type="submit"', 'input type="image" src="images/search_button.jpg", $search["submit"]);

I would like, for example, onMouseOver event be attached to this button.

Thank you in advance.

Comments

criznach’s picture

I'd recommend using drupal_add_js to add an external js file when your form is displayed. In that js file, use JQuery's $(document).ready() feature to add your event handlers.

hovhannisyan’s picture

I am sure that would be a nice solution at a higher level, but for now I would appreciate if you give me a clue on how you would trigger an event from the code I posted above. In a classical HTML format it would have been like

input type="button" onmouseover="callSomeJavascriptFunction()"

Can I call a javascript function in a similar way within this PHP code?

$search["submit"]=str_replace('input type="submit"', 'input type="image" src="images/search_button.jpg" ', $search["submit"]);
print $search['submit'];

Thank you.

prestonso’s picture

An alternative to the solution above could be to just use CSS selectors to do the job, if your onmouseover and onfocus events are strictly aesthetic. input:focus, input:hover, input[type='submit']:focus, and input[type='submit']:hover would all fulfill that purpose.
___________________

Preston So
Web/Print Designer
Monarch Digital, Colorado Springs
My near-dead non-Drupal site

___________________

Preston So

yamboy’s picture

you can use the '#attributes' to pass along any attributes for your form elements. for example:

<?php
  $form['submit'] = array (
    '#type' => 'image_button',
    '#src' => 'images/submit-out.gif',
    '#attributes' = array(
      'onmouseover' => "this.src='images/submit-over.gif'",
      'onmouseout' => "this.src='images/submit-out.gif'",
    ),
  );
?>