如何使两个phpmailer联系人表单在同一页面上工作

Question

使用此处的代码https://www.codingsnow.com/2021/01/create-php-send-email-contact-form.html

<h4 class="sent-notification"></h4>
<form id="myForm">
<h2>Send an Email</h2>
<label>Name</label>
<input id="name" type="text" placeholder="Enter Name">
<br><br>
<label>Email</label>
<input id="email" type="text" placeholder="Enter Email">
<br><br>
<label>Subject</label>
<input id="subject" type="text" placeholder=" Enter Subject">
<br><br>
<p>Message</p>
<textarea id="body" rows="5" placeholder="Type Message"></textarea><!--textarea tag should be closed (In this coding UI textarea close tag cannot be used)-->
<br><br>
<button type="button" onclick="sendEmail()" value="Send An Email">Submit</button>
</form>

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function sendEmail() {
var name = $("#name");
var email = $("#email");
var subject = $("#subject");
var body = $("#body");
if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(body)) {
$.ajax({
url: 'sendEmail.php',
method: 'POST',
dataType: 'json',
data: {
name: name.val(),
email: email.val(),
subject: subject.val(),
body: body.val()
}, success: function (response) {
$('#myForm')[0].reset();
$('.sent-notification').text("Message Sent Successfully.");
}
});
}
}
function isNotEmpty(caller) {
if (caller.val() == "") {
caller.css('border', '1px solid red');
return false;
} else
caller.css('border', '');
return true;
}
</script>

我需要在这两个文件中更改什么才能工作现在，当我把两张联系表格放在一页上时，尽管它们各自都在工作，但它们都在工作。。我尝试过更改变量名和函数名，但无法找出错误。在网络选项卡中，它说"；失败了，出了问题">

Answer 1

我将用一个例子来解释它。假设你有一个函数可以把两个数字加起来：

function add() {
return 3 + 5;
}

如果你需要添加一组不同的数字，这个函数是无用的。然而，如果您将变量信息作为函数参数传递，那么您就有了一个多用途函数：

function add(a, b) {
return a + b;
}

关于在HTML中分配ID，它增加了更多的负担而不是好处。比较这两个片段，找出哪一个更容易使用和扩展：

jQuery(function ($) {
$("#input1, #input2, #input3").each(function (index, input) {
console.log(input.value);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input id="input1" value="One">
<input id="input2" value="Two">
<input id="input3" value="Three">
</form>

jQuery(function ($) {
$("input").each(function (index, input) {
console.log(input.value);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input value="One">
<input value="Two">
<input value="Three">
</form>

这只是一个例子来说明这一点。处理表单元素的常用方法是为其指定一个名称，而不是ID。