0

ページには、次のようなクリック可能な画像/ボタンがいくつかあります(Prototype.jsを使用)。

    $$( '.lbrchk' ).each( function ( name ) {
        name.observe( 'click' , function ( ev ) {
          var form = new Element( 'form',
                                    {
                                      method: 'post',
                                      action: 'url',
                                    });

            form.insert(new Element( 'input',
                                      {
                                        name: 'user',
                                        value: $(this).down( "input[name=user]" ).value,
                                        type: 'hidden'
                                      }));

            form.insert(new Element( 'input',
                                      {
                                        name: 'pin',
                                        value: '',
                                        type: 'password'
                                      }));

            form.insert(new Element( 'input',
                                      {
                                        type: 'submit',
                                        value: 'Submit',
                                       'class': 'processing'
                                      }));

            $('modal-content').insert(form); 
            $('modal').show();
            $('modal-content').down("input[name=user]").focus();

        });
    });

およびこれを持っている他の人。

$$( '.lbrinq' ).each( function ( name ) {
    name.observe( 'click' , function ( ev ) {
        var form = new Element( 'form',
                                {
                                  method: 'post',
                                  action: 'url'
                                });

            form.insert(new Element( 'input',
                                  {
                                    name: 'document',
                                    value: $(this).down("input[name=document]").value,
                                    type: 'hidden'
                                  }));

             $(document.body).insert(form);
             form.submit(); 

    });
});

どちらも似ていますが、一方は送信前にユーザー入力を求めるモーダル フォームを作成し、もう一方はフォーム要素を作成し、ボタン/画像がクリックされたときにフォームを実用的に送信します。

フォームの送信を 1 つだけ許可するには、送信イベント ハンドラーを追加する必要があります。これらのフォームは動的に作成されるため、私が試みていることはすべて何らかの形で失敗しています。

変えてみました

    var form = new Element( 'form',
                            {
                              method: 'post',
                              action: 'url'
                            });

    var form = new Element( 'form',
                            {
                              method: 'post',
                              action: 'url',
                              onsubmit: 'alert("hi");return false;'
                      //also  onsubmit: function(){ alert("hi" ); }

                            });

また、送信リスナーをドキュメントに追加しようとしました

 document.observe( 'submit', function( e, el ) {

    if ( el = e.findElement( 'form' ) ) {

          // Disable  all submit buttons
          $$( 'input[type="submit"]' ).invoke( 'disable' );         

          // If no previous submissions detected go ahead
            if( subck == 0){
              // show loading graphic to user
              $('processing_gif').show();

                  subck = 1;
                 return true;  // jump out of logic to continue normal operation
            } else { // Previous submission detected

              // Stop right here to prevent multiple submissions.
                e.stop();       
        }
    }
  });

これはFirefoxでは機能しますが、IE 8/9では機能しません。

動的に作成されたフォームで「送信」イベントを処理する方法について誰か提案がありますか?

4

0 に答える 0