表单提交时禁用提交按钮

Question

我正在使用此验证码，我想在验证后提交表单时禁用提交按钮。 提交按钮

<input type="submit" class="submitStandard" value="Save Info" >

验证码：

<script type='text/javascript'>//<![CDATA[
                $(".submitStandard").on('click', function() {
                    $('form').validate({
                        ignore: [],
                        rules: {
                            required: {
                                required: true
                            },
                            shopname: {
                                required: true
                            }
                        },
                        highlight: function(element) {
                            $(element).closest('.form-group').addClass('has-error');
                        },
                        unhighlight: function(element) {
                            $(element).closest('.form-group').removeClass('has-error');
                        },
                        errorElement: 'span',
                        errorClass: 'help-block',
                        errorPlacement: function(error, element) {
                            if(element.parent('.input-group').length) {
                                error.insertAfter(element.parent());
                            } else {
                                error.insertAfter(element); 
                            }
                        }
                    });
                });//]]>
            </script>

任何最佳解决方案，如果没有任何验证错误，应该禁用提交。

问题：当我保存信息时，如果我点击提交按钮两次或三次，它会保存两次或三次，应该单击一次，然后应该禁用。

Answer 1

只需添加：

// Load the list of items to play video

var video = document.getElementById("splayer");
var arr = [
  "'../media/sintel.mp4'",
  "'../media/Arnold.MP4'",
  "'../media/sanam puri songs (ACOUSTIC) - YouTube.mp4'",
  "'../media/big_buck_bunny.mp4'",
  "'../media/102614-maui-with-words.webm'",
  "'../media/Dream - Motivational Video - YouTube.MKV'",
  "'../media/My Top 5 Life Inspirational Songs - YouTube.MKV'",
  "'../media/BEST Fitness Motivation Video HD !!! - POWER REEL -     YouTube.MKV'",
  "'../media/BELIEVE IN YOURSELF - Motivational Video (ft. Jaret     Grossman & Eric Thomas) - YouTube.MKV'",
  "'../media/Jai Hanuman gyan gun sagar with lyrics! - YouTube.MKV'",
  "'../media/missile.mp4'",
  "'../media/mov_bbb.mp4'"
];
var id = document.getElementById('rightListBar');
// var imgdiv=document.getElementById('itemImage');
var div = document.createElement('div');
div.setAttribute('id', 'item');
id.appendChild(div);

for (var i = 0; i < arr.length; i++) {
  var innerdiv = document.createElement('div');
  innerdiv.setAttribute('class', 'innerdiv');
  div.appendChild(innerdiv);
  var image = document.createElement('img');
  image.setAttribute('src', '../images/image3.jpg');
  innerdiv.appendChild(image);
  var anchor = document.createElement('a');
  // anchor.setAttribute('onclick','selectItemToPlay('+arr[i]+')')
  anchor.setAttribute('onclick', 'selectItemToPlay(' + arr[i] + ')');
  var str = arr[i].substr(10);
  item = str.substr(0, str.length - 5);
  anchor.innerHTML = item;
  innerdiv.appendChild(anchor);
}

function selectItemToPlay(item) {
  var video = document.getElementById("splayer");
  stops();
  video.src = item;
  plays();
}

var string;

function shuffleList() {
  for (var i = 0; i < arr.length; i++) {
    string = arr[i];
    string.substr(0, length - 3);
    video.src = string;
    video.play();
  }
}

function setDuration() {
  var totalLength = video.duration;
  totalLength = totalLength / 60;
  document.getElementById('totalTime').innerHTML =     totalLength.toFixed(2).replace('.', ':');
}

var pbar = document.getElementById('movebar');

function updateTime() {
  var playingSpot = video.currentTime;
  var m = playingSpot / 60;
  m = m.toFixed(2)
  document.getElementById('elapsedTime').innerHTML = m.replace('.', ':');
  // var r = video.buffered;
  // var start = r.start(0);
  // var end = r.end(0);
  var total = video.duration;
  var percentage = Math.floor((100 / total) * playingSpot);
  pbar.innerHTML = percentage + '%';
  pbar.style.width = percentage + '%';
}

function plays() {
  video.play();
}

function pauses() {
  video.paused === true ? video.play() : video.pause();
}

function forwards() {
  video.currentTime += 5;
}

