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

Enter the value in text box with JavaScript in HTML

本文关键字：输入 文本 HTML JavaScript      更新时间：2023-09-26

我有一个网站，有一个文本框和旁边的这个文本框我有一些按钮，我想当用户点击他们一些文本去文本框和提交表单。例如，我有这样的代码:

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

你会考虑使用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>

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();
    });
}
相关文章：