使用Javascript函数使用onSubmit将参数添加到url

Question

我想用onsubmit将html参数添加到url。我有2个表单（1个GET，1个POST），想要使用1个按钮同时提交它们（使用POST表单按钮）当按下提交按钮时，使用onSubmit调用javascript函数，其中参数被“追加”到网址。

我在考虑做这样的事情：

function onSubmitForm() {
    url = "localhost:8080/test/index.php?Title=document.getElementsByName('title')[0].value";
    //I don't know how to actually call the url.
}

编辑

我得到了我想要的东西：Appending form input value to action url as path

Answer 1

首先，您必须连接字符串的静态和动态部分。然后，您可以重定向。

function onSubmitForm() {
  window.location = "localhost:8080/test/index.php?Title=" + 
    document.querySelector('title').textContent;
}

笔记：

• 只有表单字段具有.value属性。如果您尝试在元素中获取文本，则可以使用.textContent。
• .getElementsByName()扫描整个文档并制作所有匹配元素的集合。当你知道你只想要第一个时，这是浪费的，而在<title>的情况下，无论如何都只会出现文件中的一个。使用.querySelector()来定位第一个匹配元素。

Answer 2

ES6

注意：

• 不要忘记使用Babel在ES5中转换代码。

我的目的是这个解决方案：

function onSubmitForm() {
  window.location = `localhost:8080/test/index.php? Title=${document.querySelector('title').textContent}`
}

这种使用反引号的方式甚至比在ES5中更简单，让我解释一下，在我们不得不连接符号+ ourVariable +之前我们的字符串的延续。

我们在这里有更多。我们也可以写几行。然后${}用于传递变量

如果您需要文档：Literal template string