function rewind() {
  video.currentTime -= 5;
}

function stops() {
  video.pause();
  video.currentTime = 0;
}
var vbar = document.getElementById('volume');
var vdiv = document.getElementById('volumeDiv');
var volumeDown = document.querySelector('#volumeDown');
var volumeUp = document.querySelector('#volumeUp');
var volumeOff = document.querySelector('#volumeOff');

function changeVolume(direction) {
  if (direction === '+') {
    video.volume += video.volume == 1 ? 0 : 0.1;
    console.log(video.volume);
    vbar.innerHTML = Math.round(video.volume * 10);
    vbar.style.width = Math.round(video.volume * 10) * 10 + '%';
    vdiv.style.visibility = 'visible';
  } else {
    video.volume -= (video.volume == 0 ? 0 : 0.1);
    console.log(video.volume);

    vbar.innerHTML = Math.round(video.volume * 10);
    vbar.style.width = Math.round(video.volume * 10) * 10 - 10 + '%';
    vdiv.style.visibility = 'visible';
  }
  video.volume = parseFloat(video.volume).toFixed(1);
  // setTimeout('hideVolume',3000);
}

function hideVolume() {
  vdiv.style.visibility = 'hidden';
}

function muteVolume() {
  var btn = document.getElementById('volumeOff');
  if (video.muted) {
    video.muted = false;
    btn.style.textDecoration = "none";
  } else {
    video.muted = true;
    btn.style.textDecoration = "line-through";
    btn.style.color = "red";
    btn.style.transform = "rotate(-7deg)"
  }
}

var controldiv = document.getElementById('controls');
var progress = document.getElementById('progress');

function fullScreen() {
  video.width = 800;
  controldiv.style.width = '780px';
  progress.style.right = '113px';
  // btns.style.left='210px';
}

function smallScreen() {
  video.width = 580;
  controldiv.style.width = '560px';
  controldiv.style.margin = '20px 0 -51px 0px';
  progress.style.right = '75px';
}

var progressBarXY = document.querySelector('#progress');
var movePBar = document.querySelector('#movebar')

progressBarXY.addEventListener("click", forwardBackwardVideoPosition,     false);

function forwardBackwardVideoPosition(e) {
   video.currentTime = (e.offsetX / progressBarXY.clientWidth) *     video.duration;
  video.paused = video.play();
}

function getPosition(element) {
  var posX = 0;
  var posY = 0;

  while (element) {
    posX += (element.offsetLeft - element.scrollLeft +     element.clientLeft);
    posY += (element.offsetTop - element.scrollTop + element.clientTop);
    element = element.offsetParent;
  }
  return {
    x: posX,
    y: posY
  };
}

完整代码：

$(this).prop("disabled", true);

或$(".submitStandard").on('click', function() { $(this).prop("disabled", true); $('form').validate({ ignore: [], rules: { required: { required: true }, shopname: { required: true } }, highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); }, errorElement: 'span', errorClass: 'help-block', errorPlacement: function(error, element) { if(element.parent('.input-group').length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } } }); }); 的{​​{1}}事件：

submit

注意：我可以看到您使用的是通用<form>。建议不要这样做，因为当JavaScript加载时，它会盲目地应用于所有$('form').submit(function(){ $(this).find(".submitStandard").prop('disabled', true); }); 元素。所以最好给出$("form")。

Answer 2

使用validate的 submitHandler 属性，如下所示：

$(".submitStandard").on('click', function() {
  var button=$(this);
  $('form').validate({
    ignore: [],
    rules: {
      required: {
        required: true
      },
      shopname: {
        required: true
      }
    },
    //.. Other properties
    //..
    submitHandler: function(form) {
         if(form.valid()) //check if form is valid?
         {
             button.prop("disabled", true);
         }
    },
    //..
  });
});

Answer 3

<强> HTML：

<form id="registrationfrm" method="post">
<input type="submit" id="submitbtn" name="submit" value='SAVE' /> 
</form>

<强> Jquery的：

$("#registrationfrm").on("submit",function(){
$("#submitbtn").prop('disabled', true);
});

Answer 4

你可以试试 -

$('form#id').submit(function(){
    $(this).find('input[type=submit]').prop('disabled', true);
});

How can I disable/enable submit button after jQuery Validation?