按钮 Onclick 功能未将记录保存到数据库答案

【问题标题】：Button Onclick function is not saving record to database按钮 Onclick 功能未将记录保存到数据库
【发布时间】：2017-12-27 11:31:06
【问题描述】：

尊敬的朋友，
我对 ONCLICK 按钮问题有疑问。我已经编写了将表单保存到数据库的代码。

图中有2个按钮：

保存按钮（type="submit"）
保存并新建按钮（type="button"）

保存一个非常好。使用“提交类型”将记录保存在数据库中。
但是当涉及到 save & new 时，它不会将记录保存到数据库中。

谁能告诉我这会是什么问题。

请在下面找到编码：

 <div class="btn-lg pull-right">
    <tr>                                    
<td><input type="button" class="primarybtn" value="Save" name="save" onclick="SaveEntity();"/></td>                                 
<td><input type="button" class="newwhitebtn" value="Save and New" name="saveAndNew" onclick="SaveEntity();"/></input> </td>
<td><input type="button" class="cancelbtn" value="Cancel"></td>
                                </tr>
                            </div>

脚本代码：

     <script type="text/javascript">
  function SaveEntity() {   
    alert("Check Save");
      //    get the form values      
        $.ajax({
            url :"/leadstatus_creation",
            type : "POST",      
            contentType: "application/json",
            data : $('#frmCreateEntity').serialize(),
            success : function(data) { 
            if(data != null && data !='')
                {               
                    $('#txtleadname').val(data); 
                }               
            },   
            error : function(XMLHttpRequest, textStatus, errorThrown) { 
                alert(textStatus);
                alert("Lead Name Status:"+$('#txtleadname').val());
            } 
        });
    }
  </script>

请任何人帮助我解决这个问题。

回答：

我们可以使用标签来代替标签，但它确实有效。

    <td><button class="primarybtn" name="save" onclick="SaveEntity();"/>Save</button></td>
    <td><button class="newwhitebtn"  name="saveandnew" onclick="SaveEntity();"/>Save and New</button></td>
    <td><button class="cancelbtn"/>Cancel</button></td>

感谢大家的支持。 . :-)

【问题讨论】：

为什么你使用两种不同的类型？尝试为第二个按钮（type =“submit”）制作按钮，它会起作用。
没有兄弟！它的功能有很大的不同。保存-单击它-进入视图。保存并新建按钮将转到新表单。还有一个按钮（跳过）为此我需要使用 Type="button"。如果有解决方案，请告诉我。
做第二个 JS 函数，光靠这个是做不到的
但是这个 JS 函数如何为 type="submit" 而不是 Onclick 工作？第二个Js函数会怎么样？什么样的代码会满足兄弟？

标签： javascript jquery ajax spring jsp

【解决方案1】：

第二个

<td><input type="button" class="newwhitebtn" id="frmCreateEntity" value="Save and New" name="saveAndNew" onclick="SaveEntity();"/></input> </td>

在此您也提供了与第一个相同的 frmCreateEntity 的 id，这就是为什么当函数被调用时

            data : $('#frmCreateEntity').serialize(),

上面的代码解析了 DOM 中的 id，当匹配的时候得到这个的内容

<td><input type="submit" class="primarybtn" value="Save" id="frmCreateEntity" name="save" onclick="SaveEntity();"/></td> 这就是它不保存的原因，由于文档解析器不知道您使用与 frmCreateEntity 相同的 id 定义了多少元素，并且当它在第一个元素中找到相同的 id 时停止搜索ID frmCreateEntity。尝试在两个输入元素中使用不同的 id 来实现，一定会成功的，

我还为您的说明添加了一个解决方法，并在该函数中获取数据以将其保存到您的数据库中。 检查此代码并在此处运行，

<!DOCTYPE html>
<html>
  <head>
    <title>Sample styled page</title>
  </head>
  <body>
    <div class="btn-lg pull-right">
       <td id="td_1">
         FIRST
         <input type="button" class="primarybtn" value="Save" name="save" id="id_1" onclick="SaveEntity(this);"/>
       </td>
       <td id="td_2">
         SECOND
         <input type="button" class="newwhitebtn" value="Save and New" name="saveAndNew" id="id_2" onclick="SaveEntity(this);"/></input>
       </td>
       <!-- <td><input type="button" class="cancelbtn" value="Cancel"></td> -->
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  </body>
  <script type="text/javascript">
function SaveEntity(event) {
 var obj = document.getElementById(event.id).previousSibling;
 obj.trim;
 console.log(obj.wholeText);
    //  $.ajax({
    //      url :"/leadstatus_creation",
    //      type : "POST",
    //      contentType: "application/json",
    //      data : obj,
    //      success : function(data) {
    //      if(data != null && data !='')
    //          {
    //              $('#txtleadname').val(data);
    //          }
    //      },
    //      error : function(XMLHttpRequest, textStatus, errorThrown) {
    //          alert(textStatus);
    //          alert("Lead Name Status:"+$('#txtleadname').val());
    //      }
    //  });
 }
</script>
</html>

现在您可以使用 different id 从两个按钮事件中获取两个值。这里也是输出的截图：

希望对你有帮助，

谢谢

重新编辑：

查看方式：

<td><input type="button" class="newwhitebtn" id="frmCreateEntity" value="Save and New" name="saveAndNew" onclick="SaveEntity(this);"/></input> </td>

【讨论】：

非常感谢肖希尔兄弟。所以我需要用不同的 ID 再次序列化表单？兄弟没有别的办法吗？
兄弟！即使我将 type="submit" 重命名为 type="button" 它也不允许提交表单。
请问你们中的任何一个？ @Dalvinder Singh Luca Kiebel SHOHIL SETHIA
有一种方法，将 this 作为参数与函数 SaveEntity(this) 一起传递，而您在定义中将其接收为 function SaveEntity(event) 获取内容，**var content = this.value; **// 这与获取调用者元素范围内的文本内容。以上应该做的工作！然后你就可以执行任务了！谢谢
这个兄弟我试过了。但那行不通。