将变量从 Php 下拉列表传递到 Ajax答案

【问题标题】：Passing a variable from Php dropdown list to Ajax将变量从 Php 下拉列表传递到 Ajax
【发布时间】：2019-05-16 21:03:18
【问题描述】：

我有一个表单 (id="my_form_id")，在表单内我使用 PHP 填充下拉列表和来自 Mysql 的查询，这个 mysql 查询选择名为 grupo 的列并填充下拉列表，mysql使用 Java 脚本函数“showname”将名为 nombretrupo 的表字段放入并更新 (onchange) 到名为 nombrerupo 的“输入文本”中。我有一个文本（名为“nombregrupon”）用于输入和更改字段 nombregrupo。我想将从下拉列表（字段 grupo）中选择并输入文本（名为“nombregrupon”）的信息发送到 ajax jquery 函数，这个 ajax 函数调用一个 php 文件（postdata.php）来处理返回的数据到 ajax。

我可以将文本中输入的信息（名为“nombregrupon”）传递给 ajax 函数，但我不能将下拉列表 (grupo) 中的信息传递给 ajax 函数，这是整个代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

</script>

//Java script function for updating input text nombregrupo
<script language="JavaScript">
function showname(what)
{
  what.form.nombregrupo.value=what.options[what.selectedIndex].title
}

window.onload=function() {
  showname(document.form1.grupo)
}
</script>


//Ajax Jquery for send data variables grupo and nombregrupon to php
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#my_form_id').on('submit', function(e){
                    //Stop the form from submitting itself to the server.
                    e.preventDefault();
                    var nombregrupon = $('#nombregrupon').val();
          var grupo= $('#grupo').val();
                    $.ajax({
                        type: "POST",
                        url: 'postdata.php',
            data: { grupo: grupo, nombregrupon: nombregrupon },
                        success: function(data){
                            //Send Alert
                            alert(data);
                            //Show data returne from php postdata file
                            $('#result').html(data);
                        }
                    });
                });
            });
        </script>



</head>

<body>
<form id="my_form_id" name="form1">
<?php

$con = mysql_connect("localhost","root","mysq1passw0rd");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("llamadas", $con);

//PHPMysql Query for fill dropdown list
$query1 = "SELECT * FROM grupostroncales ".
"WHERE grupo!='$grupox' ORDER BY grupo";
$result1 = mysql_query($query1) or die(mysql_error());

//On change call java script funtion for update Input text nombregrupo
echo "<select name=\"grupo\" onchange=\"showname(this)\">";

while($row1=mysql_fetch_array($result1)){
echo "<option value=\"$row1[grupo]\" title=\"$row1[nombregrupo]\">$row1[grupo]</option>";

}

echo "</select>";// Closing of list box 
?>
//Input Text for showing group Name
<input name="nombregrupo" type="text" id="nombregrupo"/>
//Input Text for entering new group Name
<input name="nombregrupon" type="text" id="nombregrupon" />  
<input name="submit" type="submit" id="submit" value="Acept" />
<div id="result"></div>
</form>

</body>
</html>

【问题讨论】：

没有 PHP 下拉列表之类的东西。有一个 HTML 下拉列表（通常是一个选择元素）。它可能看起来像示意图，但是当 JS 运行时，PHP 已经完成了它需要做的事情并将页面源代码发送到客户端。所以问题是如何获取选择元素的值并在 Ajax 中使用它
在这种情况下$('select[name="grupo"]').val() 所以你需要将data: { grupo : $('select[name="grupo"]').val() } 添加到AJAX 调用中。或者您可以序列化整个表单。 data: $('#my_form_id').serialize()
至于为什么它现在不起作用是这个id var grupo=$('#grupo').val() 在选择元素echo "<select name=\"grupo\" onchange=\"showname(this)\">"; 上不存在

标签： php ajax

【解决方案1】：

你有几个选择：

您可以将 id 添加到选择元素，因为您忘记了

var grupo=$('#grupo').val()
echo "<select name=\"grupo\" onchange=\"showname(this)\">"; <-- no id
//----------------
echo "<select id=\"grupo\" name=\"grupo\" onchange=\"showname(this)\">";

或者你可以使用名字

var grupo=$('select[name="grupo"]').val()

或者你可以序列化整个表单

