在HTML中使用JavaScript在文本框中输入值

Question

我有一个带有文本框的网站，在此文本框旁边，我有一些按钮，当用户单击它们时，我需要一些按钮转到文本框并提交表单。 例如，我有以下代码：

<form action="send.php" method="post">
  <input type="text" name="url"><br>
  <button type="button" value="www.example1.com">Website #1</button>
  <button type="button" value="www.example2.com">Website #2</button>
  <button type="button" value="www.example3.com">Website #2</button>
</form>

当用户单击每个按钮时，JavaScript会自动插入按钮的值，然后提交表单。
我怎样才能做到这一点？

Answer 1

您会考虑使用jQuery吗？ 如果这样重写它

<form action="send.php" method="post">
<input type="text" id="txturl" name="url"><br>
<button type="button" value="www.example1.com" onclick="sendToSite('www.example1.com');">Website #1</button>
</form>

<script>


    function sendToSite(arg){
        $("#texturl").val(arg);
        $("#send.php").submit();
    }
</script>

Answer 2

HTML

<form id="form1" action="send.php" method="post">
    <input type="text" name="url" /><br>
    <button type="button" value="www.example1.com">Website #1</button>
    <button type="button" value="www.example2.com">Website #2</button>
    <button type="button" value="www.example3.com">Website #2</button>
</form>

JAVASCRIPT

var form1 = document.getElementById("form1");
var url = document.getElementsByName("url")[0];
var buttons = form1.getElementsByTagName("button");
for (var index = 0; index < buttons.length; index++)
{
    buttons[index].addEventListener("click", function(){
        url.setAttribute("value", this.getAttribute("value"));
        form1.submit();
    });
}