如何使用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. 在前端使用验证脚本，它会减少后端验证，您必须担心在提交后重新报告。您无法摆脱后端验证，但使用前端验证工具可以快速有效地警告用户潜在的问题，而无需提交“成本”。我非常喜欢inline validator script。
3. 如果您通过Ajax调用而不仅仅是帖子发布数据，则可以使用成功回调来处理验证，成功模式窗口等问题。
4. 当我必须做一个后端验证警报时，我通常只在表单顶部创建一个公共警报div，并通过Ajax调用的success元素（通常发送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中将其称为$("#title")

并且在你的jquery中，它会尝试在页面加载时提交，因为你正在调用它

 jQuery(document).ready(function(){

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

希望它能运作

Answer 3

奇怪的不是它，你已经很好地为表格中的所有其他项目设置了ID，除了你的下拉菜单，你只设置名称。

表单使用name提交控件的值，但是您使用id（'＃'）引用jquery代码中的值。

因此，只需尝试将下拉声明更改为具有ID ...就像这样：

<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" 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>