Ajax с несколькими кнопками отправки

Как я могу изменить код ниже, поэтому вместо типа ввода текста с кнопкой отправки я хочу несколько кнопок отправки, каждый со своим уникальным значением? Все, что я пытаюсь, просто заканчивается тем, что значение submit не определено. Любая помощь будет замечательной!

Источник кода: отправить запрос и получить результат поиска без обновления

<script type="text/javascript"> $(function() { $("#lets_search").bind('submit',function() { var value = $('#str').val(); $.post('db_query.php',{value:value}, function(data){ $("#search_results").html(data); }); return false; }); }); </script> <form id="lets_search" action="" > Search:<input type="text" name="str" id="str"> <input type="submit" value="send" name="send" id="send"> </form> 

Вы можете добавить несколько кнопок отправки и подключиться ко всем из них в onclick event listener. Когда кнопка была нажата – получите значение и отправьте запрос POST.

 <script> $(function(){ $('input[type=submit]').click(function(){ $.post('db_query.php', {value:$(this).val()}, function(data){ $("#search_results").html(data); }); return false; }); }); </script> <form id="lets_search" action=""> <input type="submit" name="button1" value="hi"/> <input type="submit" name="button2" value="bye"/> </form> 

Если вы хотите использовать несколько кнопок отправки, вы можете поймать событие клика и определить, какая кнопка была нажата. затем запустите другой Ajax submit. это также работает, когда enter хит.

 //submit buttons <form id="lets_search" action="" > Search:<input type="text" name="str" id="str" /> <input type="submit" value="v1"/> <input type="submit" value="v2"/> //...more submit buttons </form> //submit func $(function() { $("#lets_search input[type=submit]").click(function() { switch ($(this).val){ case 'v1':...; case 'v2':... } }); }); 

Вот моя версия, которая теперь очень похожа на Bingjies, потому что она была написана, пока я тестировал его версию

DEMO

 <form id="lets_search" action="" > Search:<input type="text" name="q" id="q"> <input type="submit" value="Google" name="send" id="google"> <input type="submit" value="Bing" name="send" id="bing"> </form> $(function() { $("#lets_search input[type=submit]").click(function() { switch ($(this).val()) { case "Bing" : $("#lets_search").attr("action","http://www.bing.com/search"); break; case "Google": $("#lets_search").attr("action","https://www.google.com/search"); break; } }); }); 

Здесь я бы предпочел решение Vamsi n Почему не Sanjeev mk?

Дайте дополнительную мысль о том, как выбрать решение.

case: Если есть кнопки mulitple submit

Если пользователь находится в текстовом поле и попадает в него, система будет считать, что нажата первая кнопка отправки.

Итак, здесь было бы неплохо, если бы у вас не было пустых кнопок отправки для точки зрения конечного пользователя

У вас может быть несколько кнопок отправки в форме, без проблем. Они могут иметь одно и то же имя, тип и т. Д., Но просто присваивать им разные значения. Подобно Submit Button 1 может иметь значение = «hi», а Button 2 может иметь значение = «bye».

Затем, когда функция действия вызывается для кнопки, все, что вам нужно сделать при вводе функции, – это проверить: $ (this) .val

 HTML: <input type="submit" name="button1" value="hi"/> <input type="submit" name="button2" value="bye"/> jQuery: $(function() { $("#lets_search").bind('submit',function() { var value = $(this).val(); if(value == "hi") do_something; else do_something_else; }); });