Question

我有一个HTML格式的表单，这个表单是通过JavaScript函数提交的。我想在提交表单时禁用该字段。我试过这个，但我不会工作。

<html>
<body>

<form id="my_form" method="GET">
<div class="naam-speeltijd-timer">
<div class="naam-overigetijd">

<div class="settime">
<div class="tekst">selecteer het aantal minuten:</div>
<div class="inputfield"><input type="time" name="usr_time" id="usr_time" /> 
</div>
</div>

</div>

<div class="settime-activeerbutton">

<div class="submit">
<a href="javascript:postform()" class="button blue"><div class="light">       
</div>start timer</a>
</div>
</div>
</div>
</form> 

<script type="text/javascript">     
function postform( )
{
document.getElementById("usr_time").disabled = true;
document.getElementById('my_form').submit() ;
};
</script>
</body>
</html>

Answer 1

您可以使用AJAX正确提交表单并保留已禁用的输入，而无需刷新页面。这样您的页面就不会刷新，并且您将在AJAX成功后看到禁用的输入。试试这个：

$('.blue').on('click', function(e) {
  e.preventDefault();
  var usr_time = document.getElementById("usr_time");
  var usr_time_value = document.getElementById("usr_time").value;
  $.ajax({
    type: 'get',
    url: 'your_serverside_script_url',
    data: {
      usr_time_value: usr_time_value
    },
    success: function(response_from_serverside_script) {
      usr_time.disabled = true;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_form" method="GET">
  <div class="naam-speeltijd-timer">
    <div class="naam-overigetijd">

      <div class="settime">
        <div class="tekst">selecteer het aantal minuten:</div>
        <div class="inputfield">
          <input type="time" name="usr_time" id="usr_time" />
        </div>
      </div>

    </div>

    <div class="settime-activeerbutton">

      <div class="submit">
        <a href="#" class="button blue">
          <div class="light">
          </div>start timer</a>
      </div>
    </div>
  </div>
</form>

如果您需要在页面刷新后禁用输入，则需要使用localStorage或 cookies ，或处理服务器上的所有内容。

Answer 2

你不能使用onclick而不是href这样的东西：

<html>
<body>

<form id="my_form" method="GET">
<div class="naam-speeltijd-timer">
<div class="naam-overigetijd">

<div class="settime">
<div class="tekst">selecteer het aantal minuten:</div>
<div class="inputfield"><input type="time" name="usr_time" id="usr_time" />
</div>
</div>

</div>

<div class="settime-activeerbutton">

<div class="submit">
<a href="#" onclick="postform(this);" class="button blue"><div class="light">
</div>start timer</a>
</div>
</div>
</div>
</form>

<script type="text/javascript">
function postform(link)
{
    alert("click");
    link.onclick = function(event)
    {
        event.preventDefault();
    }
    document.getElementById('my_form').submit() ;
};
</script>
</body>
</html>

Answer 3

使用AJAX请求执行此操作。否则，输入字段将被禁用，但之后会重新加载页面，因此您不会看到该字段被禁用。

function postform() {
    $.ajax({
        type: 'GET',
        url: 'pageThatProcessesTheRequest.php', // does not have to be .php, can be whatever you use to process the data
        data: $("#usr_time").val()
    }).done(function () {
        $("#usr_time").prop("disabled", "true");
    });
}

另外，请确保

中包含jQuery

<script src="jquery.js"></script>

或类似的东西

Answer 4

进行以下编辑：

<div class="inputfield">
    <input type="time" name="usr_time" id="usr_time" /> 
    <input type="hidden" name="disabled" id="disabled" /> 
</div>

...

if(/disabled=true/.test(location.search)){
    document.getElementById("usr_time").disabled = true;
}
function postform( )
{
    document.getElementById("disabled").value=true;
    document.getElementById('my_form').submit();
}

提交表单后运行功能

4 个答案: