Question

我有一个html-php代码（SelectUpdateTrunkGroup.php），其中选择了一个关于muysql故事的文件（名为“ grupostroncales”），它具有两个字段“ grupo”和 “ nombregrupo”），然后从此选择中，使用javascript函数带入“ nombregrupo”字段，并将其放在输入文本id = nombregrupo中，我还有另一个输入文字 id = nombregrupon，我可以在其中键入组名的新名称，此变量（“ grupo”和“ nombregrupon”）传递给ajax函数，该函数将它们发送到php es se las paso ajax que llama，ActualizarGrupoTroncalb.php para在mysql上实现 php用于mysql更新，代码正常。

这是我的代码：

<!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 to load and refresh current nombregrup on inputtext "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 function for passing variables from ajax to php and show mysql update--> 
 <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: 'UpdateTrunkGroup.php', //Ir a actualizar nombregrupo
						data: { grupo: grupo, nombregrupon: nombregrupon },
                        success: function(data){
							//Mostrar informacion que viene de consulta php-mysql
                            $('#result').html(data);
                        }
                    });
                });
            });
        </script>



</head>

<body>

<!--Forms with variables fields--> 
<form id="my_form_id" name="form1">
<?php
$grupox="-Todos-";		
$Extf="-Todas-";	
$con = mysql_connect("localhost","root","mysq1passw0rd");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("llamadas", $con);

//Do query
$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)\">";

//Load down list with Groups
while($row1=mysql_fetch_array($result1)){
echo "<option value=\"$row1[grupo]\" title=\"$row1[nombregrupo]\">$row1[grupo]</option>";

// Loop for loading registers
}

echo "</select>";// Closing of list box 
?>
      Current Name
      <input name="nombregrupo" type="text" id="nombregrupo" size="15" maxlength="15" />
      Enter New Group Name: 
      <input name="nombregrupon" type="text" id="nombregrupon" size="15" maxlength="15" />    </td>
      <input name="submit" type="submit" id="submit" value="Acept" />
<div align="center" id="result"></div>
</form>

</body>
</html>

这是代码输出：

First code output

现在我正尝试使用CSS和Bootstrap修改代码以改善其外观，但是我无法将输入文本“ id = nombregrupon”上的变量传递给ajax （来自php-mysql下拉列表“ grupo”和“ nombregrupo”的变量可以正常发送给ajax函数），根据从下拉列表中选择的字段，都不会刷新mysql中带有字段“ nombregrupo”的inputtext id =“ nombregrupoactual”。这是我的代码（无效）：

<!DOCTYPE html>
<html>
 <head>
  <title>Trunk Group Update</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 </head>
 <body>
    <!--Class Container Division Begin--> 
  <div class="container" style="width:900px;">
   <h2 align="center">Update Trunk Group </h2>
   <h3 align="center">Select Trunk Group </h3>
   <br />  
   <!--Class row Divion Begin--> 
   <div class="row" style=" height: 35px; width:700px;" >
    <!--Class col-md-4 Division Begin--> 
    <div class="col-md-4">
     <select name="listagrupo" id="listagrupo" class="form-control">
      <option value="">Select Group</option>
      <?php 
	   $grupox="-Todos-";
      $connect = mysqli_connect("localhost", "root", "mysq1passw0rd", "llamadas");
      $query = "SELECT * FROM grupostroncales WHERE grupo!='$grupox' ORDER BY grupo ASC";
      $result = mysqli_query($connect, $query);
      while($row = mysqli_fetch_array($result))
      {
       echo "<option value=\"$row[grupo]\" title=\"$row[nombregrupo]\">$row[grupo]</option>";
      }
      ?>
     </select>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control" id="nombregrupoactual" >
    </div>
    <!--Class col-md-4 Division End--> 
    <div class="col-md-4">
     <button type="button" name="submit" id="submit" class="btn btn-info">Submit</button>
    </div>
   </div>
   <!--Class row Divion End--> 
   <br>
   <!--Class row2 Divion Begin--> 
   <div class="row2">
      <label for="newnaame">Enter New Name</label>
   </div>
   <div class="row2">
      <input type="text" class="form-control2" style=" height: 32px; width:210px;" id="nombregrupon">
   </div>
   <!--Class row2 Divion End--> 
   <br>
   <!--Class table-responsive Division Begin--> 
   <div class="table-responsive" id="Detalles_grupo" style="display:none ">
   <table class="table table-bordered">
    <tr>
     <td width="20%" align="right"><b>Grupo</b></td>
     <td width="80%"><span id="grupo"></span></td>
    </tr>
    <tr>
     <td width="20%" align="right"><b>Nombre del Grupo</b></td>
     <td width="80%"><span id="nombregrupo"></span></td>
    </tr> 
   </table>
   </div>
   <!--Class table-responsive Division End--> 
   
  </div>
  <!--Class Container Division End--> 

 </body>
</html>

<!--Java script to load and refresh current nombregrup on inputtext "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 function for passing variables from ajax to php and show mysql update--> 
<script>
$(document).ready(function(){
 $('#submit').click(function(){
  var grupo= $('#listagrupo').val();
  if(grupo != '')
  {
   $.ajax({
    url:"fetchGrupoTroncal.php",
    method:"POST",
    data:{grupo:grupo},
    dataType:"JSON",
    success:function(data)
    {
     $('#Detalles_grupo').css("display", "block");
     $('#grupo').text(data.grupo);
     $('#nombregrupo').text(data.nombregrupo);
    }
   })
  }
  else
  {
   alert("Por favor seleccione un grupo");
   $('#Detalles_grupo').css("display", "none");
  }
 });
});
</script>

这是输出：

Second code output

我不知道如何将所有变量放入表格并将其传递给ajax？或如何使变量id =“ nombregrupon”传递给ajax？

有什么想法吗？

将变量从下拉列表和输入文本传递到ajax

0 个答案: