Как отправить данные с другого input без использования тега form?

Question

[Genri_Rus]

Всем доброго времени суток еще раз
Возникла небольшая проблема, у меня есть форма поиска в отдельном файле PHP
Собственно в шапке сайта есть input, который должен отправлять все запросы на файл PHP

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>

Вопрос заключается в следующем, как мне отправить данную форму без использования самого тега form ?

Использовал различные варианты типа:

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid" onkeyup="if(key(event)==13){myfunction();}">
<button type="submit" value=""></button>

В самой функции прописывал вызов по id исходной PHP формы

Пример:

$("#myid").click(function myfunction() {
    $("#myform").submit();
  });

Мне нужно именно сделать так, чтобы submit у кнопки и input срабатывал при нажатии 13 клавиши, а именно клавиши Enter

Comments

[shmatuan]

api.jquery.com/jquery.ajax

[Genri_Rus]

shmatuan, а без использования ajax нельзя ?
У меня работает форма на ajax, а именно при помощи Wordpress ищет статьи

Answer 1

[Андрей]

Вам формы не нужны чтобы что-то отправить на сервер.
Если нужно добавить данные при нажатии на Enter, просто добавляете событие

$("#myid").on("keyup", function(event){
    if (event.which == 13)  //... тут код отправки данных
});

Отправку можно сделать с помощью ajax

Comments

[Genri_Rus]

А если у меня уже есть ajax и есть событие keypress ?
Именно

jQuery(document).ready(function($){
	$('.myclass').keypress(function(eventObject){
  var searchTerm = $(this).val();
		if(searchTerm.length > 2){
			$.ajax({
				url : '/wp-admin/admin-ajax.php',
				type: 'POST',
				data:{
					'action':'',
					'term'  :searchTerm
				},
});
});

Ajax ищет статьи в БД и показывает их в моем input, но сам input и кнопка не могут отправить данные при нажатии на Enter =(

[Андрей]

Genri_Rus, привязывайте события не
$('.my-class').keypress
a
$('.my-class').on("keypress"...)

[Genri_Rus]

Андрей, у меня так ничего не работает

jQuery(document).ready(function($){
  $('.myclass').on("keypress", function(eventObject){
  var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
});
});

[Genri_Rus]

Андрей, я вообще правильно написал или перед function нужно скобку поставить ?

[Андрей]

Genri_Rus, у вас вообще со скобками не всё в порядке.
Вот правильный вариант https://jsfiddle.net/31m8ps59/
Событие keypress срабатывает и ajax-запрос отправляется.

[Genri_Rus]

Андрей, а вот у меня вообще даже в консоли ничего не отображается и ajax не работает =(
Я так понял событие .on призывает к какому-то действию, поэтому у меня поиск не работает
А вот просто .keypress как раз таки к этому не призывает

Мне нужно тогда 2 функции ?
Одна отображает запросы при вводе в input данных без события .on , а другая реагирует на клик ?

[Андрей]

Genri_Rus, тот вариант что я скинул на jsfiddle - работает. И в хроме и в фаерфоксе. В консоли пишет что сработало (keypress), и видно что запросы уходят.

[Genri_Rus]

Андрей, да все отправляется и без .on
Мне нужно сделать так, чтобы страница перезагрузилась после нажатия Enter

Вот я дополнил немного код, он перезагружает страницу:

jQuery(document).ready(function($){
  $('.my-class').keypress(function(eventObject){
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } });
  $(".my-class").keypress(function(e) {
    var searchTerm = $(this).val();
    if(searchTerm.length > 2 && e.keyCode == 13){
           $("#sendform").submit();
    }
    });
});

Сам шаблон формы лежит в searchform.php, вот что там находится:

<form id="sendform" action="<?php echo home_url(); ?>/" method="get">
<input class="sidesearch" type="text" name="myname" id=myid">
</form>

Как видите я задал форме id="sendform", как бы javascript находит этот id и отправляет данный GET запрос
Ajax находит статьи, а вот как сделать еще и перезагрузку с сохранением данных, что находится в input, который связан с главным шаблоном формы ?
Если правильно выразиться, то как вызвать эту самую форму при отправке с разных input ?
Мой выше пример работает, посылает запрос и вызывает главный шаблон, а также перезагружает саму страницу, но вот введенные данные в input не передаются =(

[Андрей]

Genri_Rus, во-первых, вам нужно использовать не keypress а keyup, потому что в момент keypress последний символ еще не добавился в инпут
Во-вторых, зачем вам две отдельные функции? Их лучше обьединить.
В-третьих, при нажатии на enter данные передаются (это видно в консоли)
Ну и в-четвертых, если вы хотите в инпут подставить то что было туда введено до обновления страницы, то вам нужно парсить window.location.search.

Работающий пример (без парсинга get-параметра) https://jsfiddle.net/31m8ps59/1/
То, что он работает - видно в консоли

[Genri_Rus]

Андрей, уже близко, точнее мне примерно нужна именно такая реализация
Только загвоздка вот в чем
Как я писал ранее, у меня эта форма является главным шаблоном для поиска, которая лежит в searchform.php

<form id="sendform" action="<?php echo home_url(); ?>/" method="get">
<input class="sidesearch" type="text" name="myname" id=myid">
</form>

Теперь такой вопрос, у меня в header.php еще есть такая вот форма, но она без тега form, т.к. с тегом form у меня уже есть главная форма в searchform.php

Вот собственно она:

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>

Мне нужно, чтобы данные, которые введет пользователь передавались в главную форму searchform.php и происходила перезагрузка с поисковой выдачей от клиента

if(eventObject.keyCode == 13){
               $("#sendform").submit();
               return;
         }

Я так понял, мне нужно добавить еще id input, которая находится в header.php, чтобы данные с этого input передавались ?

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>

P.S. Ваш вариант также работает, как и мой, но все равно при перезагрузки и вызова главной формы searchform.php, пустой запрос - в браузерной строке вот что: httр://мой домен/?s=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA

[Андрей]

Genri_Rus, Перед сабмитом формы просто копируйте текстовое значение в поле внутрь формы.

$("#myid").val(/* тут val из поля из заголовка */);

А вообще вы можете вообще без формы обойтись и без сабмита этой формы, и без обновления страницы.
Просто при нажатии на enter получайте аяксом данные и отображайте на странице.
Либо, более простой вариант - без формы, просто повесить на событие keyup кнопки enter каждого инпута и click кнопки поиска - просто перенаправлять на адрес httр://мой домен/?s=текст инпута

[Genri_Rus]

Андрей, я пробовал так, но может что-то неправильно пишу:

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="srch">
<button type="submit" value=""></button>

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
               $("#srch").val();
               $("#sendform").submit();
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } });
});

GET запрос главной формы выполняется, но в нем вот такая вот проблема:
смотрел через Network и в конце есть такая строчка jquery string parameters
s=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA

[Андрей]

Genri_Rus, у вас оба инпута должны иметь разный id. И нужно не просто
$("#srch").val();
а
$("#srch").val($("#head_srch").val());
Тогда у вас в инпут в форме подставится значение из инпута в заголовке

[Genri_Rus]

Андрей, а если мне нужно передать данные не по id input, а по его name="s" ?

Мне для отправки формы, нужен именно данный уникальный name:

<input class="myclass" placeholder="Поиск" type="text" value="" name="s" id="srch">
<button type="submit" value=""></button>

Дело в том, что по данной уникальной букве, в строке браузера поставляются GET следующие данные:

httр://мой домен/?s=текст инпута

[Андрей]

Genri_Rus, У вас два элемента с одинаковым id, во-первых это нарушает стандарт, во-вторых так сложнее из одного в другой скопировать данные. И только для этого сейчас id используется.
Name в данном случае имеет значение только у того, который внутри формы, у того который в шапке он бесполезен и не нужен.

[Genri_Rus]

Андрей, "у того который в шапке он бесполезен и не нужен" - как раз таки нужен )
У меня wordpress, как только я убираю в name="s" форма вообще не отправляется, т.к. в главной форме searchform.php используется такая форма:

<form id="sendform" action="<?php echo home_url(); ?>/" method="get">
<input class="sidesearch" type="text" name="s" id=search">
</form>

Если у меня в header.php данный input не будет иметь также name-"s" ничего отправляться не будет:

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="srch">
<button type="submit" value=""></button>

[Андрей]

Genri_Rus, https://jsfiddle.net/31m8ps59/2/

[Genri_Rus]

Андрей, как я и писал ранее, вот так великолепно отрабатывает:

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
              $('input[name="s"]').val($('input[name="s"').val());
               $("#sendform").submit();
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } });
});

Именно по name="s" все ищется, как такое может быть ?

У меня в главном шаблоне формы есть в input name="s" и в header.php с input name="s"

Главный динамический шаблон формы, который находится в searchform.php :

<form id="sendform" action="<?php echo home_url(); ?>/" method="get">
<input class="sidesearch" type="text" name="s" id="search">
</form>

input с кнопкой в header.php

<input class="myclass" placeholder="Поиск" type="text" value="" name="s" id="search">
<button type="submit" value=""></button>

Спасибо, что помогли до конца разобраться, лайки вам везде поставил ;)

P.S. Сохраните примеры ваших кодов на сайте jsfiddlе.net, может тоже кому-то пригодится )

[Genri_Rus]

Андрей, короче я еще буду дорабатывать, мне кажется где-то у меня есть ошибки ...
Поэкспериментирую еще, потом возможно отпишусь еще раз в данной ветке

[Андрей]

Genri_Rus, эти примеры сохранять особого смысла нет - они настолько просты, что их легко воспроизвести заново.
Что касается name = s, вам этот атрибут нужен только внутри формы. У поля вне формы он, в данном случае, никакой нагрузки не несёт. Вы делаете сабмит формы, а форма ваша ничего об инпуте за её пределами не знает.
Перед тем как делать сабмит формы со значением из инпута вне формы я просто переношу значение из внешнего инпута внутрь инпута формы.

[Genri_Rus]

Андрей, я заметил, что вот так тоже работает )

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
              $('#sendform input[name="s"]').val($(this).val());
               $("#sendform").submit();
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } });
});

А как сделать, чтобы (this) работал за пределами функции ?

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
              goSubmit();
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } });
});

function goSubmit(){
	$('#sendform input[name="s"]').val($(this).val());
	$("#sendform").submit();
}

[Андрей]

Genri_Rus, сделать чтобы это работало можно разными способами.
This это текущий контекст. Если нужно его расшаривать - можно создать глобальную переменную и присвоить ей этот this. Но обычно, как правило это не требуется, и если вам это понадобилось, то, скорее всего, вы делаете что-то не так (особенно если вы задаете вопрос как вынести this за пределы его действия;)

[Genri_Rus]

Андрей, вот так тоже работает )

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
              goSubmit();
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } 
   function goSubmit(){
			$('#sendform input[name="s"]').val(searchTerm);
			$("#sendform").submit();
		} });
});

Как такой вариант ?

[Андрей]

Genri_Rus, плохо. Вы функцию goSubmit засунули внутрь функции keyup, и используете только в одном месте. В этом случае вам отдельная функция не нужна, вы можете код из неё поместить в то место где вызываете её.

[Genri_Rus]

Андрей, а как сделать так, чтобы так работало ?

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
              goSubmit();
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } });
});

function goSubmit(){
  $('#sendform input[name="s"]').val(searchTerm);
  $("#sendform").submit();
}

[Андрей]

Genri_Rus, я вам выше присылал рабочий вариант (https://jsfiddle.net/31m8ps59/2/).
Если переделывать ваш код, то вот

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
               $('#sendform input[name="s"]').val(searchTerm);
               $("#sendform").submit();
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } 
});

Либо

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
              goSubmit(searchTerm);
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } 
   function goSubmit(searchTerm){
      $('#sendform input[name="s"]').val(searchTerm);
      $("#sendform").submit();
    } });
});

[Genri_Rus]

Андрей, понял, ваш вариант я смотрел, но мне не очень хочется вызывать по id input

Вот еще вариант, так будет более или менее приемлемее ? Спасибо еще раз

jQuery(document).ready(function($){
var searchTerm = $(this).val();
$('.myclass').keyup(function(eventObject){
console.log("!")
searchTerm = $.trim($(this).val());
if(searchTerm.length > 2){ 
if(eventObject.keyCode == 13){
goSubmit();
return;
}
$.ajax({
url : '/wp-admin/admin-ajax.php',
type: 'POST',
data:{
'action':'',
'term' :searchTerm
},
success:function(result){
} });
} });

function goSubmit(){
$('#sendform input[name="s"]').val(searchTerm);
$("#sendform").submit();
}
});

[Андрей]

Genri_Rus, это работать будет, но на второй строке заполняя searchTerm вы используете this, который является в этом месте всем документом. Лучше не второй строке не заполнять совсем.
А еще лучше не использовать глобальную переменную а передавать значение внутрь функции параметром этой функции.

[Genri_Rus]

Андрей, вот так ?

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="search">
<button value="" id="myid">Search</button>

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
              goSubmit(searchTerm);
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } 
   $("#myid").click(function(){
    	goSubmit();
    })
   function goSubmit(searchTerm){
      $('#sendform input[name="s"]').val(searchTerm);
      $("#sendform").submit();
    } });
});

[Андрей]

Genri_Rus, да.
Но если эта функция у вас вызывается только из одного места, то смысла в ней нет. Лучше перенести её содержимое прямо в место где она используется.
Если она вызывается в нескольких местах, то можно оставить так.

[Genri_Rus]

Андрей, спасибо вам, что так понятно все объясняете )
Я сам лично немного разбираюсь, но вот с логикой и последовательностью у меня очень дуго в этом плане :(

Я забыл вам написать, что у меня еще есть 2 функции показа поисковых результатов

$('.myclass').focusin(function() {
		$('.window-ajax-search').fadeIn();
	})
	$('.myclass').focusout(function(){
		$('.window-ajax-search').fadeOut();
    });

Данное окно оформлено в виде данного html класса, под названием window-ajax-search
Оно также выводится при фокусе и снова убирается при убирании с него фокуса мышкой

Я решил данные функции также поместить в прошлый код:

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
              goSubmit(searchTerm);
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } 
   $("#myid").click(function(){
    	goSubmit();
    })
   function goSubmit(searchTerm){
      $('#sendform input[name="s"]').val(searchTerm);
      $("#sendform").submit();
    } 
$('.myclass').focusin(function() {
		$('.window-ajax-search').fadeIn();
	})
	$('.myclass').focusout(function(){
		$('.window-ajax-search').fadeOut();
    });});
});

Правильно я делаю или как-то можно объединить эти 2 последние блока ?
P.S. Все работает, только вот опять таки возникают некоторые логические доработки (

[Genri_Rus]

Андрей, короче у меня опять возник еще один вопрос
К примеру у меня кнопка отправляет данные, даже если я их удалю из input
Как запретить кнопке отправлять пустые данные, если я удалил в самом input какое-то слово ?

$("#myid").click(function(){
    	goSubmit();
    })

[Андрей]

Genri_Rus, если нужно только на пустоту проверить, то есть
str == null || str.length == 0

[Genri_Rus]

Андрей, тут правильно добавлять ?

$("#mybutton").click(function(){
		if(str.length == 0) {
			return false;
		} else {
			goSubmit();
		}
	})

[Андрей]

Genri_Rus, правильно, но только str - это я для примера сделал. Вместо str у вас должно быть строковая переменная.

[Genri_Rus]

Андрей, я вот так сделал, но все равно кнопка почему-то отправляет после ввода и удаления символов

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="search">
<button value="" id="mybutton">Search</button>

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
              goSubmit(searchTerm);
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } 
   $("#mybutton").click(function(){
if(searchTerm.length == 0) {
      return false;
    } else {
      goSubmit();
    }
    })
   function goSubmit(searchTerm){
      $('#sendform input[name="s"]').val(searchTerm);
      $("#sendform").submit();
    } });
});

[Андрей]

Genri_Rus, Это потому что у вас мешанина из функций. Все функции находятся внутри .myClass keyup
Проверку на длинну лучше проверять внутри функции goSubmit
И советую использовать camelCase именование - названия переменных начинать с маленькой буквы, и каждое слово писать с большой.
Например
sendform -> sendForm
myclass -> myClass
mybutton -> myButton

[Genri_Rus]

Андрей, вот так вообще кнопка ничего не отправляет

jQuery(document).ready(function($){
	$('.myclass').keyup(function(eventObject){
		console.log("!")
		var searchTerm = $(this).val();
		if(searchTerm.length > 2){    
			if(eventObject.keyCode == 13){
				  goSubmit(searchTerm);
				   return;
			}
		  $.ajax({
			url : '/wp-admin/admin-ajax.php',
			type: 'POST',
			data:{
			  'action':'',
			  'term'  :searchTerm
			},
			success:function(result){
			} });
		} });
	$("#mybutton").click(function(){
		goSubmit();
    }) 
   function goSubmit(searchTerm){
		if((searchTerm.length) == 0){
			return false;
		} else {
			$('#sendform input[name="s"]').val(searchTerm);
			$('#sendform').submit();
		}
    } 
});

[Андрей]

Genri_Rus, конечно не отправляет, потому что в ней вызывается функция goSubmit, в которую передаётся неопределённое значение параметра searchTerm.
Скорее всего, если вы откроете консоль, то увидите ошибку "lentgh is not field of undefined", или типа того.
Вам нужно либо передавать в неё этот самый searchTerm, либо получать внутри неё это значение напрямую.
Ну и вторая проблема, которую я вижу - а если у вас пользователь сначала ввёл текст в шапку, потом он спустился в страницу и ввёл значение на странице и нажал "Поиск", у него поиск произойдёт по значению из шапки. Не думаю что это правильное поведение.

[Genri_Rus]

Андрей, а на примере могли бы показать ?)
Я реально уже запутался, с этой логикой у меня реальные проблемы (

P.S. Хотя бы покажите, как goSubmit() должен передать данные в кнопку )

[Genri_Rus]

Андрей, короче вот так работает, но мне кажется можно упростить ?

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
    console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
      if(eventObject.keyCode == 13){
          goSubmit(searchTerm);
           return;
      }
      $.ajax({
      url : '/wp-admin/admin-ajax.php',
      type: 'POST',
      data:{
        'action':'',
        'term'  :searchTerm
      },
      success:function(result){
      } });
    }
  $("#mybutton").click(function(){
   if((searchTerm.length) == 0){
      return false;
    } else {
    goSubmit(searchTerm);
    }
	}) });
   function goSubmit(searchTerm){
      $('#sendform input[name="s"]').val(searchTerm);
      $('#sendform').submit();
    }
});

[Андрей]

Genri_Rus,
1. goSubmit должна отвечать только за валидацию формы и её отправку. Нужно перенести в неё валидацию и убрать
$('#sendform input[name="s"]').val(searchTerm);
2. Так как только при работе с верхним инпутом значение должно переноситься в форму, то строка
$('#sendform input[name="s"]').val(searchTerm);
должна быть внутри функции
$('.myclass').keyup

[Genri_Rus]

Андрей, если я перенесу $('#sendform input[name="s"]').val(searchTerm); вот сюда:

$('.search-field').keyup(function(eventObject){
	searchTerm = $.trim($(this).val());
	if(eventObject.keyCode == 13){
	$('#sendform input[name="s"]').val(searchTerm);
		goSubmit();
		return;
     } 
	$("#mybutton").click(function(){
		goSubmit();
	}) });

	function goSubmit(){
		$('#sendform').submit();
    }

Кнопка тогда будет отправлять пустые запросы

[Андрей]

Genri_Rus, я в первом пункте написал что нужно в goSubmit перенести валидацию - т.е. проверять что в форме поле заполнено

[Genri_Rus]

Андрей, так ? :)

function goSubmit(searchTerm){
    if((searchTerm.length) == 0){
      return false;
    } else {
   $('#sendform').submit();
    }
 }

[Андрей]

Genri_Rus, не обязательно. У вас же форма одна. Можно прямо поле проверять

function goSubmit(searchTerm){
    if(($('#sendform input[name="s"]').val().length) == 0){
      return false;
    } else {
   $('#sendform').submit();
    }
 }

[Genri_Rus]

Андрей, так все равно кнопка отправляет пустые запросы, если я ранее вводил в input данные и затем их удалял

Query(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
    console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
		if(eventObject.keyCode == 13){
			$('#sendform input[name="s"]').val(searchTerm);
			goSubmit(searchTerm);
			return;
		}
      $.ajax({
      url : '/wp-admin/admin-ajax.php',
      type: 'POST',
      data:{
        'action':'',
        'term'  :searchTerm
      },
      success:function(result){
      } });
    }
	$("#mybutton").click(function(){
		goSubmit();
	}) });
	function goSubmit(searchTerm){
		if(($('#sendform input[name="s"]').val().length) == 0){
		return false;
		} else {
			$('#sendform').submit();
		}
	}
});

[Андрей]

Genri_Rus, у вас кнопка отправляет данные если у вас в верхнем или нижнем поле введены данные. Если у вас одно из полей пустое - она всё равно сработает. Она не сработает только если оба поля пустые.
Вам нужно

$("#mybutton").click(function(){
      $('#sendform input[name="s"]').val(searchTerm);
    goSubmit();
  }) });

[Genri_Rus]

Андрей, вот так работает:

Query(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
    console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
		if(eventObject.keyCode == 13){
			$('#sendform input[name="s"]').val(searchTerm);
			goSubmit();
			return;
		}
      $.ajax({
      url : '/wp-admin/admin-ajax.php',
      type: 'POST',
      data:{
        'action':'',
        'term'  :searchTerm
      },
      success:function(result){
      } });
    } });
 $("#mybutton").click(function(){
	  $('#sendform input[name="s"]').val(searchTerm);
	goSubmit();
  })
  function goSubmit(){
    if(($('#sendform input[name="s"]').val().length) == 0){
		return false;
    } else {
      $('#sendform').submit();
    }
  }
});

А вот так тоже работает, но как я понял это будет неправильно с точки зрения валидации ?

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
    console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
      if(eventObject.keyCode == 13){
          goSubmit(searchTerm);
           return;
      }
      $.ajax({
      url : '/wp-admin/admin-ajax.php',
      type: 'POST',
      data:{
        'action':'',
        'term'  :searchTerm
      },
      success:function(result){
      } });
    }
  $("#mybutton").click(function(){
   if((searchTerm.length) == 0){
      return false;
    } else {
    goSubmit(searchTerm);
    }
  }) });
   function goSubmit(searchTerm){
      $('#sendform input[name="s"]').val(searchTerm);
      $('#sendform').submit();
    }
});

P.S. Как оказалось кнопка все равно отправляет пустые запросы, дело было в другом )
Я просто забыл добавить в самом верху кода слово var
У меня было так:
searchTerm = $(this).val();

Почему при таких манипуляциях все работает без всяких доп. кода ?

[Андрей]

Genri_Rus, у вас задача решается за пять минут, мы её обсуждаем уже неделю, и обсуждение растянулось на длинную страницу, и это начинает утомлять.

Вот код который должен работать.

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
    console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
      if(eventObject.keyCode == 13){
      	$('#sendform input[name="s"]').val(searchTerm);
        goSubmit();
        return;
      }
      $.ajax({
      url : '/wp-admin/admin-ajax.php',
      type: 'POST',
      data:{
        'action':'',
        'term'  :searchTerm
      },
      success:function(result){
      } });
    }
  $("#mybutton").click(function(){
   if(($('#sendform input[name="s"]').val().length) == 0){
      return false;
    } else {
      	$('#sendform input[name="s"]').val($('.myclass').val());
   	  goSubmit();
    }
  }) });
   function goSubmit(){
   		if(($('#sendform input[name="s"]').val().length) == 0){
	      return false;
	    } else {
	      $('#sendform').submit();
	    }
    }
});

[Genri_Rus]

Андрей, спасибо очень помогли, только мне нужно было в кнопке вот так, input все время должен проверяться на введенные данные, если человек ошибся и их стер, то снова проверять в очередной раз:

