Как использовать Enter вместо Кнопок в одной форме

215

11 декабря 2017, 14:27

Добрый вечер всем. Как использовать Enter вместо нажатия Кнопок в одной форме (кнопки пусть остаются также). Как можно реализовать данное решение? (использовать две формы нельзя). (Вообще, дальше данные отрабатываются в php).

<form method="get"> <!-- два поля input  --> 
           Поиск по пользователю: 
           <input class="input_text" type="text" name="user" id="user"></input> 
           <input class="button" type="submit" name="button" value="Поиск"></input> 
           <br> 
            
           Поиск по найденому: 
           <input type="text" name="userf"  id="userf" ></input> 
           <input class="button" type="submit" name="buttonf" value="Поиск"></input> 
</form>

Answer 1

Если ajax (без перезагрузки страницы):

var $frm = $("#form"), 
    $inputs = $frm.find("input"); 
 
$frm.submit(function(e) { 
   
    $inputs.each(function() { 
     
        if( $(this).is(":focus") ) { 
         
            console.log('i\'m ' + $(this).attr("name") + '. ajax me, bro!'); 
         
        } 
     
    }) 
     
    e.preventDefault(); 
     
})

#form input[type="submit"]{ 
    display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form method="get" id="form"> 
    <input type="text" name="search_by_user" placeholder="search by user" /> 
    <input type="text" name="search_in_found" placeholder="search in found" /> 
    <input type="submit"> 
</form>

Если переход (с перезагрузкой страницы или переходом на файл-обработчик):

var query,  
    $frm = $("#form"), 
    $inputs = $frm.find("input"), 
    url = ( $frm.attr("action") ) ? $frm.attr("action") : ""; 
     
$frm.submit(function(e) { 
   
    $inputs.each(function() { 
     
        if( $(this).is(":focus") ) { 
         
            query = "?" + $(this).attr("name") + "=" + $(this).val(); 
             
            console.log(url + query); 
         
            //window.location.href = query; 
            // раскомментированная, данная строчка совершит get запрос. 
        } 
     
    }) 
     
    return false; 
     
})

#form input[type="submit"]{ 
    display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form action="some.php" method="get" id="form"> 
    <input type="text" name="search_by_user" placeholder="search by user" /> 
    <input type="text" name="search_in_found" placeholder="search in found" /> 
    <input type="submit"> 
</form>