Ajax 干扰其他页面元素

Question

我做了一个小表单，它是使用 ajax 提交给自己的，让一切都以形式形式工作。然而，当我输入我的 ajax post 代码时，我的其他 javascript 函数已停止工作（错误：____ 未定义），并且我的单选按钮应该是排他性的（选择一个取消选择另一个）也停止工作（因为添加了 ajax 代码）

这是我的代码：

https://jsfiddle.net/dmge51g8/

当 ajax 代码被取出时，这段代码工作正常，但在我的浏览器控制台中出现 ajax 帖子错误。

function newOrExisting() {
    if (document.getElementById('typeNew').checked) {
        document.getElementById('newProviderInput').style.display = 'block';
        document.getElementById('existingProviderInput').style.display = 'none';
    } else if (document.getElementById('typeExisting').checked) {
        document.getElementById('existingProviderInput').style.display = 'block';
        document.getElementById('newProviderInput').style.display = 'none';
    }
};
function clearForm() {
    document.getElementById("createPanelForm").reset();
};

更新

：删除了关于单选按钮的部分（更新了JSFiddle）

Answer 1

您可以避免将 newOrExisting 函数定义为变量，而是将其直接分配给单选按钮上的单击事件，如下所示：

$(".radio input").click(function() {
  if (document.getElementById('typeNew').checked) {
    document.getElementById('newProviderInput').style.display = 'block';
    document.getElementById('existingProviderInput').style.display = 'none';
  } else if (document.getElementById('typeExisting').checked) {
    document.getElementById('existingProviderInput').style.display = 'block';
    document.getElementById('newProviderInput').style.display = 'none';
  }
};

这将更符合您将 ajax 功能附加到窗体的方式。

Answer 2

在代码的 HTML 部分中，单选按钮的名称不同。

name="typeExisting"
name="typeNew" 

这允许分别处理两个不同的单选按钮（并且您可以选择两个）