Question

我是HTML，PHP和JavaScript的新手，所以请期待错误。我已经在PHP文件中使用了该表格并通过电子邮件发送了内容。这样可行。我正在使用Iframe来使人们停留在页面上，这似乎按预期工作。

提交表格后，我正在尝试获取引导提醒。因此，默认情况下它已折叠，我只是希望它在提交表单或按下按钮后出现。我无法弄清楚我的一生。表单将按预期提交，但脚本似乎未与警报一起运行。

该脚本位于HTML文档中

<script>
   function FormSubmit(){
       alert("The form was submitted");
       $('#AlertSuccess'.show('fade');
   }
</script>
<div id="AlertSuccess" class="alert alert-success collapse">
   <!--<a id="CloseAlert" href="#" class="close">&times;</a> -->
   <strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
   <iframe name="keepitneat" style="display:none;">
   </iframe>
   <form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
      <input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
      <input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
      <input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
      <input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
      <button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200"  value="Submit">send</button>
   </form>
</div>

请让我感到愚蠢，并指出错别字或逻辑错误，因为我已经坚持了一段时间。

Answer 1

浏览器控制台（F12）应该告诉您javascript中的语法错误。您忘记了)中的$('#AlertSuccess'.show('fade');结尾。

$('#AlertSuccess').show('fade');

Answer 2

默认情况下，您必须隐藏#AlertSuccess并在提交表单时，调用show()以显示消息。

您已经忘记关闭$('#AlertSuccess'.show('fade');中的括号。应该是

$('#AlertSuccess').show('fade');

function FormSubmit(){
  $('#AlertSuccess').show('fade');
}

.hidden{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="AlertSuccess" class="alert alert-success collapse hidden">
   <!--<a id="CloseAlert" href="#" class="close">&times;</a> -->
         <strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
  <iframe name="keepitneat" style="display:none;"></iframe>
  <form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
      <input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
      <input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
       <input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
        <input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
        <button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200"  value="Submit">send</button>
  </form>
</div>

无法在表单提交或单击按钮时运行脚本

2 个答案: