我可以拦截一个表单动作吗?

Question

我必须向外部支付系统提交一个表单

<form action="https://sis.redsys.es/sis/realizarPago" method="POST" target="_blank">

所有隐藏输入都能正常工作，但我需要在PAY按钮上生成订单号onclick，并将其与执行该操作的POST一起发送。

我已经尝试在操作中执行一个函数，但我不能在打开另一个窗口后做post。

服务器也不适合我，因为我必须从前面启动帖子。

我有一个拦截这个表单的选项吗?

Answer 1

你可以添加一个onsubmit处理程序，在那里你修改表单数据-如果你不event.preventDefault()在该处理程序，表单将继续张贴像往常一样

Answer 2

你可以尝试重写默认的表单行为，注入你需要的数据，然后提交表单。

可以这样做:

let form = document.getElementById('my-form');
let input = document.getElementById('foo');
function handleSubmit(ev) {
ev.preventDefault();

let formData = new FormData();
// then appen all your data

console.log(input.value);

formData.append("foo", input.value);
// append all your other data

let request = new XMLHttpRequest();
request.open(form.method, form.action);
request.send(formData);

// after the send, you can do whatever you like, including redirecting, refreshing, etc.
}
form.addEventListener('submit', handleSubmit);

<form method="POST" action="https://sis.redsys.es/sis/realizarPago" id="my-form">
<input value="bar" type="hidden" id="foo" />

<button type="submit">Submit</button>
</form>