Question

所以基本上我有这个sign up按钮，当点击它时会展开一个隐藏的表格。

我希望能够做的是第一次单击按钮时，表单应该像现在一样展开，但是我想要它，这样一旦表单扩展，相同的按钮的链接应该更改，以便可以提交表单。

正如我在表单扩展后单击按钮时所看到的那样，它只是将表单折叠回原来的样式。

这是我的代码：

// jQuery Script that does the toggling for expanding and collapsing the hidden form
<script>
$(document).ready(function(){
    $("#button-1").click(function(){
          $("#special1").toggle()
    })
})
</script>



//CSS rule for hiding the form (collapse)
<style>
    #special1{ display: none }
</style>



// HTML form
<center>
    <form action="form_process.php" id="special1">
    <div>

       <input type="text" class="input" name="forename" size="20" maxlength="40" placeholder="First Name"/> <br /> 
       <input type="text" class="input" name="surname" size="20" maxlength="40" placeholder="Surname"/> <br />
       <input type="email" class="input" name="email" size="20" maxlength="40" placeholder="Email"/> <br />
       <input type="password" class="input" name="password" size="20" maxlength="40" placeholder="Password"/> <br />
    <br/>


  </form>


  // This is the button that expands and collapses the above form
  <input type="submit" value="Sign Up" id="button-1" class="submit"/>

  </center>

Answer 1

在点击事件中，检查表单的可见性，并相应地显示或提交表单这应该有效 -

$(document).ready(function(){
    $("#button-1").click(function(){
        if($("#special1").is(":visible")){
            $("#special1").submit();
        }else{
            $("#special1").show();
        }
    })
})

Answer 2

首次点击后，您应取消绑定点击事件。

$("#button-1").click(function(){
     $("body").off("click","#button-1");
      $("#special1").toggle();
})

Answer 3

$(document).ready(function(){
    $("#button-1").click(function(e){
          e.preventDefault();
          $("#special1").toggle()
    })
});

或

$(document).ready(function(){
    $("#button-1").click(function(e){
          $("#special1").toggle();
          return false;
    })
});

根据一组条件更改按钮的链接

3 个答案: