事件.preventDefault阻止php脚本提交正确的值


Event.preventDefault stops php script from submitting correct values

这似乎是一个相当简单的过程,但我似乎不能正确解决这个问题。

基本上只要event.preventDefault();不活跃。如果preventdefault是代码的一部分,php仍然提交给服务器,但条目都是空的。是什么导致了这种情况的发生?Console.log(formData)仍然显示正确的值,即使preventDefault是活动的。

index . html

  <form id="submit-signup" method="post" action="scripts/form_submit.php">
    <input type="text" name="name" type="text" placeholder="Name" required>
    <input type="email" name="email" type="text" placeholder="Email" required>
    <input type="text" name="phone" type="text" placeholder="Phone Number" required>
    <input class="button-primary" type="submit" value="Sign Up">
  </form>

main.js

window.onload = function(){
  // Form submit
  $('form#submit-signup').submit(function (event) {
    var formData = {
        'name' : $('input[name=name]').val().trim(),
        'email': $('input[name=email]').val().trim(),
        'phone': $('input[name=phone]').val().trim()
    };
    if(formData.name == '' || validateName(formData.name)){
        validationMssg('Please enter a name with only letters');
    } else if (formData.email == '' || !validateEmail(formData.email)){
        validationMssg('Please enter an email address with a correct format: example@email.com');
    } else if (formData.phone == '' || !validatePhone(formData.phone)){
        validationMssg('Please enter a phone number with only digets');
    } else {
        // Clear error mssg
        clearValidationMssg();
        //if no issues attempt to push code
        submitData(formData);
        $('.thanks').show();
        $('form#submit-signup').hide();
        $('.signup-title').hide();
    }
    event.preventDefault();
  });
};

function submitData(formData){
    console.log(formData);
    $.ajax({
        type: 'POST',
        url: 'scripts/form_submit.php',
        data: formData,
        contentType: "application/json; charset=utf-8",
        dataType: 'json'
    });
}

form_submit.php

<?php
  $dbhost = '#####';
  $dbuser = '#####';
  $dbpass = '#####';
  $conn = mysql_connect($dbhost, $dbuser, $dbpass);
  if(!$conn )
  {
     die('Could not connect: ' . mysql_error());
  }
  $name = $_POST['name'];
  $email = $_POST['email'];
  $phone = $_POST['phone'];
  $sql = "INSERT INTO signup ".
     "(id, name, email, phone, timestamp) ".
     "VALUES (NULL, '$name', '$email', '$phone', CURRENT_TIMESTAMP)";
  mysql_select_db('pfcdb');
  $retval = mysql_query( $sql, $conn );
  mysql_close($conn);
?>
当event.preventDefault()存在时,php脚本提交空字段

e.p preventdefault()不工作的原因是你的ajax没有正确提交请求。

修改submitData函数

    function submitData(formData){
        console.log(formData);
        $.ajax({
            type: 'POST',
            url: 'scripts/form_submit.php',
            data: formData,
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',        
            dataType: 'json',
            success: function(response) {
                //$('.thanks').show();
                $('.thanks').html(reponse);
                $('form#submit-signup').hide();
                $('.signup-title').hide();
            },
            error: function() {
                $('.thanks').html('There was an error');
            }
        });
    }