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

【问题标题】：Enter the value in text box with JavaScript in HTML在 HTML 中使用 JavaScript 在文本框中输入值
【发布时间】：2014-08-24 13:45:59
【问题描述】：

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

<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 会自动插入按钮的值然后提交表单。
我该怎么做？

【问题讨论】：

标签： javascript html

【解决方案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>

【讨论】：

@Mark 你所做的是故意破坏，不要再这样做了。
@ShadowWizard 我不明白。原始代码不起作用。没有带有texturl id 的元素，而是带有txturl 的元素，并且尝试通过表单操作查询DOM 元素不是：$('#send.php')。标记编辑正在解决这些问题。
@EmilCondrea 这不是他编辑其他人发布的代码并更改其含义的地方。代码的作者应该这样做。
@ShadowWizard 好的。我以为你想告诉他代码改进不正确。
@ShadowWizard 旧代码不起作用，我编辑了正确运行的代码，你为什么这么说？你认为最好让用户看到不起作用的代码，还是让用户看到有效的代码更好？！

【解决方案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();
    });
}

【讨论】：