Question

我正在尝试通过点击我网站上的图片来执行Javascript中的功能。问题是控制台没有显示任何内容。我不知道错误。

该功能必须使用发布请求提交表单。

这是我在HTML中的图像和表单的代码：

<div class="team"> 
        <img class="teamInfo" src="images/leaderboard.png">  
        <p class= "createT"> Create a Team </p>
        <p class= "chooseC"> Choose a Charity </p>
        <p class= "enter"> Enter Team Member's Email</p>
        <p class= "upload">Upload your Company<br>or Team's Logo</p>

        <!-- added action tag solved the 405 error : "post method not allowed"-->
     <form id="create_team_form"  action="" method ="post" >
            <textarea class= "teamName" type="text" id="teamName" name ="teamName"  size ="25" maxlength ="60"/>Team Name
            </textarea>
            <textarea class= "companyName" type="text" id="companyName"  name ="companyName"  size   ="25" maxlength   = "60" value="Company Name"/> Company Name
            </textarea>
            <textarea class= "teamDescription"  type="text" id="teamDescription"  name ="teamDescription"    size ="25"    maxlength = "60" value="Team Description"/>     Team Description
            </textarea>
            <textarea class= "email" type="text" id="email"  name ="email"  size ="25"   maxlength = "60" value="emails"/>   Emails</textarea>
            <textarea class= "searchCharity"  type="text" id="charityName" name ="charityName  "  size ="25"      maxlength = "60"/>  Search for a Charity
            </textarea>
            <p class="click"> Click the charity's name to select who your team will run for!</p>
     </form>   
     <img class="img-box" src="images/imgBox.png" alt=""/>
     <img class="greenButton" src="images/greenbutton.png" alt="" onClick="createTeam();"/>
</div>

这是我在JavaScript中的功能：

function createTeam(){

    var teamN= document.getElementById("teamName").value;
    var companyName =document.getElementById("companyName").value; //maybe not, tae it off.
    var charityName = document.getElementById("charityName").value;



    if((teamN.trim() == "") || (companyName.trim() == "") || (charityName.trim() == ""))
    {
        alert("You did not fill the team Name  or companyName, Please enter with a name");

    }else{

        $('#create_team_form').submit(function(e){
                        e.preventDefault();
                         var sessionID = $.cookie("sessionID")
                         $.ajax({
                                type: "POST",
                                url: "http://xxx.xxx.xxx.x:9000/team/?sessionID="+sessionID,
                                data: $(this).serialize(),
                                success: function(msg) {
                                    $.cookie("teamID",msg.teamID)
                                    $.cookie("sessionID",sessionID)
                                }
                                });
                         });
        }
}
   function openEditTeamPage(){

       window.location.href='editTeam.html';

    }

控制台没有显示任何内容。我做错了什么？

Answer 1

使用jQuery的.submit()方法有两种方法签名。

请参阅文档中的以下一行：

描述：将事件处理程序绑定到“提交”JavaScript事件，或在元素上触发该事件。

[强调我的] found here

当您为.submit()方法提供函数时.submit(function() {});它会将该函数添加为该表单的submit事件的事件处理程序。但是，它实际上并没有触发 submit事件。只有在submit没有提供参数时才会触发.submit()事件。

所以，

$('#create_team_form').submit()

将提交表格，但

$('#create_team_form').submit(function() {
 // code 
});

只会向表单的submit事件添加一个事件处理程序。在后一个例子中没有提交表格。

您根本不需要.submit()，因为您实际上并未提交表单 - 您手动发送数据。有关如何实现此目的的示例，请参阅this plunkr。

在html中调用时，javascript中的函数没有被执行

1 个答案: