สอบถามวิธีทำสลับปุ่มที่ใช้ได้กับ safari

[eange08]

ทำกดปุ่มแรกแล้วให้เปลี่ยนเป็นอีกปุ่มหนึ่ง เช่น ปุ่มโพสต์ เมื่อกดจะเปลี่ยนเป็นปุ่มกำลังบันทึก

• จะมีปัญหากับ safari version 16.3 ขึ้นไปบางทีปุ่มก็เปลี่ยนเป็นปุ่มกำลังบันทึก บางทีก็ไม่เปลี่ยนยังค้างอยู่ที่ปุ่มโพสต์เหมือนเดิม
• ใช้กับ google chrome กับ firefox ปุ่มเปลี่ยนได้ปกติค่ะ
• เลยอยากให้แนะนำ js ที่ใช้เปลี่ยนปุ่มให้หน่อยค่ะ
  ตอนก่อนกด ยังมีโค้ดส่วนปุ่มโพสต์

  

  Selection_999(1639).png (36.43 KiB) Viewed 2062 times

  หลังกด โค้ดส่วนปุ่มโพสต์หายไปเพราะใช้ remove แต่ปุ่มไม่เปลี่ยนเป็นกำลังบันทึก

  

  Selection_999(1640).png (29.15 KiB) Viewed 2062 times

วิธีที่ลองใช้

• แบบที่ 1 ซ่อนปุ่มโพสต์ แล้วเปิดปุ่มกำลังโพสต์

  โค้ด: เลือกทั้งหมด

  <script type="text/javascript">
  $('#save-button').click(function() {             
              saveData();
             return false;
          });
          function saveData(){
              $('.default-submit-action').hide();
              $('.submit-waiting').show(); 
                console.log('submit post');
              postform.submit();
          }
  </script>
  <div class="publish-save">
   <input name="post" value="{L_PUPLISH_V3}" type="hidden" />
  <!-- ปุ่มโพสต์ -->
  <button  name="post2"  class="button btn-post-type default-submit-action "  id="save-button" value="{L_PUPLISH_V3}" >{L_PUPLISH_V3}</button>
  <!-- ปุ่มกำลังบันทึก -->
  <div  class="submit-waiting" style="display: none;">{L_BUTTON_WAITING}</div>    
  </div>       
  

• แบบที่ 2 เอาปุ่มโพสต์ออก แล้วโชว์ปุ่มกำลังบันทึก

  โค้ด: เลือกทั้งหมด

  <script type="text/javascript">
  $(document).on('click', '#save-button', function () { 
               $('.publish-save #save-button').remove();
               $('.publish-save .submit-waiting').show(); 
         
               postform.submit();
             return false;
          });
  </script>
  <div class="publish-save">
   <input name="post" value="{L_PUPLISH_V3}" type="hidden" />
  <!-- ปุ่มโพสต์ -->
  <button  name="post2"  class="button btn-post-type default-submit-action "  id="save-button" value="{L_PUPLISH_V3}" >{L_PUPLISH_V3}</button>
  <!-- ปุ่มกำลังบันทึก -->
  <div  class="submit-waiting" style="display: none;">{L_BUTTON_WAITING}</div>    
  </div>           
  

• แบบที่ 3 เอาปุ่มโพสต์ออก และใช้ js เพิ่มปุ่มกำลังบันทึกแทน

  โค้ด: เลือกทั้งหมด

  <script type="text/javascript">
  $(document).on('click', '#save-button', function () { 
               $('.publish-save #save-button').remove();             
               $('.publish-save').append('<div  class="submit-waiting" >{L_BUTTON_WAITING}</div>');
               postform.submit();
            
          });
  </script>
  
  <div class="publish-save">
   <input name="post" value="{L_PUPLISH_V3}" type="hidden" />
  <!-- ปุ่มโพสต์ -->
  <button  name="post2"  class="button btn-post-type default-submit-action "  id="save-button" value="{L_PUPLISH_V3}" >{L_PUPLISH_V3}</button>
  <!-- ไม่มีปุ่มกำลังบันทึก -->
  
  </div>       
  

• แบบที่ 4 เอาปุ่มโพสต์ออก และเปลี่ยน class กับชื่อปุ่มโพสต์เป็นปุ่มกำลังบันทึก และใช้ js เพิ่มปุ่มกำลังบันทึกแทน

  โค้ด: เลือกทั้งหมด

  <script type="text/javascript">
  $(document).on('click', '#save-button', function () { 
               $('.publish-save #save-button').remove();             
               $('.publish-save #save-button').attr("class","submit-waiting");
               $('.publish-save #save-button').text("{L_BUTTON_WAITING}");       
               $('.publish-save').append('<div  class="submit-waiting" >{L_BUTTON_WAITING}</div>');
               postform.submit();
            
          });
  </script>
  <div class="publish-save">
   <input name="post" value="{L_PUPLISH_V3}" type="hidden" />
  <!-- ปุ่มโพสต์ -->
  <button  name="post2"  class="button btn-post-type default-submit-action "  id="save-button" value="{L_PUPLISH_V3}" >{L_PUPLISH_V3}</button>
  <!-- ไม่มีปุ่มกำลังบันทึก --> 
  </div>