CODEWITHSUNDEEP
javascriptcsshtmldomsearch
Theodore Steiner
Theodore Steiner

Reputation: 1615

Javascript Logic in Extending Search Bar

I've created an expanding search bar: You click on the magnifying glass the input extends out and to the right, click it again and it closes. (See Fiddle Below).

I'm new to the world of JS and I thought this would be a great opportunity to implement some logic. Here's what I;m trying to do:

  1. If the search bar is open and the inner.html is empty, if you click the "search" magnifying glass, I want to prevent the default submission of the form and simply close the search bar
  2. If there is text, I want the form to be submitted.

Right now I've got the elements layered in such a way as to when you click the "search" button for the first time, the bar extends and the z-index of the button drops to one where the actual submit button is higher, but I want to control the functionality a little more.

What I've tried:

I tried creating a function that added an event listener that said, basically, if the bar has a width of 700px (the extended length) and the inner html is empty, bring the z-index of the extend button up back higher than the submit simply close the form. But I can't seem to work the logic out properly.

I'm wondering how in JS you can control the z-index.

Here is the code I tried and did not work. I tried something simply like just alerting when the task I wanted to watch for was done first but it doesn't seem to be working.

Any help would be wonderful.

Code:

HTML:
<div id="wrap">
<form id="myForm">
    <input id="search" name="search" type="text" placeholder="What are we   looking for?" />
    <input id="search_submit" value="" type="submit">
    </form>
 </div>

CSS:

#wrap
{
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
}

input[type="text"]
{
height: 40px;
font-size: 35px;
border: none;
outline: none;
color: #555;
padding-right: 60px;
position: absolute;
width: 0px;
top: 0;
right: 0;
background: none;
z-index: 4;
cursor: pointer;
transition: width .4s ease-in-out;
}

input[type="text"]:focus
{
width: 700px;
z-index: 1;
border-bottom: 1px solid #bbb;
cursor: text;
}

input[type="submit"]
{
position: absolute;
height: 60px;
width: 60px;
display: inline-block;
float: right;
background:     url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
border: none;
outline:none;
top: -15px;
right: 0;
z-index: 2;
cursor: pointer;
transition: all .4s ease;
}

JS

var search = document.getElementById("myForm").search;
var search_submit = document.getElementById("myForm").search_submit;

function showOpen()
{
     if(search.style.width=="700px")
{
alert("OPEN!");
}
};


 search.addEventListener("click", showOpen);

 showOpen();

HERE IS THE FIDDLE: https://jsfiddle.net/theodore_steiner/7begmkf3/37/

Upvotes: 0

Views: 789

Answers (2)

sahilkmr78
sahilkmr78

Reputation: 184

Your issue can be solved using a few basic JavaScript elements (if you're looking to get into basic logic, these are important to know). The JS uses onsubmit, onclick, and some basic form logic. Basically, when you try to submit the form it checks if the form is empty, and if it is, the program refuses to submit the code. I added the new JavaScript to the HTML file:

<script>
function check(){
    value = document.forms["myForm"]["search"].value;
  if(value == "" || value == null){
    alert("please enter a search term");
    return false;
  }else{
    document.getElementById("myForm").submit();
  }
}
</script>

<div id="wrap">
    <form id="myForm" onsubmit="return check()">
        <input id="searchBar" name="search" type="text" placeholder="What are we looking for?" />
        <input id="search_submit" value="" type = "submit">
        </form>
</div>

fiddle: https://jsfiddle.net/q1L3Lstx/1/ It might also help in the future to look at the required element: http://www.w3schools.com/tags/att_input_required.asp

Upvotes: 1

Running Buffalo
Running Buffalo

Reputation: 1323

I saw a couple of issues with the code.

search and search_submit are pointing to the wrong items they can be like this:

var search = document.getElementById("search");
var search_submit = document.getElementById("search_submit");

You could call a function on submit. like this:

<form id="myForm" onsubmit="myFunction(event)">

finally you can work your code inside that function: 

function myFunction(e){
    if(search.value.length <= 0){
        e.preventDefault();
        alert('empty');
    }
}

Upvotes: 0

Related Questions