Fatal编程技术网
  • javascript/
  • Javascript 提交表单后运行函数

Javascript 提交表单后运行函数

javascript jquery html forms

Javascript 提交表单后运行函数,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我有一个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

我有一个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>


选择其他重要时刻：
函数postform（）
{
document.getElementById（“usr_time”）.disabled=true；
document.getElementById（'my_form'）.submit（）；
};
使用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>
或者类似的方法，通过使用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>
或者类似的内容

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

为了简单起见，您可以像其他答案所建议的那样使用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>
...

。。。
重置
if（localStorage.disabled）{
document.getElementById（“usr_time”）.disabled=true；
}
函数重置（）{
document.getElementById（“usr_时间”）.disabled=false；
localStorage.removietem（'disabled'）；
}
函数postform（）{
document.getElementById（“usr_time”）.disabled=true；
localStorage.disabled=true；
document.getElementById（'my_form'）.submit（）；
};
...
功能示例：

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

为了简单起见，您可以像其他答案所建议的那样使用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>
...

。。。
重置
if（localStorage.disabled）{
document.getElementById（“usr_time”）.disabled=true；
}
函数重置（）{
document.getElementById（“usr_时间”）.disabled=false；
localStorage.removietem（'disabled'）；
}
函数postform（）{
document.getElementById（“usr_time”）.disabled=true；
localStorage.disabled=true；
document.getElementById（'my_form'）.submit（）；
};
...
功能示例：

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


选择其他重要时刻：
函数postform（link）
{
警报（“点击”）；
link.onclick=函数（事件）
{
event.preventDefault（）；
}
document.getElementById（'my_form'）.submit（）；
};
您不能使用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>


选择其他重要时刻：
函数postform（link）
{
警报（“点击”）；
link.onclick=函数（事件）
{
event.preventDefault（）；
}
document.getElementById（'my_form'）.submit（）；
};
什么是不工作？您有任何错误吗？我认为这很好：提交操作将刷新页面。。所以你可以使用cookies或localStorage来完成这个任务。@sebastiaan，实际上输入被禁用了，但是页面会刷新，这就是为什么我认为你感到困惑的原因。您的代码工作正常。使用
ajax
提交并在ajax帖子后放置
事件.preventDefault（）
函数。我认为您面临的问题可能是因为提交后的页面刷新（）什么是不工作？您有任何错误吗？我认为这很好：提交操作将刷新页面。。所以你可以使用cookies或localStorage来完成这个任务。@sebastiaan，实际上输入被禁用了，但是页面会刷新，这就是为什么我认为你感到困惑的原因。您的代码工作正常。使用
ajax
提交并在ajax帖子后放置
事件.preventDefault（）
函数。我认为您面临的问题可能是因为提交后的页面刷新（）添加
e.preventDefault（）
@MohitBhardwaj OP确实想要提交。那么，AJAX。我会简单地更改它，您可以通过ajax提交。如果页面被刷新，那么禁用该字段是没有用的。add
e.preventDefault（）
@MohitBhardwaj OP真的想提交。好吧，那就用AJAX吧。我会简单地更改它，您可以通过ajax提交。如果刷新页面，则不需要禁用该字段。