Javascript 提交表格时的喜怒无常行为_Javascript_Html_Parse Server

Javascript 提交表格时的喜怒无常行为

javascript html

Javascript 提交表格时的喜怒无常行为,javascript,html,parse-server,Javascript,Html,Parse Server,嗨（我是新手，所以你需要原谅我）我的最终目标是创建一个表单，将一些数据提交到名为parse server的后端数据库。到目前为止，我已经创造了我需要的一切，它似乎部分工作，但我正在经历一些相当奇怪的行为。如果我尝试按预期提交表单，它似乎什么也不做（没有数据保存到数据库）经过一些测试，我得出结论，只有在执行以下操作时，代码才会按预期运行：提交完全空白的表格按正常方式在中输入数据并再次提交（按预期工作）如果我在正常情况下输入数据后第三次尝试提交表单，它似乎什么也不做考虑到结果似乎喜怒无常

嗨（我是新手，所以你需要原谅我）

我的最终目标是创建一个表单，将一些数据提交到名为parse server的后端数据库。到目前为止，我已经创造了我需要的一切，它似乎部分工作，但我正在经历一些相当奇怪的行为。如果我尝试按预期提交表单，它似乎什么也不做（没有数据保存到数据库）

经过一些测试，我得出结论，只有在执行以下操作时，代码才会按预期运行：

提交完全空白的表格

按正常方式在中输入数据并再次提交（按预期工作）

如果我在正常情况下输入数据后第三次尝试提交表单，它似乎什么也不做

考虑到结果似乎喜怒无常，我不知所措。我已经检查了调试控制台，看看这是否能给我任何线索，但是没有收到任何错误

有人知道是什么导致了这种奇怪的行为吗

（我已经模糊了相关的解析访问键）

受影响的HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/parse_functions.js"></script>
    <script type="text/javascript" src="https://npmcdn.com/parse@1.8.5/dist/parse-latest.js"></script>
  </head>   
  <body>
<header>
    <div class="jumbotron" style="background:#006272 !important">
        <div class="container">
            <center><img src="logo.png" width="450px" height="93px"/></center><br/>
            <center><h2 style="color:#ffffff">[ALPHA] Mobile App Dashboard</h2></center>
        </div> 
    </div> 
</header>

<div class="container">
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#Home" data-toggle="tab">Absences</a></li>
        <li><a href="#About" data-toggle="tab">Push Notifications</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade in active"  id="Home" style="padding-top:30px">

            <form class="form-horizontal">
            <fieldset>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="teacherName">Teacher name</label>  
              <div class="col-md-4">
              <input id="teacherName" type="text" placeholder="e.g. Mr Smith" class="form-control input-md" required="">

              </div>
            </div>

            <!-- Textarea -->
            <div class="form-group">
              <label class="col-md-4 control-label" for="workDescription">Work Description</label>
              <div class="col-md-4">                     
                <textarea id="workDescription" class="form-control" name="workDescription"></textarea>
              </div>
            </div>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-4 control-label" for="linkLocation">Work Link</label>  
              <div class="col-md-4">
              <input id="linkLocation" type="text" placeholder="e.g. http://www.google.co.uk/" class="form-control" required="">

              </div>
            </div>

            <!-- Button -->
            <div class="form-group">
              <label class="col-md-4 control-label" for="absence"></label>
              <div class="col-md-4">
                <button id="absence" name="absence" class="btn btn-success" onClick="saveData()">Submit Absence</button>
              </div>
            </div>

            </fieldset>
            </form>
        </div>
        <div class="tab-pane fade"  id="About" style="padding-top:30px">
            <form class="form-horizontal">
            <fieldset>

            <div class="form-group">
              <label class="col-md-4 control-label" for="notificationTitle">Notification Title</label>  
              <div class="col-md-4">
              <input id="notificationTitle" name="notificationTitle" type="text" placeholder="e.g. Mr Smith" class="form-control input-md" required="">

              </div>
            </div>


            <div class="form-group">
              <label class="col-md-4 control-label" for="workDescription">Notification Message</label>
              <div class="col-md-4">                     
                <textarea id="workDescription" class="form-control" id="workDescription" name="workDescription"></textarea>
              </div>
            </div>



            <div class="form-group">
              <label class="col-md-4 control-label" for="absence"></label>
              <div class="col-md-4">
                <button id="absence" name="absence" class="btn btn-success" onClick="saveData()">Send Notification</button>
              </div>
            </div>

            </fieldset>
            </form> 
        </div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

    function saveData(){
    // initializes the connection to parse with the parameters (appId, javascript key)
    Parse.initialize("##########################", "##########################");
    Parse.serverURL = 'https://parseapi.back4app.com/'

    var absence = Parse.Object.extend("Absences");
    var absence = new absence();

    var name = document.getElementById('teacherName').value
    var description = document.getElementById('workDescription').value
    var link = document.getElementById('linkLocation').value

    absence.set("name", name);
    absence.set("work", description);
    absence.set("link", link);

    alert("test");

    absence.save(null, {
      success: function(gameScore) {
        // Execute any logic that should take place after the object is saved.
        alert("Created!");
      },
      error: function(gameScore, error) {
        // Execute any logic that should take place if the save fails.
        // error is a Parse.Error with an error code and message.
        alert('Failed to create new object, with error code: ' + error.message);
      }

});
}

我还制作了一个简化版本的代码来尝试和调试它-这个版本工作良好，产生了预期的结果，但仍然使用相同的javascript：

    <!doctype html>

    <html lang="en">
    <head>
      <meta charset="utf-8">

      <title>Data insert test</title>
      <script type="text/javascript" src="https://npmcdn.com/parse@1.8.5/dist/parse-latest.js"></script>

    </head>

    <body>

    <input placeholder="Teacher Name" id="teacherName"/>
    <br/>   
    <input placeholder="Work Description" id="workDescription"/>
    <br/>   
    <input placeholder="Work link/location" id="linkLocation"/>
    <br/>
    <button type="button" onclick="saveData()">Save Data</button>



    <script type="text/javascript">


    function saveData(){
        // initializes the connection to parse with the parameters (appId, javascript key)
        Parse.initialize("##########################", "##########################");
        Parse.serverURL = 'https://parseapi.back4app.com/'

        var absence = Parse.Object.extend("Absences");
        var absence = new absence();

        var name = document.getElementById('teacherName').value
        var description = document.getElementById('workDescription').value
        var link = document.getElementById('linkLocation').value

        absence.set("name", name);
        absence.set("work", description);
        absence.set("link", link);

        absence.save(null, {
          success: function(gameScore) {
            // Execute any logic that should take place after the object is saved.
            alert('New object created with objectId: ' + absense.id);
          },
          error: function(gameScore, error) {
            // Execute any logic that should take place if the save fails.
            // error is a Parse.Error with an error code and message.
            alert('Failed to create new object, with error code: ' + error.message);
          }

    });
    }



  </script>
</body>
</html>


数据插入测试






保存数据
函数saveData（）{
//使用参数（appId、javascript键）初始化要解析的连接
3月日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日#####################；
Parse.serverURL=https://parseapi.back4app.com/'
var缺席=Parse.Object.extend（“缺席”）；
var缺勤=新缺勤（）；
var name=document.getElementById（'teacherName'）。值
var description=document.getElementById（'workDescription'）。值
var link=document.getElementById（'linkLocation'）。值
缺席。集合（“姓名”，姓名）；
缺席。集合（“工作”，描述）；
缺席。设置（“链接”，链接）；
缺席。保存（空{
成功：功能（游戏分数）{
//执行保存对象后应执行的任何逻辑。
警报（'使用objectId:'+absense.id创建的新对象'）；
},
错误：函数（游戏分数，错误）{
//执行保存失败时应执行的任何逻辑。
//错误是一个解析。错误包含错误代码和消息。
警报（'创建新对象失败，错误代码：'+错误消息）；
}
});
}

在这方面您可能是新手，但您在解决问题和代码方面做得很好+1。我可能弄错了，但看起来您在第二个示例中只指定了按钮“type”。在第一个示例中，您可以尝试设置“type=button”吗？如果您的浏览器假定提交为默认值，这可能是根本原因。我注意到一件事-

Parse.initialize

可能只需要运行一次，目前您正在每次提交时进行初始化。我只是想澄清一下——在你加载页面后，输入数据并点击提交，它不会按预期提交吗？你必须先空白提交吗？啊，似乎正是这样（没有设置

type=“button”

）！我知道这可能是件小事——非常感谢！您说的

Parse.initialize

也对，不需要运行两次-我已经修改了代码。