$("#mybutton").click(function(){
   if(($('#sendform input[name="s"]').val($('.myclass').val()).length) == 0){
      return false;
    } else {
      	$('#sendform input[name="s"]').val($('.myclass').val());
   	  goSubmit();
    }

Правда снова проблема, только если данные не найдены, то запросы все равно отправляются
К примеру человек ввел в input несуществующий запрос, то при нажатии на Enter и кнопки, все равно все отправляется (

[Андрей]

Genri_Rus, тут вам нужно проверять ваш автокомплит, вернул ли он какие-нибудь данные.

[Genri_Rus]

Андрей, у меня в функции php идет проверка с БД и если этих данных нету, то в окне поиска пишется:

<?php } }else{ ?>
	<li><a href="#">Ничего не найдено, попробуйте другой запрос</a></li>
<?php } exit;

[Андрей]

Genri_Rus, ну, тогда проверяйте эту строку. А лучше сделайте нормальный автокомплит с json

[Genri_Rus]

Андрей, добрый вечер, короче у меня снова проблема (
Только выяснил, что если не вызывать главную форму в index.php, get запрос не переадресует на главную форму searchform.php
У меня input находится в index.php, но там же был подключен сайдбар главной формы, если я удалю сайдбар в index.php, то в консоли выйдет вот такая вот ошибка:

my-ajax.js?ver=5.0.3:38 Uncaught TypeError: Cannot read property 'length' of undefined
at goSubmit (my-ajax.js?ver=5.0.3:38)

То есть этот код якобы не определен

if(($('#sendform input[name="s"]').val().length) == 0)

Как заставить увидеть форму, если главный шаблон существует, но он не выведен index.php ?

[Андрей]

Genri_Rus, ну, тут можно только гадать как у вас там всё устроено. Скорее всего вам нужно либо выводить форму, но скрывать её (через js), либо проверять что $('#sendform input[name="s"]') существует перед проверкой значения.

[Genri_Rus]

Андрей,

либо проверять что $('#sendform input[name="s"]') существует перед проверкой значения.

Мне нужно чтобы в главную форму, которая находится в searchform.php подставлялись разные данные с различных input-ов - это может быть: index.php и прочие варианты

А можно сделать в самом js файле проверку (который мы с вами обсуждали выше), что если $('#sendform input[name="s"]') не находит к примеру в index.php, чтобы он обратился и подключил searchform.php ?

Хотелось бы какой-нибудь пример, чтобы знать куда копать )
Лайк конечно же поставлю !

[Андрей]

Genri_Rus, да, можно. С помощью ajax загружаете searchform.php и с помощью, например, html полученное содержимое кладёте куда нужно на страницу.

[Genri_Rus]

Андрей, сейчас у меня опять начнется путаница

Примерно вот так нужно ?

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
    console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      if ($('#sendform input[name="s"]').val(searchTerm) == undefined) {
        $.ajax({
        url : '/searchform.php',
        type: 'POST',
     )}
      if(eventObject.keyCode == 13){
      	$('#sendform input[name="s"]').val(searchTerm);
        goSubmit();
        return;
      }
      $.ajax({
      url : '/wp-admin/admin-ajax.php',
      type: 'POST',
      data:{
        'action':'',
        'term'  :searchTerm
      },
      success:function(result){
      } });
    }
   }
  $("#mybutton").click(function(){
   if(($('#sendform input[name="s"]').val().length) == 0){
      return false;
    } else {
      	$('#sendform input[name="s"]').val($('.myclass').val());
   	  goSubmit();
    }
  }) });
   function goSubmit(){
   		if(($('#sendform input[name="s"]').val().length) == 0){
        return false;
      } else {
        $('#sendform').submit();
      }
    }
});

[Genri_Rus]

Андрей,

data:{
        'action':'',
        'term'  :searchTerm
      },

В action вызывать функцию goSubmit() ?

[Андрей]

Genri_Rus, мне кажется, вам стоит нанять программиста)

[Genri_Rus]

Андрей, ну все когда-то много чего-то не понимали и им кто-то помогал )
Так легко конечно, когда уже много чего знаешь, да и никто в интернете об этом особо и не пишет (
Так что можете помочь мне ? (
Мне нужно хотя бы этот функционал, на большее я пока что не способен

[Genri_Rus]

Андрей, я попытался сделать так, но все равно почему-то не переадресует

jQuery(document).ready(function(){
	$('.myclass').keyup(function(eventObject){
		var searchTerm = $.trim($(this).val());
		if(searchTerm.length > 2){
				if(eventObject.keyCode == 13){
					$('#sendform input[name="s"]').val(searchTerm);
					goSubmit();
					return;
				}
			$.ajax({ 
				type: 'GET',
				url: '/wp-content/themes/папка с темой/searchform.php',
				data: {
					s: $('#search').val(),
					'term'  :searchTerm
				},
				success: function(data) {
					$.ajax({
						url : '/wp-admin/admin-ajax.php',
						type: 'POST',
						data:{
							'action': 'вызываю функцию, которая находится в function.php для поиска' статей,
							'term'  :searchTerm
						},
						success:function(result){
						} });
				}
			});
		};
	$("#mybutton").click(function(){
		if(($('#sendform input[name="s"]').val($('.myclass').val()).length) == 0) {
			return false;
		} else {
			$('#sendform input[name="s"]').val($('.myclass').val());
			goSubmit();
		}
	}) });
	function goSubmit(){
			if(($('#sendform input[name="s"]').val().length) == 0){
				return false;
			} else {
				$('#sendform').submit();
			}
		}
	}
});

[Андрей]

Genri_Rus, ваш код вызывает searchform.php и в случае успеха вызывает admin-ajax.php.

[Genri_Rus]

Андрей,

С помощью ajax загружаете searchform.php и с помощью, например, html полученное содержимое кладёте куда нужно на страницу.

А можно так загрузить на index.php ?

$('#result').load('/wp-content/themes/папка с темой/searchform.php');

Скорее всего вам нужно либо выводить форму, но скрывать её (через js), либо проверять что $('#sendform input[name="s"]') существует перед проверкой значения.

Форму $('#sendform input[name="s"]') же по любому придется выводить на index.php, иначе сабмит формы не сработает ?

Я просто это к тому, что можно как-то получить данные без вывода самой главной формы $('#sendform input[name="s"]') в index.php ?
А скрывать ее или выводить в DOM как-то не очень, хотелось бы в какую-то переменную поместить после этой строчки:

$('#result').load('/wp-content/themes/папка с темой/searchform.php');

Или так нельзя ? Я в скрытых передаче файлов вообще не разбираюсь

[Андрей]

Genri_Rus, я не особо понимаю суть проблемы.
У вас есть один инпут и одна форма с инпутом. Иногда форма отсутствует на странице.
И ваш вопрос - как отправить форму, если её на странице нет.
Ответ простой - легко. Вам в общем форма особо не нужна для отправки данных - вы просто так же вызываете get или post-запрос передавая нужные данные. Т.е. вам нужно уйти от формы и передавать данные не через submit а обычным запросом.

[Genri_Rus]

Андрей, мне не нужно отправлять данные на саму форму, т.к. она имеет следующую структуру:

<form id="sendform" action="<?php echo home_url(); ?>/" method="get">
<input class="sidesearch" type="text" name="s" id="search">
</form>

Мне нужно, чтобы сабмит мог активировать это событие у главной формы $('#sendform input[name="s"]') и переадресовать на другую страницу с таким ключем: window.location = '/?s=' + searchTerm;

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
    console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
      if(eventObject.keyCode == 13){
        goSubmit(searchTerm);
        return;
      }
      $.ajax({
      url : '/wp-admin/admin-ajax.php',
      type: 'POST',
      data:{
        'action':'',
        'term'  :searchTerm
      },
      success:function(result){
      } });
    }
  $("#mybutton").click(function(){
   if(($('.myclass').val().length) == 0){
      return false;
    } else {
   	  goSubmit(searchTerm);
    }
  }) });
   function goSubmit(searchTerm){
   	if(($('.myclass').val().length) == 0){
        return false;
      } else {
        window.location = '/?s=' + searchTerm;
      }
    }
});

