2011-12-11 10 views
2

私は、ユーザーがアップロードした写真を表示するページを持っています。私は2つの異なるアクションを提供する2つのフォームを持っています。最初のフォーム、replace_photo_formは、ユーザーがプッシュして写真を置き換えるだけのボタンです。 2番目のフォームnext_page_formは、写真のキャプションを入力するフィールドで、次のページに進むためのボタンです。ユーザーがnext_pageボタンを押すと、キャプションがDBに保存され、次のページに進みます。現在のフォームにない場合は、フォームフィールドを自分のPOSTに含めることはできますか?

<body> 
    <form id="replace_photo_form"> 
    <input type="text" name="caption" /> 
    <input type="submit" name="replace_photo" value="Replace Photo" /> 
    </form> 

    <div> 
    <p>This is where some other information is located</p> 
    </div> 

    <form id="next_page_form"> 
    <input type="submit" name="next_page" value="Next Page" /> 
    </form> 
</body> 

私はreplace_photo_formでそれを含めるように、キャプションフィールドは、ページ構造におけるreplace_photoボタンに直接横に表示します。問題は、next_pageボタンを押すと、私が望むようにキャプション入力フィールドのPOST値を保存しないということです。理想的には、captionフィールドをnext_page_formに追加するだけで、キャプションをPOST値として保存しますが、写真の置き換えボタンの隣に表示する必要があります。

フォームが現在のフォームにない場合、私のPOSTにフォームフィールドを含めるにはどうしたらいいですか?

答えて

3

2つのフォームを両方の送信ボタンにまたがるものにマージします(これにはもちろん入力が含まれます)。フォームが送信されたときに

その後、あなたはそのためのボタンが押されたとあなたが取るために必要なものアクション発見、$_POSTに存在する値(next_pageまたはreplace_photo)のどちらをチェックすることができます。

このテクニックはJavascriptが無効になっていても正しく動作します。この制限を緩和する場合は、数多くのオプションがあります(たとえば、現在のフォームの非表示フィールドにある別のフォームからテキストボックスの値をコピーするフォームのsubmitイベントをフックします)。

1

一つの可能​​性は、第二のフォームで隠しフィールドにその値を結びつける場にリスナーを追加することです:あなたはnext_pageボタンをクリックする前にreplace_photo_formが提出意味

<form id="replace_photo_form"> 
    <input type="text" name="caption" 
     onchange="document.getElementById('next_page_form_caption').value = this.value;"/> 
    .. 
</form 

<form id="next_page_form"> 
    <input type="hidden" id="next_page_form_caption" name="caption"/> 
    .. 
</form> 
0

、あなたは単にonclickを追加することができますnext_pageボタンのように:

<input type="submit" name="next_page" value="Next Page" onclick="document.getElementById("replace_photo_form").submit();" />