提交表单后运行函数

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或cookie ，或处理服务器端的所有内容。

Answer 2

该字段实际上是被停用的，但是在提交表单时，页面会重新加载并返回其初始状态，即该字段被激活。

为简单起见，您可以像建议的其他答案一样使用 ajax。 但如果它不是一个选项，您将需要一个标志来指示在加载页面时是否应禁用该字段。 还有一个按钮来重置这个标志。

像这样：

...
<button onClick="reset()">RESET</button>

<script type="text/javascript">
  if(localStorage.disabled){
    document.getElementById("usr_time").disabled = true;
  }

  function reset(){
    document.getElementById("usr_time").disabled = false;
    localStorage.removeItem('disabled');
  }

  function postform(){
    document.getElementById("usr_time").disabled = true;
    localStorage.disabled=true;
    document.getElementById('my_form').submit() ;
  };
</script>
...

功能示例：

闪电战

Answer 3

你不能使用 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 4

使用 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>

或类似的东西

提交表单后运行函数

问题描述

3 个解决方案

解决方案1
0 2017-01-04 15:41:24

解决方案2
-1 2017-01-04 15:37:01

解决方案3
-1 2017-01-04 21:57:10

解决方案4
-2 2017-01-04 15:22:36

提交表单后运行函数

问题描述

3 个解决方案

解决方案1 0 2017-01-04 15:41:24

解决方案2 -1 2017-01-04 15:37:01

解决方案3 -1 2017-01-04 21:57:10

解决方案4 -2 2017-01-04 15:22:36

解决方案1
0 2017-01-04 15:41:24

解决方案2
-1 2017-01-04 15:37:01

解决方案3
-1 2017-01-04 21:57:10

解决方案4
-2 2017-01-04 15:22:36