Можно ли проделать такую хитрость с сабмитом ?
$('#sendform').submit();

Чтобы при отправки данных, $('#sendform').submit(); производил редирект с GET ключем на httр://мой сайт?s=searchTerm
Просто именно на этой странице с ключем ?s выводятся поисковые данные

[Genri_Rus]

Андрей, короче я сделал вот так, это правильно ? Просто все работает без главной формы

jQuery(document).ready(function(){
	$('.myclass').keyup(function(eventObject){
		var searchTerm = $.trim($(this).val());
		if(searchTerm.length > 2){
			$.ajax({
				url : '/wp-admin/admin-ajax.php',
				type: 'POST',
				data:{
					'action':'вызываю функцию, которая находится в function.php для поиска статей',
					'term'  :searchTerm
				},
				success:function(result){
				} });
			if(eventObject.keyCode == 13){
				goWin();
				return;
				}
			};
	$("#mybutton").click(function(){
		if(($('.myclass').val().length) == 0) {
			return false;
		} else {
			goWin();
			return;
		}
	}) });
	function goWin(){
		var forSearch = ($('.myclass').val());
		var t = forSearch.length;
    if(t<3) '<div class="my-error">' + 'Ничего не найдено' + '</div>'; тут я не знаю, как вывести сообщение об ошибке 
    else {
        redirect(document.location.protocol + "//" + document.location.host + "/?s=" + forSearch);
        }
    }
	function redirect(url,history){
		if(history!=undefined) window.location.reload(url);
		else window.location.replace(url);
	}
});

[Андрей]

Genri_Rus,
1. У вас $("#mybutton").click находится внутри функции $('.myclass').keyup, 99% это ошибка
2. Внутри $('.myclass').keyup у вас сначала происходит if(searchTerm.length > 2) (строка 4), а потом уже if(eventObject.keyCode == 13) (строка 14). Полагаю, нужно обменять эти блоки местами, и в случае если keyCode 13, то дальше идти не нужно, не нужно вызывать ajax итд.
3. На строке 29 (var t = forSearch.length;) переменная t используется только один раз. Думаю, можно её убрать и сразу делать if(forSearch.length<3)
4. В функции redirect, вызов window.location.reload (строка 36) перезагружает текущую страницу, параметр url не имеет смысла.
5. Сама по себе функция redirect в этом виде не имеет смысла. Можно её убрать совсем и использовать просто location="url", либо location.replace, зависит от того что нужно.

[Genri_Rus]

Андрей, спасибо за корректировки, с функцией редирект я сильно не разбираюсь, просто искал решение и нашел данный пример, а как сделать так, чтобы при клике на кнопку

Если if(forSearch.length<3) - выводило в каком-то блоке типа: '

<div class="my-error">' + 'Ничего не найдено' + '</div>'

И если у меня 2 input-а на странице, то отправляется только одна (которая в header), а как сделать к примеру так, чтобы одинаковые формы в header и footer отправлялись, но в зависимости от фокуса при нажатии на input?

[Андрей]

Genri_Rus, при вызове goWin передавать css-селектор или jquery-обьект, в который нужно вывести блок.
Для того чтобы вывести html можно использовать append, prepend, html и прочие функции

[Genri_Rus]

Андрей, а если у меня 2 input-а на странице, то отправляется только одна (которая в header), а как сделать к примеру так, чтобы одинаковые формы в header и footer отправлялись, но в зависимости от фокуса при нажатии на input?

Answer 2

[Stalker_RED]

<form id="someForm">
    ...
</form>

<button form="someForm" type="submit">жми сюда</button>

Comments

[Genri_Rus]

