从按钮读取文本并输入并运行

Reading text from button and put into input and run

本文关键字：输入 运行 取文本 按钮 读取      更新时间：2023-12-05

我很难使用按钮和JavaScript。

我有一个按钮，例如名称为button1，我想输入它的名称button1，然后单击enter。我的意思是，我想发送查询进行搜索/排序。

以下是我迄今为止所做的工作。它正在工作，但只将文本输入到输入框中，没有任何操作。

http://jsfiddle.net/9t7L4dmw/

$( "button" ).click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
<input type="text" placeholder="Search">

因此，当您单击所需按钮时：

  • 要用按钮名称填充的输入
  • 提交表格

在这种情况下，将（至少）input包装在form标签内。在您的JS中，填写输入后提交form。

http://jsfiddle.net/9t7L4dmw/3/

$("form").on('click', 'button', function () {
  $("#search").val($(this).text());
}).on('submit', function (event) {
  event.preventDefault;
  var data = $(this).serialize();
  alert(data);
  // $.post(...);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method=post>
  <button type=submit>button1</button>
  <button type=submit>button2</button>
  <button type=submit>button3</button>
  <button type=submit>button4</button>
  <input type=search id=search name=search placeholder="Search">
</form>

关于没有ajax 的版本

它在片段中不起作用：

阻止表单提交到'http://stacksnippets.net/js'，因为表单的框架是沙盒的，并且没有设置"允许表单"权限。

但在jsfiddle中是可以的：http://jsfiddle.net/9t7L4dmw/4/

相关文章：