ページには、次のようなクリック可能な画像/ボタンがいくつかあります(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では機能しません。
動的に作成されたフォームで「送信」イベントを処理する方法について誰か提案がありますか?