使用Ajax调用中创建的表单时提交取消错误

时间:2018-12-16 07:28:58

标签: javascript php jquery ajax

我对javascript等一无所知,并且我试图创建一些选项卡,当单击选项卡按钮时,这些选项卡将从mysql加载动态数据行的列表。我已经设置好了,因此每次点击都会加载新的数据。无论如何,经过大量阅读后,我终于能够正常工作,直到我尝试向每行添加一个按钮以删除行并删除mysql中的记录。
问题是我可以直观地删除行,但是当表单尝试调用php脚本删除记录时出现此错误:

npm install -g ionic@latest

我正在使用ajax调用一个php脚本,该脚本查询数据库并构建行,并添加要加载到选项卡中的表单/按钮等。基本上就是这样。

Form submission canceled because the form is not connected

这是一些基本的html,用于加载get_data.php中的内容。

<?php
//get_data.php

if (isset($_POST['button'])){
$postval = $_POST['button'];
if ($postval == 'def_tab'){

//I run the mysql query here.

$cnt = 0;

// mysql array
foreach($row as $item){

//I build the elements etc here as well as data for the list

echo '<li class="list-items">
//Using this form as a removal button

<form name="rem" action="remove.php" method="post" data-target="rem' . $cnt . '" id="forms">
<input name="name" type="hidden" value="'.$item['value'].'">
<input type="submit"  class="remove" value=""></form>';
</li>
$cnt++
}

}

这是我正在使用的jquery代码。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="tab">
<button class="tabs" onclick="openTab(event, 'tab1')" id="def_tab">Tab 1</button>
<button class="tabs" onclick="openTab(event, 'tab2')" id="tab2">Tab 2</button>
</div>
<div id="tab1" class="tabcontent">
<ul class="container"></ul></div>
</body>

我认为问题是由动态加载ajax调用中的表单引起的,我不确定该怎么办。我一直在阅读有关通过使用诸如<script> // This removes the row properly but gives the form submission error $('body').on('click', 'form[data-target]', function(event){ $(this).closest('.list-items').remove(); }); </script> <script> //Loads the default tab on page load, //calls the php script and adds the rows //from the ajax response to the container ul class. $(document).ready(function() { updatePage("def_tab"); $("#def_tab, #tab2").click(function(e) { e.preventDefault(); var btnVal = this.id; updatePage(btnVal); }); }); function updatePage(btnVal){ $.ajax({ type:'post', url:"get_data.php", type: "POST", data: {'button': btnVal}, cache: false, async: true, success:function(data){ $('.container').html(""); $(".container").append(data); }}); } </script> <script> //Some code for the tabs function openTab(evt, tabName) { var i, tabcontent, tabs; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tabs = document.getElementsByClassName("tabs"); for (i = 0; i < tabs.length; i++) { tabs[i].className = tabs[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } </script> 之类的代码将表单附加到正文的信息,但我一直无法弄清楚是否可行。
我不希望它长一英里,所以我尝试发布最相关的部分,以便希望有人能理解我正在尝试做的事情以及如何修复它。我只希望能够从视觉上删除行,以及运行一个简单的删除脚本以从数据库中删除行。谢谢

1 个答案:

答案 0 :(得分:0)

我注意到您键入了两次键入:“ post”,第一次键入小写,第二次键入大写:“ POST”。