Как отправить форму, когда любое значение, выбранное из заполненного текстового поля, с помощью javascript или jQuery, не нажимая кнопку отправки
Search.php
В этой форме, когда мы что-то вводим в текстовое поле, соответствующие слова извлекаются со страницы api_search.php и отображаются, как показано на прикрепленном снимке экрана.
<form role = "form" id = "frm_search" name = "frm_search" method = "POST" action = "./api_search_p.php" enctype = "multipart/form-data" >
<script type = "text/javascript">
$(function()
{
$( "#txt_itemname" ).autocomplete({
source: '../user/api_search.php'
});
});
</script>
<input type = "text" id = "txt_itemname" name = "txt_itemname" class = "form-control" required data-validation-required-message = "Please enter something here">
<button type = "submit" class = "btn btn-warning"><i class='fas fa-search'></i> </button></span>
</form>
Api_search.php
Текстовое поле на search.php заполняется данными результатов API с этой страницы.
-- API data are coming using curl in $result array --
$json = json_decode($result, true);
$arr_searchTerm = array();
if (is_array($json) && !empty($json))
{
foreach ($json as $key1 => $level1)
{
if (is_array($level1) && !empty($level1))
{
foreach ($level1 as $key2 => $level2)
{
array_push($arr_searchTerm, $level2['TITLE']);
}
}
}
}
echo json_encode($arr_searchTerm);
В настоящее время нужно нажать кнопку отправки, чтобы отправить форму. Но я хочу сделать это, когда любое слово из полученного результата выбрано/нажато, тогда форма должна быть отправлена немедленно, не нажимая кнопку отправки.
Я пробовал onselect = "this.form.submit()" и onchange = "this.form.submit()" с текстовым полем, но форма не отправляется ни в одно из событий javascript.
Пожалуйста, дайте мне знать, как я могу заставить это работать, как ожидалось.
Скриншот
Ответы 2
Вы можете попробовать этот способ. в этом случае вы можете выполнять вызов API каждый раз, когда кто-то что-то вставляет. Это означает, что каждое письмо будет звонить
document.querySelector("#txt_itemname").addEventListener('input',(e)=>{
...
})
И, кроме того, если вы делаете это как API, попробуйте посмотреть на это тоже http_responses с PHP
Ты за твой ответ. Где именно я должен поместить этот код? Пожалуйста, дайте мне знать.
Вы можете использовать функцию выбора в своем коде
$( "#txt_itemname" ).autocomplete({
source: '../user/api_search.php',
select: function(e, ui){
this.value = ui.item.value;
this.form.submit();
}
});
Ты за твой ответ. Приведенный выше код отправляет форму при выборе любого слова. но он отправляет только введенное слово, а не выбранное слово при отправке формы. (Например, я набрал testo, а затем выбираю TESTOPEL. Затем я получаю только testo в переменных $_POST. Я должен получить выбранное слово TESTOPEL.
Привет @ KRA1978 Я обновил этот код, пожалуйста, проверьте его.
Теперь я не могу получить данные со страницы api_search.php при вводе чего-либо в поле поиска на странице search.php.
Проверьте консоль на наличие возможных ошибок. Для справки, пожалуйста, проверьте jsfiddle.net/4ab95o6j
Вы можете обернуть параметры автозаполнения в некоторый тег html, добавить к нему класс css, добавить обработчик событий для события click в этом классе, который просто вызовет событие отправки для формы: $( "#frm_search").submit( );