А при помощи javascript нельзя ?

Я знаю, что многие используют типа таких проверок:

<input id="myid" value="" type="text" name="myname" placeholder="Я ищу...">
<a class="search_go" onclick="myfunction();"></a>

$('#myid').on("keypress", function (e) {
        if ($('#myid').val().length>0 && e.keyCode == 13) {
            myfunction();
            return false;
        }

[Stalker_RED]

Genri_Rus,

многие используют ... onclick=""

Вернее будет сказать "многие использовали лет 15 назад".
addEventListener внесен в спеки в 2000 году _{(я специально погуглил)}

Можете словами рассказать что вы хотите сделать? На код я чем дальше смотрю, тем страньше всё.

[Genri_Rus]

Stalker_RED, мне нужно, чтобы форма отправлялась через Ajax, точнее с помощью Ajax

Вот пример Ajax ищет статьи, но не отправляет их через input с классом .myclass

Мне подсказывают, что нужно использовать $('.my-class').on("keypress")

jQuery(document).ready(function($){
  $('.myclass').keypress(function(eventObject){
  var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
});
});

[Stalker_RED]

Genri_Rus, начнем с простого: что такое "отправить ajax через input"? Это как вообще?
Для отправки ajax запроса инпуты не нужны.

[Genri_Rus]

Stalker_RED, я имел ввиду до инициализации ajax данные input нужны
К примеру в функции, используется переменная postForm:

var postForm = {
                    'name'  : $('#name').val(),
					'mail'  : $('#mail').val(),
                    'phone'  : $('#phone').val(),
                    'source'  : $('#source').val(),
                    'medium'  : $('#medium').val(),
                    'campaign'  : $('#campaign').val(),
                    'content'  : $('#content').val(),
                    'term'  : $('#term').val()
                };

Далее уже идет Ajax

[Stalker_RED]

Genri_Rus, хинт: можно сделать $(form).serialize()
https://api.jquery.com/serialize/

И все равно непонятно что у вас там за цирк с инпутом, кликом, и энтером.

[Genri_Rus]

Stalker_RED, вот пример

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>

jQuery(document).ready(function($){
  $('.myclass').keypress(function(eventObject){
  var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
});
});

В данном примере ajax ищет запросы статьей в БД, в input вводят какие-то запросы - сервер через ajax отдает их клиенту
'action':'', я специально не указал, т.к. это вызов функции в PHP, которая обрабатывает запросы от клиента

Проблема в том, что пользователь может только искать статьи и выбирать их в самом окне input, но при нажатии на Enter ничего не происходит, т.к. нету тега form
Как только я вставлю тег form пример:

<form>
<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>
<form>

Все прекрасно отправляется при нажатии на кнопку
Вот у меня и возник вопрос, как можно отправить данные, если есть один главный шаблон формы поиска, а вот скажем input поиска на странице не один, а несколько
Постоянно писать тег form, form и каждый раз обращаться к главной форме ну такое себе =(

Answer 3

[Олег]

в html-код вашей кнопки добавьте параметр accesskey="Enter" - тогда на нажатие Энтер - будет происходить нажатие кнопки вашей.
далее jquery.ajax

$(document).ready(function(){

  $("#кнопка").click(function(){
     $.ajax({
        type: 'POST',
        url: "адрес куда вы отправляете данные",
        // в кавычки ниже вы указываете строкой переменные и их значения, которые отсылаете серверу
        data: "var_input1=содержимое_блока_инпут1&var_input2=содержимое_блока_инпут2",
        success: function(data){ // в ответ сервер выдаёт вам какие-то данные, например html
        data=String(data);
        var pagetitle=data.replace(/^[\s\S]*<title.*?>|<\/title>[\s\S]*$/ig, ''); // находим заголовок

        var regexp=/<!--([\s\S]*?)-->/mig; // находим данные внутри тэга <body> и преобразуем в объект Jquery.
        data=data.replace(regexp,"");
        data='<div id="root">'+data.replace(/^[\s\S]*<body.*?>|<\/body>[\s\S]*$/ig, '')+'</div>';
        data=$(data);
        // далее вы уже можете внедрить в код вашей страницы детали ответа, если хотите
        }
     })
  });

})

Если вы хотите передать данные JSON
то вместо data в $.ajax нужно использовать processData

"По умолчанию, все передаваемые на сервер данные, предварительно преобразуются в строку (url-формата: fName1=value1&fName2=value2&...) соответствующую "application/x-www-form-urlencoded". Если вам необходимо отправить данные, которые нельзя подвергать подобной обработке (например документ-DOM), то следует отключить опцию processData. " jquery.page2page.ru/index.php5/Ajax-%D0%B7%D0%B0%D...

Comments

[Genri_Rus]

Спасибо за подробный и развернутый ответ !_

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>

У меня ajax вот такой:

jQuery(document).ready(function($){
  $('.myclass').keypress(function(eventObject){
  var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
});
});

Проблема в том, что пользователь может только искать статьи и выбирать их в самом окне input, но при нажатии на Enter ничего не происходит и не отправляется, т.к. нету тега form
Как только я вставлю тег form пример:

<form>
<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>
<form>

Все прекрасно отправляется при нажатии на кнопку Enter