как это делают нормальные люди
var isMobile = true;
$("form").on('blur','input', function(e) {
if(isMobile && $(this).val() == ''){
$(this).hide();
$('<div>').appendTo('body').text('hide empty input')
}
}).submit(function(e){
e.preventDefault();
var $input = $('input');
if(isMobile){
if($input.is(':hidden')){
$input.show().focus();
return false;
}else{
$input.hide();
}
}
$input.blur(); //защита от множественной отправки
// полезная работа
$('<div>').appendTo('body').text('search: '+$input.val());
$input.val(''); // можно попробовать не очищать для широкой формы
});<form>
<input type="text">
<button type="submit"><i class="fas fa-search"></i></button>
</form>input, button {
border: 1px solid #000;
}
input {
display: none;
height: 46px;
vertical-align: top;
padding-left: 10px;
font-size: 20px;
}
button {
width: 50px;
height: 50px;
border: 1px solid #000;
background: transparent;
font-size: 20px;
cursor: pointer;
}$("form").on('click','button', function(e) {
$("input").toggle();
$('button').attr('type', 'button');
}).submit(function(e){
e.preventDefault();
});<form>
<input type="text">
<button type="button"><i class="fas fa-search"></i></button>
</form>$("form").on('click','button', function(e) {
$("input").toggle();
}).submit(function(e){
e.preventDefault();
});select
u.id, f.title
from users u
join world_location f
on u.room = f.id
where u.id in (
select * from(
select p.user_id
from payment_order p
where p.state = 0
group by p.user_id
order by sum(p.paid) desc
limit 5)t1)
Убeрите preventDefault и форма будет обрабатываться стандартным образом. Или ajax отправку прицепить - это уже другая история.