Javascript onclick function - 2 clicks needed to work

Question

I have the following Javascript code:

function toggleSearch() {
  if(document.getElementById("searchitem").style.display == "block" ) {
    document.getElementById("searchitem").style.display = "none";
    document.getElementById("topsearchform").style.display = "block";
  }
  else {
    document.getElementById("searchitem").style.display = "block";
  }


}

function backtonormal() {
  if(document.getElementById("searchitem").style.display == "none" ) {
    document.getElementById("searchitem").style.display = "block";
    document.getElementById("topsearchform").style.display = "none";
  }
  else {
    document.getElementById("searchitem").style.display = "none";
  }


}

And the following HTML Code:

<li id="searchitem">
  <a href="#" onclick="toggleSearch();"><span>Search<span class="cursor"></span></span></a></li>
   <li>
     <div id="topsearchform">
<form class="topsearchform" action="http://www.ovisionmedia.com/search/" method="get" target="_top">
 <input type="text" name="search_text" class="search_text" onblur="backtonormal();" autofocus/>
<input type="button" name="button" class="button">
   </a>
    </form>
   </div>
</li>

The code is for a custom wordpress menu item which I created as follows:

function wpa_58902($items, $args){
if( 'main-menu' === $args -> theme_location ) {
    $search = '<li id="searchitem"><a href="#" onclick="toggleSearch();"><span>Search<span class="cursor"></span></span></a></li>';
    $search .= '<li><div id="topsearchform"><form class="topsearchform" action="http://www.ovisionmedia.com/search/" method="get" target="_top">';
    $search .= '<input type="text" name="search_text" class="search_text" onblur="backtonormal();" autofocus/><input type="button" name="button" class="button"></a></form></div></li>';

}
    return $items . $search;
}
add_filter('wp_nav_menu_items','wpa_58902',10,2);

The Javascript function should be executed when the searchitem link is clicked ( 1 time).

Problem: I have to click 2 times so the function will be executed.

2nd Problem: What code do I have to add to the Javascript function for the form input to be automatically focused? Right now the auto focus is only working if I reload the page.

Thank you very much!!

EDIT:

PROBLEMS SOLVED

@Zlatan O. - thank you very much! I found a solution on my own :-)

The Problem was that on the first click display:block was not set. After the first click display:block has been set and so on the second click it worked.

Here is the working code without using jquery:

function toggleSearch() {
document.getElementById("searchitem").style.display = "block";
  if(document.getElementById("searchitem").style.display == "block" ) {
    document.getElementById("searchitem").style.display = "none";
document.getElementById("topsearchform").style.display = "block";
document.getElementById('search_text2').focus();
  }
  else {
    document.getElementById("searchitem").style.display = "block";
  }


}

function backtonormal() {
  if(document.getElementById("searchitem").style.display == "none" ) {
    document.getElementById("searchitem").style.display = "block";
document.getElementById("topsearchform").style.display = "none";
document.getElementById('search_text2').focus();

  }
  else {
    document.getElementById("searchitem").style.display = "none";
  }


}

maybe it is not the best solution - I don't know - but it works :-)

Again thank you very much!!

http://www.codeproject.com/Articles/157446/What-is-jQuery-and-How-to-Start-using-jQuery — , Jul 11 '13 at 22:37
Thank you - but could you be more specific please? I would like to avoid jquery here if possible — Simon H., Jul 11 '13 at 22:40
sorry - I am just beginning with javascript. So do I have to wrap my code into a .ready function? Could you please give me a code example? Thank you very much! — Simon H., Jul 11 '13 at 22:48

score 0 · Accepted Answer · 2013-07-11T23:11:37.750

0

In jQuery you can do it like this:

$(document).ready(function() {
    $('li#searchitem a').click(function() {
        $('#searchitem, #topsearchform').toggle();

            $('input[name="search_text"]').focus();
    });

    $('input[name="search_text"]').blur(function() {
        $('#searchitem, #topsearchform').toggle();
    });
});

Done!

edited Jul 11 '13 at 23:11

answered Jul 11 '13 at 22:57

Thank you very much! Unfortunately it is not working for me :( I replaced the code in my javascript file with your code. The result is that the code is not executed. I am using wordpress and jquery is loaded by default. I will update my question a little bit. – Simon H. Jul 11 '13 at 23:02
Why don't you reverse-engineer it and get it working, all by yourself? – Jul 11 '13 at 23:04
belive me - I tried! But I can't find the solution on my own and grade of experience. And I have been searching a lot on forums and on this site, too. :( Anyway thank you for trying to help! Really appreciate! unfortunately I cannot vote up your answer because my reputation is too low – Simon H. Jul 11 '13 at 23:09
@SimonH. - Sorry, there's a mistake made by me. I am editing the answer right now... – Jul 11 '13 at 23:09
sorry - no. :( still no joy. Code added but nothing happens. Maybe I have to explain more dtailed what I need: If the searchitem link is clicked the searchitem should disappear and the topsearchform should appear with autofocus. If the input is loosing focus the form should disappear and the searchitem should appear again. – Simon H. Jul 11 '13 at 23:22
I just checked - it is loaded. After I first tried I noticed the following: http://www.mkyong.com/jquery/jquery-is-not-working-in-wordpress-solution/ and changed your code. but still no change :( nothing happens when I click on the search item link – Simon H. Jul 11 '13 at 23:42
Thank you very much for your help! Unfortunately my reputation is too low to rate up your answer :( I found a working solution on my own :-) see latest edit of the question. Again thank you very much! – Simon H. Jul 12 '13 at 02:12

Javascript onclick function - 2 clicks needed to work

1 Answers1