$.ajax({
 data : $('#my_form_id').serialize(),
 ...
});

我个人只会序列化表单

【讨论】：

【解决方案2】：

再次感谢，我修改了代码 addind "select id" 并且成功了。

拜托，现在我正在尝试使用序列化传递整个表单变量，但我不工作，这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

//Fir
</script>
<script language="JavaScript">
function showname(what)
{
  what.form.nombregrupo.value=what.options[what.selectedIndex].title
}

window.onload=function() {
  showname(document.form1.grupo)
}
</script>

 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(document).ready(function(){
              var Formvar = $('#my_form_id');
              $("#submit").click(function(){
                     $.ajax({
                        type: "POST",
                        url:Formvar.attr("action"),
                        //url: 'ActualizarGrupoTroncalb.php',
                        data:Formvar.serialize(),
                        success: function(data){
                            //Send Alert
                            alert(data);
                            //Show data from mysql query
                            $('#result').html(data);
                        }
                    });
                });
            });
        </script>



</head>

<body>
<form action="ActualizarGrupoTroncalb.php" id="my_form_id" name="form1">
<?php

$con = mysql_connect("localhost","root","mysq1passw0rd");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("llamadas", $con);

//Hago query1 selecciono el Departamento a buscar
$query1 = "SELECT * FROM grupostroncales ".
"WHERE grupo!='$grupox' ORDER BY grupo";
$result1 = mysql_query($query1) or die(mysql_error());

echo "<select id=\"grupo\" name=\"grupo\" onchange=\"showname(this)\">";

while($row1=mysql_fetch_array($result1)){//Array or records stored in $nt
echo "<option value=\"$row1[grupo]\" title=\"$row1[nombregrupo]\">$row1[grupo]</option>";

}

echo "</select>";// Closing of list box 
?>
<input name="nombregrupo" type="text" id="nombregrupo"/>
<input name="nombregrupon" type="text" id="nombregrupon" />  
<input name="submit" type="submit" id="submit" value="Acept" />
<div id="result"></div>
</form>

</body>
</html>

【讨论】：

【解决方案3】：

@lexer，关于你的第二个问题，你可能想试试.serializeArray() 而不是serialize()。

.serialize() 返回格式类似于查询字符串的值字符串，这可能不是您所期望的。

仅供参考 - 我本来可以对帖子发表评论，但我还不能发表评论。

【讨论】：

【解决方案4】：

我更改了代码并将变量序列化为 php 文件：ActualizarGrupoTroncalb.php 并收到了 php 文件，因为我可以使用变量进行 mysql 查询，但从 php 到 ajax 的返回数据未显示在：<div id="resp"></div>

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}


</script>
<script language="JavaScript">
function showname(what)
{
  what.form.nombregrupo.value=what.options[what.selectedIndex].title
}

window.onload=function() {
  showname(document.form1.grupo)
}
</script>

   <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
    $(document).on('ready',function(){

      $('#submit').click(function(){
        var url = "ActualizarGrupoTroncalb.php";                                     

        $.ajax({                        
           type: "POST",                 
           url: url,                    
           data: $("#formulario").serialize(),
           success: function(data)            
           {
             $('#resp').html(data);           
           }
         });
      });
    });
    </script>



</head>

<body>
<form method="post" id="formulario">
<?php

$con = mysql_connect("localhost","root","mysq1passw0rd");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("llamadas", $con);

//Hago query1 selecciono el Departamento a buscar
$query1 = "SELECT * FROM grupostroncales ".
"WHERE grupo!='$grupox' ORDER BY grupo";
$result1 = mysql_query($query1) or die(mysql_error());

echo "<select id=\"grupo\" name=\"grupo\" onchange=\"showname(this)\">";

while($row1=mysql_fetch_array($result1)){//Array or records stored in $nt
echo "<option value=\"$row1[grupo]\" title=\"$row1[nombregrupo]\">$row1[grupo]</option>";

}

echo "</select>";// Closing of list box 
?>
<input name="nombregrupo" type="text" id="nombregrupo"/>
<input name="nombregrupon" type="text" id="nombregrupon" />  
<input name="submit" type="submit" id="submit" value="Acept" />
</form>
<div id="resp"></div>
</body>
</html>

【讨论】：