CODEWITHSUNDEEP
javascriptjquery
karadayi
karadayi

Reputation: 2269

Button first action on click and second action on click

The animated Search Box is expanding at click on the button the input. After entering any Text and a second click on the icon it should send the form with the method get.

I do not know what I am doing wrong and would be happy if I can get some help.

<form action="navi.php" method="GET">
    <div class="search-wrapper">
        <div class="input-holder">
            <input type="text" class="search-input" placeholder="Type to search" />
            <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
        </div>
    </div>
</form>

The Javascript Function

function searchToggle(obj, evt){
    var container = $(obj).closest('.search-wrapper');

    if(!container.hasClass('active')){
          container.addClass('active');
          evt.preventDefault();
    }
    else if(container.hasClass('active')){
          container.removeClass('active');
          // clear input
          container.find('.search-input').val('');
          // clear and hide result container when we press close
          container.find('.result-container').fadeOut(100, function(){$(this).empty();});
    }
}

Upvotes: 0

Views: 405

Answers (2)

Garvit Mangal
Garvit Mangal

Reputation: 900

Try using it like this

function searchToggle(obj){
    var container = $(obj).find('.search-wrapper');

    if(!container.hasClass('active')){
          container.addClass('active');
          return false;
    }
    else if(container.hasClass('active')){
          container.removeClass('active');
          // clear input
          container.find('.search-input').val('');
          // clear and hide result container when we press close
          container.find('.result-container').fadeOut(100, function(){$(this).empty();});
      return true;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="navi.php" method="GET" onsubmit="return searchToggle(this);">
    <div class="search-wrapper">
        <div class="input-holder">
            <input type="text" class="search-input" placeholder="Type to search" />
            <button class="search-icon" type="submit"><span></span>SUBMIT</button>
        </div>
    </div>
</form>

Upvotes: 1

user2554865
user2554865

Reputation: 365

Well, you making value of your .search-input empty and sending empty value to navi.php.

And your button must have attribute type="submit" to submit form. If you remove container.find('.search-input').val(''); and add type="submit" it will work.

Also else if(container.hasClass('active')) is meaningless, you can use just else. And onclick is not recommended to use. If you use jQuery, you should use $.bind() or $.on() ...

Upvotes: 0

Related Questions