現在、ajaxでサーバーへ通信する際、2重送信をしないように以下のような設計にしております。
<div class="ques_btn" id="main_respo">送信</div> を押してサーバー側の処理へ移るのですが、同時に同タグに.completedが付されて、 pointer-events: none;が適用されるようにして防止を試みたのですが、 clickを連続すると複数会の処理がサーバーサイドで行われてしまいます。buttonやinput(submit)は使用しない前提で、このコードで二重送信が防止できない
理由と、実際に実務上どのような方法でこれを実現すべきかをアドバイスいただけますでしょうか。
よろしくお願い申し上げます。
html
1<div class="ui form"> 2 <div class="field"> 3 <textarea class="main_textarea" name="main_respo" rows="2" placeholder="100文字以内でコメントすることができます" maxlength="100"></textarea> 4 </div> 5</div> 6<div class="btn_wrapper"> 7 <div class="ques_btn" id="main_respo">送信</div> 8 <div class="insert"></div> 9</div>
css
1.completed{ 2 pointer-events: none; 3}
javascript
1$(function(){ 2 $('#main_respo').on('click',function(){ 3 if($('input[name="radio"]:checked').val()!=undefined){ 4 $.ajax({ 5 type:'POST', 6 url:'server.php', 7 timeout:1000, 8 data:{ 9 text:$('.main_textarea').val(), 10 select:$('input[name="radio"]:checked').val() 11 }, 12 success: function(text){ 13 $('.insert').empty(); 14 $('.insert').append('<p style="color:#f77676;">'+text+'</p>').hide().fadeIn(1000); 15 if (($('.main_textarea').val()).length>4) { 16 $('#main_respo').addClass('completed');//送信ボタンのdisable化 17 $('#main_respo').text('送信済');//送信ボタンのdisable化 18 } 19 }, 20 beforeSend:function(){ 21 if (($('.main_textarea').val()).length>4) { 22 $('#main_respo').text(''); 23 $('#main_respo').append('<img style="width:20px;height:20px;vertical-align:middle;" src="bars.svg" />') 24 } 25 } 26 }) 27 } 28 }) 29})
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/19 05:12