從按鈕讀取文本並將其放入輸入並運行

Question

我正在努力使用按鈕和JavaScript。

我有一個按鈕，其名稱是例如button1，我想把它的名字button1輸入並點擊回車。我的意思是我想發送查詢/排序。

這就是我到目前爲止所做的。它正在工作，但僅在沒有任何操作的情況下將文本放入輸入框。

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">

Answer 1

所以，當你按一下按鈕，你想：

• 輸入與按鈕的名稱
• 提交表單填寫？

在這種情況下，在form標記內包裹（至少）input。在你的JS填寫輸入後提交form。

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

Answer 2

$("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/