时间戳

首页 > 解决方案 > 连同请求参数一起提交表单

javascript - 连同请求参数一起提交表单

问题描述

我想使用 javascript 将我的表单提交到后端。但是，我还必须向表单 url/action 端点添加一个可变参数。想知道 javascript 的做法是什么？

这就是我现在拥有的

<form id="profile-message-form" action="/send-message?to" method="get">
   <textarea name="message-content" id="message-content" maxlength="1000" contentEditable="true"></textarea>
   <div id="send-button-container">
       <button id="profile-message-submit" onclick="sendMessage('profile-message-form')" name="subject" type="submit"><i id="profile-message-send-icon" class="fas fa-paper-plane"></i><p>Send</p></button>
   </div>
</form>

function sendMessage(form_id) {
    var form = document.getElementById(form_id);
    // find email address to send to
    // submit form with email address as ":to" req param
    form.submit();
}

标签： javascripthtmlfrontendweb-frontend

解决方案

最简单的方法是在提交之前将隐藏字段添加到表单中。

const formEl = document.getElementById('form');

formEl.onsubmit = e => {
  e.preventDefault();
  
  const hiddenAgeEl = document.createElement('input');
  hiddenAgeEl.type = 'hidden';
  hiddenAgeEl.name = 'age';
  hiddenAgeEl.value = 22;
  
  formEl.append(hiddenAgeEl);
  
  formEl.submit();
}
<form id="form" action="/send-message?to" method="get">
   <input type="text" name="name">
   <button type="submit">Submit</button>
</form>

推荐阅读