如何使用 jquery 将下拉值发布到另一个 php 表单

Question

谢谢您的时间，我花了一天的大部分时间在谷歌上搜索我能想到的各种方式，但我找不到一个明确简单的答案。我已经尝试了我能想到的一切，并在这里找到了很好的答案。我当然希望有人能帮助我。我已经在该网站上完成了大部分关于 jquery 的研究，但无济于事，我仍在寻找答案。我也在这里找到了一些帮助完整的文章，我只是不能完全理解或忽略了一些简单的事实。我对这一切绝对是新手，所以让我们轻松一点！首先，我获取用户表单数据并使用 php 脚本进行验证，该脚本有望与数据库通信并存储表单信息。

所以这里是表单的核心内容：

    <form method="post" action="test.php" name="contactform" id="contactform">
    <div class="grid_6" id="register">
    <center><h4>Required Information</h4></center>
    <p>
      <label for="name">Name:</label>
      <input name="name" id="name" type="text" />
    </p>
    <p>
      <label for="email">Your Email:</label>
      <input name="email" id="email" type="text" />
    </p>
    <p>
    <label for="trew">Contact Phone:</label>
    <input name="txtAreaCode" id="txtAreaCode" style="width: 30px;" maxlength="3" value=""type="text">
    <span style="color: rgb(255, 200, 46);">&nbsp;-&nbsp;</span>
    <input name="txtPrefix" id="txtPrefix" style="width: 30px;" maxlength="3" value=""type="text">
    <span style="color: rgb(255, 200, 46);">&nbsp;-&nbsp;</span>
    <input name="txtPhone" id="txtPhone" style="width: 45px;" maxlength="4" value=""type="text">
    <span style="color: rgb(255, 200, 46);">&nbsp;-&nbsp;</span>
    <input name="txtPhoneExt" id="txtPhoneExt" style="width: 35px;" maxlength="10" value=""type="text">
    ext.
    </p>
    <p>
      <label for="zip">Zip Code:</label>
      <input name="zip" id="zip" type="text" />
    </p>
    <p>
      <label for="school">Name of School:</label>
      <input name="school" id="school" type="text" />
    </p>
    <p>
      <label for="title">Affiliation</label>
      <select name="title">
      <option selected="NULL">Please Select</option>
      <option value="student">Student</option>
      <option value="parent">Parent</option>
      <option value="teacher">Teacher</option>
      <option value="booster">Booster</option>
      <option value="clubpres">Club President</option>
      <option value="principal">Principal</option>
      <option value="ptsa">PTSA</option>
      </select>
    </p>
    </div>
    <div class="grid_6" id="contactinfo">
    <center><h4>Additional Information</h4></center>
    <p>
      <label for="color">School Colors:</label>
      <input name="color" id="color" type="text" />
    </p>
    <p>
      <label for="mascot">Mascot:</label>
      <input name="mascot" id="mascot" type="text" />
    </p>
    <p>
      <label for="tagline">Tagline/Motto:</label>
      <input name="tagline" id="tagline" type="text" />
    </p>
    <p>
      <label for="sbsize">Approximate Student Body Size:</label>
      <input name="sbsize" id="sbsize" type="text" />
    </p>
    <p>
      <label for="level">Interest Level:</label>
      <select name="level">
      <option value="1">Interested</option>
      <option value="2">Slightly Interested</option>
      <option value="3">Moderately Interested</option>
      <option value="4">Highly Interested</option>
      <option value="5">Extremely Interested</option>
      </select>
    </p>
    <p>
      <label for="verify">1 + 3 =</label>
      <input name="verify" id="verify" class="small" type="text" />
    </p>
    <button class="fr" type="submit" id="submit">Send</button>
  </form>
  </div>

我采用这个表单并用 jquery 使它变得漂亮，现在这是我一生中最头痛的地方，我花了一个小时从头开始重写，认为我有语法错误或其他什么。来找出这个小宝石的问题所在，这很好，我们都会犯错误。这是jquery表单文件，这不是我的项目，我什至不确定是否需要它，但这是我的问题的根源，我已经把它们全部弄清楚了，除了1（希望如此！）。

  jQuery(document).ready(function(){

$('#contactform').submit(function(){

    var action = $(this).attr('action');

    $("#message").slideUp(750,function() {
    $('#message').hide();

    $('#submit')
        .after('<img src="./img/form/ajax-loader.gif" class="loader" />')
        .attr('disabled','disabled');

    $.post(action, { 
        name: $('#name').val(),
        email: $('#email').val(),
        txtAreaCode: $('#txtAreaCode').val(),
        txtPrefix: $('#txtPrefix').val(),
        txtPhone: $('#txtPhone').val(),
        txtPhoneExt: $('#txtPhoneExt').val(),
        zip: $('#zip').val(),
        school: $('#school').val(),
        title: singleValues = $("#title").val(),
        color: $('#color').val(),
        mascot: $('#mascot').val(),
        tagline: $('#tagline').val(),
        sbsize: $('#sbsize').val(),
        level: $('#level').val(),
        verify: $('#verify').val()
    },
        function(data){
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
            $('#contactform #submit').attr('disabled',''); 
            if(data.match('success') != null) $('#contactform').slideUp('slow');

        }
    );

    });

    return false; 

});

    });

好吧，现在这就是我看到问题的地方，我试图获取多项选择的值，以将其发布到我的 php 文件中执行验证的最后一段代码，我已经去掉了调试的绒毛。但我确信我已经提供了足够的解决方案。所以这是 php...

  <?php
if(trim($_POST['name']) == '') {
    echo '<div class="error-message">Attention! You must enter your name.</div>';
    exit();
} else {
    $name = trim($_POST['name']);
}

if(trim($_POST['email']) == '') {
    echo '<div class="error-message">Attention! You must enter your email.</div>';
    exit();
} else {
    $email = trim($_POST['email']);
}

if(trim($_POST['txtAreaCode']) == '') {
    echo '<div class="error-message">Attention! You must enter your txtAreaCode.</div>';
    exit();
} else {
    $txtAreaCode = trim($_POST['txtAreaCode']);
}

if(trim($_POST['txtPrefix']) == '') {
    echo '<div class="error-message">Attention! You must enter your txtPrefix.</div>';
    exit();
} else {
    $txtPrefix = trim($_POST['txtPrefix']);
}
    if(trim($_POST['txtPhone']) == '') {
    echo '<div class="error-message">Attention! You must enter your txtPhone.</div>';
    exit();
} else {
    $txtPhone = trim($_POST['txtPhone']);
}

if(trim($_POST['zip']) == '') {
    echo '<div class="error-message">Attention! You must enter your zip.</div>';
    exit();
} else {
    $zip = trim($_POST['zip']);
}

if(trim($_POST['school']) == '') {
    echo '<div class="error-message">Attention! You must enter your school.</div>';
    exit();
} else {
    $school = trim($_POST['school']);
}


if(trim($_POST['title']) != 'NULL') {
    echo '<div class="error-message">Attention! You must enter your title.</div>';
    exit();
} else {
    $title = trim($_POST['title']);
}


if(trim($_POST['verify']) == '') {
        echo '<div class="error-message">Attention! Please enter the verification number.</div>';
        exit();
    } else if(trim($_POST['verify']) != '4') {
        echo '<div class="error-message">Attention! The verification number you entered is incorrect.</div>';
        exit();
    }   
        echo 'working';     

?>

现在我确信有很多解决方法，我想知道我需要做什么才能让这一切正常工作。我不能放弃 jQuery，因为它是该项目的必需品，我确信它应该是一个简单的修复。一如既往地祈祷我的过分，我只是觉得我应该让你们看看我的问题是什么。我注意到，如果我根本不使用第二段代码，它会产生奇迹，但就像我说的，我需要使用它......

从我收集的信息来看，我显然在 .post 操作部分做了一些错误的事情，因为它没有发布下拉列表的值。

Answer 1

我为公司的申请制作了很多此类表格，您肯定可以采取一些捷径。

1. 序列化数据而不是使用纯 ID。这样，您就不必引用每个 id 来提交表单。
2. 在前端使用验证脚本，它会减少后端验证，您必须担心提交后的报告。您无法摆脱后端验证，但使用前端验证工具可以让您快速有效地警告用户潜在的问题，而无需提交“成本”。我真的很喜欢 内联验证器脚本。
3. 如果您通过 Ajax 调用而不仅仅是发布数据来发布数据，则可以使用成功回调来处理验证、成功模式窗口等问题。
4. 当我必须执行后端验证警报时，我通常只是在表单顶部制作一个公共警报 div，并通过 Ajax 调用的成功元素（通常发送 JSON）向该警报返回报告。请记住，Ajax 上的成功意味着事务发生，您仍然可以从 PHP 报告返回错误，并且必须处理一个错误 案件。通过只执行一个警报框，我节省了大量的工作和语法，因为大多数错误都在前端处理，而后端只是冗余。

因此，以下是我如何在网站上制作表单的示例：

<div id="error" style="display:none"></div>  <!-- error div, hidden -->

<form id="form">
  <input type="text" id="name" name="name" class="validator">  <!-- don't forget names! -->
  <input type="text" id="name" name="name2" class="validator">
  <button id="submit">Send</button>
</form>

<script type="text/javascript">
  $('#submit').click(function() {   // onclick of submit, submit form via ajax
    $.ajax({
      url: "url_to_submit_to.php",  //url to submit to
      timeout: 30000,
      type: "POST",
      data: $('#form).serialize(),  //gets form data, sends via post to processing page
      dataType: 'json',             //what to do with returned data, in this case, it's json
      error: function(XMLHttpRequest, textStatus, errorThrown)  {
         alert("An error has occurred making the request: " + errorThrown)
      },
      success: function(outstuff){
         if (outstuff.success == 1) {       //
             alert('success')
         } else {
             $('#error').html('there is an error, do something');
             //Do other stuff
         }
      }
    });
  });
</script>

Answer 2

是的，您应该将 id 添加到下拉菜单中，否则您无法在 jquery

和您的 jquery 中将其称为 $("#title") ，它会在页面出现时尝试提交当你调用它时加载

 jQuery(document).ready(function(){

尝试将其更改为 $(function(){

希望它能工作

Answer 3

这很奇怪，不是吗，您已经很好地为表单中的所有其他项目设置了 ID，但下拉菜单除外，您只在其中设置了名称。

表单使用名称提交控件的值，但您使用 id ('#') 引用 jquery 代码中的值。

因此，只需尝试更改下拉列表声明以使其具有 ids...，如下所示：

<form method="post" action="test.php" name="contactform" id="contactform">
    <div class="grid_6" id="register">
    <center><h4>Required Information</h4></center>
    <p>
      <label for="name">Name:</label>
      <input name="name" id="name" type="text" />
    </p>
    <p>
      <label for="email">Your Email:</label>
      <input name="email" id="email" type="text" />
    </p>
    <p>
    <label for="trew">Contact Phone:</label>
    <input name="txtAreaCode" id="txtAreaCode" style="width: 30px;" maxlength="3" value=""type="text">
    <span style="color: rgb(255, 200, 46);"> - </span>
    <input name="txtPrefix" id="txtPrefix" style="width: 30px;" maxlength="3" value=""type="text">
    <span style="color: rgb(255, 200, 46);"> - </span>
    <input name="txtPhone" id="txtPhone" style="width: 45px;" maxlength="4" value=""type="text">
    <span style="color: rgb(255, 200, 46);"> - </span>
    <input name="txtPhoneExt" id="txtPhoneExt" style="width: 35px;" maxlength="10" value=""type="text">
    ext.
    </p>
    <p>
      <label for="zip">Zip Code:</label>
      <input name="zip" id="zip" type="text" />
    </p>
    <p>
      <label for="school">Name of School:</label>
      <input name="school" id="school" type="text" />
    </p>
    <p>
      <label for="title">Affiliation</label>
      <select name="title" id="title">
      <option selected="NULL">Please Select</option>
      <option value="student">Student</option>
      <option value="parent">Parent</option>
      <option value="teacher">Teacher</option>
      <option value="booster">Booster</option>
      <option value="clubpres">Club President</option>
      <option value="principal">Principal</option>
      <option value="ptsa">PTSA</option>
      </select>
    </p>
    </div>
    <div class="grid_6" id="contactinfo">
    <center><h4>Additional Information</h4></center>
    <p>
      <label for="color">School Colors:</label>
      <input name="color" id="color" type="text" />
    </p>
    <p>
      <label for="mascot">Mascot:</label>
      <input name="mascot" id="mascot" type="text" />
    </p>
    <p>
      <label for="tagline">Tagline/Motto:</label>
      <input name="tagline" id="tagline" type="text" />
    </p>
    <p>
      <label for="sbsize">Approximate Student Body Size:</label>
      <input name="sbsize" id="sbsize" type="text" />
    </p>
    <p>
      <label for="level">Interest Level:</label>
      <select name="level" id="level">
      <option value="1">Interested</option>
      <option value="2">Slightly Interested</option>
      <option value="3">Moderately Interested</option>
      <option value="4">Highly Interested</option>
      <option value="5">Extremely Interested</option>
      </select>
    </p>
    <p>
      <label for="verify">1 + 3 =</label>
      <input name="verify" id="verify" class="small" type="text" />
    </p>
    <button class="fr" type="submit" id="submit">Send</button>
  </form>
  </div>