Question

我已发布有关单击时没有任何功能的提交按钮的信息。任何人都可以帮助我检查我弄错了什么部分。谢谢。

          <!-- contact form -->
            <div class="col-lg-7 contact-right mt-lg-0 mt-5">

                    <div class="row">
                        <div class="col-lg-6 form-group pr-lg-2">
                            <input id="name" type="text" class="form-control" placeholder="Name" required="">
                        </div>
                        <div class="col-lg-6 form-group pl-lg-2">
                            <input id="email" type="email" class="form-control"  placeholder="Email" required="">
                        </div>
                    </div>
                    <div class="form-group">
                        <input id="phone" type="text" class="form-control"  placeholder="Phone" required="">
                    </div>
                    <div class="form-group">
                        <textarea id="message" class="form-control" placeholder="Message" required=""></textarea>
                    </div>
                    <button type="button" onclick="submit();" class="btn submit-contact-main ml-auto">Submit ok</button>

            </div>
            <!-- contact form -->

script function

        <script>
 function submit() {
   //alert("Hello! I am an alert box!!");
var name = $('#name').val();
var email = $('#email').val();
var phone = $('#phone').val();
var message = $('#message').val();
if (name == '' || email == ''|| phone == ''){
    alert("Please insert Full Name , Email and phone!");
}else{
    $.ajax({
        type: 'POST',
        url: '?f=send_email',
        data: {
            name: name,
            email: email,
            phone: phone,
            message: message
        },
        success: function (data) {
        if(data=='1'){
            alert("Send Successfull. We will reply you soon.");
            location.reload();
            }else{
            alert("Error while processing data, please try again.");
            }
        }
    });
}
   }
</script>

我已使用alert("Hello! I am an alert box!!");测试“提交”按钮，该按钮可以工作，并会弹出消息。但是，直到进行此编码if (name == '' || email == ''|| phone == ''){alert("Please insert Full Name , Email and phone!");}为止，它才起作用，也不会弹出消息。希望任何人都能帮助我找到问题所在。谢谢。

Answer 1

语法没有问题。仔细检查您的返回值是否返回“ 1”。元素中的值很好地提交到同一页面。

该错误必须在您的sendEmail函数中。

Answer 2

只需在Codepen中尝试您的代码，并得到您要说明的确切问题。但是在我在实际脚本之前添加了jQuery import之后，它工作起来就很好了。

请记住，将jQuery库包含在代码中的某个位置，可以像这样从CDN加载它：

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

只需在脚本之前的任何位置包含它，它就可以开始工作。

Answer 3

可能您的姓名/电子邮件/电话的值为'null'或'undefined'；要检查值，您可以编写如下内容：

import os

sourceDirectory = '.'

all_files = os.listdir(sourceDirectory)
all_files = [os.fsdecode(file) for file in all_files]
#all_files = map(os.fsdecode, all_files)
all_files = [file for file in all_files if file.lower().endswith((".jpg",".png"))]

#if len(all_files) == 0:
if not all_files:
    raise(Exception("No Files"))

然后在开发者控制台中检查值（可能是F12）

Answer 4

尝试以下代码。我希望它对您和其他人都有益

<button type="button" onclick="my_button_click_handler">Click this button</button>
<script>
function my_button_click_handler()
{
alert('Button Clcked');
}
</script>

在您的情况下，onclick="submit();"，但是您尝试了此onclick="submit"

Answer 5

在脚本标签上方添加此脚本标签

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous">
</script>

包含jquery

Answer 6

function submit() {
  //alert("Hello! I am an alert box!!");
  var name = $('#name').val();
  var email = $('#email').val();
  var phone = $('#phone').val();
  var message = $('#message').val();
  if (name == '' || email == '' || phone == '') {
    alert("Please insert Full Name , Email and phone!");
  } else {
    $.ajax({
      type: 'POST',
      url: '?f=send_email',
      data: {
        name: name,
        email: email,
        phone: phone,
        message: message
      },
      success: function(data) {
        if (data == '1') {
          alert("Send Successfull. We will reply you soon.");
          location.reload();
        } else {
          alert("Error while processing data, please try again.");
        }
      }
    });
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>

<div class="col-lg-7 contact-right mt-lg-0 mt-5">
  <div class="row">
    <div class="col-lg-6 form-group pr-lg-2">
      <input id="name" type="text" class="form-control" placeholder="Name" required="">
    </div>
    <div class="col-lg-6 form-group pl-lg-2">
      <input id="email" type="email" class="form-control" placeholder="Email" required="">
    </div>
  </div>
  <div class="form-group">
    <input id="phone" type="text" class="form-control" placeholder="Phone" required="">
  </div>
  <div class="form-group">
    <textarea id="message" class="form-control" placeholder="Message" required=""></textarea>
  </div>
  <button type="button" onclick="submit();" class="btn submit-contact-main ml-auto">Submit ok</button>
</div>

点击提交按钮后无功能

6 个答案: