[SOLVED] Changing search value via JavaScript

Changing search value via JavaScript

yesterday I created a topic here How to change search value using a drop down selector?

and I figured it with help of Fredrik but after a time I changed my idea and I removed select because it was not good inside input than I created some links using the font awesome icons which now is looking better

My Final Search form is

<div class="searchbox">
<form action="<?php echo home_url( '/' ); ?>" method="get"><button name="search" class="btn">
<span></span></button>
<input type="text" id="s" name="s" value="" />

<input type="hidden" name="post_type" value="post" />

<div class="select_search">

<span class="wrs">
<i class="fa fa-video-camera" id="search_type_icon"></i>
<i class="fa fa-caret-down"></i>
</span>

<div class="drop_search">
<span data-searchtype="photos">
<i class="fa fa-picture-o"></i>
</span>
</div>

</div>

</form>
</div>

and My JS

<script type="text/javascript">
function SearchPostValue(e) {
e.preventDefault();
var t = $(this);
var searchtype = t.attr('data-searchtype');
if (searchtype == 'post') {
$('#search_type_icon').removeClass('fa fa-picture-o').addClass('fa fa-video-camera');
$('[data-searchtype]').attr('data-searchtype', 'gallery').find('i').removeClass('fa fa-video-camera').addClass('fa fa-picture-o');
} else {
$('#search_type_icon').removeClass('fa fa-video-camera').addClass('fa fa-picture-o');
$('[data-searchtype]').attr('data-searchtype', 'post').find('i').removeClass('fa fa-picture-o').addClass('fa fa-video-camera');
}
$('.searchbox #search_type').attr('value', searchtype);
}
$(document).ready(function(){
$('.searchbox .drop_search [data-searchtype]').click(SearchPostValue);
});
</script>

nothing worked. It's a shame for me, but I spent hours and I cannot figure it out as I want.

When I click on picture icon I want to change the value="post" to value="gallery" when I click on photo icon nothing happens.

My CSS

.select_search {
position:absolute;
right: 40px;
z-index:10;
display:inline-block;
width:58px;
height:31px;
cursor:pointer;
vertical-align:middle;
}

.select_search .wrs {
position:relative;
z-index:11;
display:block;
height:29px;
text-align:center;
}

.select_search:hover .wrs {
}


.fa-caret-down {
position:absolute;
top:6px;
right:7px;
width:7px;
height:4px;
-webkit-transition:0 .4s ease-in-out;
-moz-transition:0 .4s ease-in-out;
-o-transition:0 .4s ease-in-out;
transition:transform .4s ease-in-out;
background-position:-300px 0;
}

.drop_search {
position:absolute;
z-index:10;
top:26px;
left:0;
display:none;
width:58px;
text-align:center;
}

.drop_search span {
display:block;
padding:0 0 4px;
}

.select_search:hover .drop_search {
display:block;
}
.select_search:hover .fa-caret-down {
-webkit-transform:rotateZ(-180deg);
-moz-transform:rotateZ(-180deg);
transform:rotateZ(-180deg);
position:absolute;
top:16px;
right:7px;
width:7px;
height:4px;
}

.fa-video-camera {
width:20px;
height:14px;
margin:6px 5px 0 0;
}

.fa-picture-o {
width:20px;
height:14px;
margin:6px 5px 0 0;
}

Edit all html

<div class="searchbox">
<form action="<?php echo home_url( '/' ); ?>" method="get"><button name="search" type="submit" class="btn">
<span></span></button>
<input type="text" id="s" name="s" value="" />

<input type="hidden" id="#search_type" name="post_type" value="post" />

<div class="select_search">

<span class="wrs">
<i class="fa fa-video-camera" id="search_type_icon"></i>
<i class="fa fa-caret-down"></i>
</span>

<div class="drop_search">
<span data-searchtype="photos">
<i class="fa fa-picture-o"></i>
</span>
</div>

</div>
</form>
</div>
<script type="text/javascript">
function SearchPostValue(e) {
e.preventDefault();
var t = $(this);
var searchtype = t.attr('data-searchtype');
if (searchtype == 'post') {
$('#search_type_icon').removeClass('fa fa-picture-o').addClass('fa fa-video-camera');
$('[data-searchtype]').attr('data-searchtype', 'gallery').find('i').removeClass('fa fa-video-camera').addClass('fa fa-picture-o');
} else {
$('#search_type_icon').removeClass('fa fa-video-camera').addClass('fa fa-picture-o');
$('[data-searchtype]').attr('data-searchtype', 'post').find('i').removeClass('fa fa-picture-o').addClass('fa fa-video-camera');
}
$('.searchbox #search_type').attr('value', searchtype);
}
$(document).ready(function(){
$('.searchbox .drop_search [data-searchtype]').click(SearchPostValue);
});
</script>

Solution

You have no '#searchform #search_type' element in the html you provided, so that wont work. Add that id (search_type) to your <input type="hidden" name="post_type" value="post" /> element.

and instead of changing it with .attr('value', newValue) you could just use

 $('#search_type').val(newValue);

As for whether the menuSearchClick(e) function is executed, you should check that with an alert() or console.log("check"). inside that function. If these logs/alerts dont show up, you could add a onclick="menuSearchClick()" to your icon div.