あなたがクリックされたボタンに基づいてフォームを変更するためにJavaScriptを使用することができ、またはあなたは、サーバー側を確認することができます(つまり、使用してPHP)どのボタンがクリックされたかに応じて動作します。
送信ボタンは他のフォームと同じようにフォーム入力です。つまり、名前と値を入力してサーバー側で確認できます。
クライアント側(JavaScriptを使用)では、ボタンのクリックイベントにハンドラをバインドし、フォームのアクション属性を変更して新しいアドレスに送信します。ここで
は、クライアント側の例です:
<!doctype html>
<html>
<head>
<title>Form submit test</title>
</head>
<body>
<form action="baz.html" method="post">
<input id="bar" type="submit" class="button" value="bar.html" name="" />
<input id="foo" type="submit" class="button" value="foo.html" name="" />
</form>
<script>
// Find the two buttons from the DOM and assign them to separate variables
var barBtn = document.getElementById('bar'),
fooBtn = document.getElementById('foo');
// Click-handler for the buttons.
// NB! For this code to work as intended, it needs to run
// in the context of the button, otherwise, the this-keyword
// will not resolve correctly and this will result in an error
// NB2! This code also requires that a button's value will be
// the desired action handler. Usually you would probably not
// do this, but use the button's name/value to lookup the
// correct form action.
function modifyAction(e) {
this.form.action = this.value;
}
// Bind an event handler to an object
// NB! This is not code you should use in production
function bindEvent(target, event, callback) {
if (target.addEventListener) {
target.addEventListener(event, callback, false);
} else if (target.attachEvent) {
target.attachEvent('on' + event, callback);
}
}
// Delegate creates a wrapping closure which binds the
// original function's context to an object, i.e. ensuring
// the this-keyword always refers to the same object when
// the returned function is invoked.
function delegate(context, method) {
return function() {
return method.apply(context, arguments);
}
}
// Bind the click-event of the barBtb, and handle it
// with the modifyAction-function bound to the barBtn.
// I.e. run the modifyAction function, with the this-keyword
// bound to barBtn
bindEvent(barBtn, 'click', delegate(barBtn, modifyAction));
// Same as above for fooBtn
bindEvent(fooBtn, 'click', delegate(fooBtn, modifyAction));
</script>
</body>
</html>
ちょうど完全を期すために、ここで同じのjQueryの-例です:
<form action="baz.html" method="post">
<input id="bar" type="submit" class="button" value="bar.html" name="" />
<input id="foo" type="submit" class="button" value="foo.html" name="" />
</form>
<script>
// Jquery event-handlers are automatically bound to
// the element selected, so using "this" is safe
function modifyAction(e) {
this.form.action = this.value;
}
// Bind the click-event on all input with type=submit
$("input[type=submit]").click(modifyAction);
</script>
ありがとう、問題は2つの異なるページにPOSTするために新しいSubmitボタンが必要だということです。 POSTのフォームを1ページだけにして、その値を確認してください。スクリプトが適切なページにリダイレクトされたらPOSTデータが失われますか? – kaleeway
リダイレクトでは、POSTデータを失うことになりますが、PHPを活用することができます: 'インクルード 'を使用すると、コードを必要な場所と場所に持ち込むことができ、その後リダイレクトすることができます。 –
こんにちは@nikc、Javascriptコードを説明するためにいくつかの情報に私をリンクすることができます。私は開始時に、それぞれの送信ボタンに2つの変数を割り当てることを少し理解しています。しかし残りの部分はわかりません – kaleeway