2011-12-19 3 views
1

私は私のように使用する予定のフォームに追加の送信ボタンを追加しました。別のファイルに投稿するフォームの "アクション"を伝えるフォーム上のボタンを分けてください。

  1. ユーザーはアイテム
  2. を選択して、ユーザーがフォーム上のボタンを提出してください「別の項目を追加」を打ちます。
  3. フォームを自分自身に作成し、ページをリロードしてユーザーが別のアイテムを追加できるようにする
  4. ユーザーが複数のアイテムを追加すると、ユーザーは「完了」送信ボタンを押します。
  5. フォームは、蓄積されたすべてのアイテムを含む別のファイルに投稿します。

これはPHP/HTMLだけでは実現できないと感じていますが、フォームがPOSTデータを開始する前にフォームアクションを変更するためにJavascriptを使用する必要があるかもしれません。

思考とアイデア?

ありがとうございました

答えて

2

あなたがクリックされたボタンに基づいてフォームを変更するために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> 
+0

ありがとう、問題は2つの異なるページにPOSTするために新しいSubmitボタンが必要だということです。 POSTのフォームを1ページだけにして、その値を確認してください。スクリプトが適切なページにリダイレクトされたらPOSTデータが失われますか? – kaleeway

+0

リダイレクトでは、POSTデータを失うことになりますが、PHPを活用することができます: 'インクルード 'を使用すると、コードを必要な場所と場所に持ち込むことができ、その後リダイレクトすることができます。 –

+0

こんにちは@nikc、Javascriptコードを説明するためにいくつかの情報に私をリンクすることができます。私は開始時に、それぞれの送信ボタンに2つの変数を割り当てることを少し理解しています。しかし残りの部分はわかりません – kaleeway

2

これはjavascriptなしで実行できます。あなたはあなたにフォームを投稿しているスクリプトが$_POST['btn']値を調べることによってクリックされたボタンを決定し、それぞれの行動を取ることができます内側に今

<button type="submit" name="btn" value="addItem">Add item</button> 
<button type="submit" name="btn" value="finish">Finished</button> 

:ちょうどあなたの異なる値を持つボタン名を提出与えます。

+0

おかげで、私はその後、リダイレクトする必要があり、このよう適切なページ。しかし、これは別のPHPページにジャンプすると私のPOSTデータを失うことになるでしょうか? – kaleeway

+0

@loosebruce、はい、リダイレクトすると、POSTデータが失われます。リダイレクトしないでください。いくつかの成功メッセージを表示するために、最後にすべての処理が完了したら、リダイレクトすることができます。 –

+0

ありがとうございますが、私がしようとしているフォームは、あなたが1つのものを選択できるショッピングカートのようなものです。あなたが特定の送信ボタンをクリックするより多くのものを追加したい場合。このボタンをクリックすると、同じページが再ロードされますが、買い物カゴにデータが追加されます。これにより、より多くのアイテムを追加することができます。あなたが合計項目を支払う別のページに行く "完了"送信ボタンをクリックするまで。 申し訳ありませんが、私はそれを明確に説明していません。 – kaleeway

3

2つの送信ボタンには名前は同じですが値は異なります。 PHPファイルの値をチェックすることができます。

<form action="something.php" method="post"> 
<input type="submit" name="submit" value="one"> 
<input type="submit" name="submit" value="two"> 
</form> 

something.php

switch($_POST['submit']) { 
    case 'one': 
    case 'two': 
} 
関連する問題