I've got a html-php code (SelectUpdateTrunkGroup.php) in which a select a filed on muysql tale (named "grupostroncales", It has two fields "grupo" and "nombregrupo") and from this selection I bring the field "nombregrupo" using javascript function and put it in the input text id=nombregrupo, I've got another input text id=nombregrupon where I can type the new name for the group name, This variables ("grupo" and "nombregrupon") are passed to an ajax function that send them to php es se las paso a ajax que llama a ActualizarGrupoTroncalb.php para actualizar en mysql y php for mysql updating, The code works ok.
This is my code:
<!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>This is code output:
Now I'm trying to modify the code using CSS and Bootstrap for improving its appearance, but I cannot pass variable on input text "id=nombregrupon" to ajax (variables from php-mysql drop down list "grupo" and "nombregrupo" are sent ok to ajax function), neither reflesh inputtext id="nombregrupoactual" with field "nombregrupo" from mysql according to field selected from drop down list. This is my code (doesn't work):
<!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>This is the output:
I dont know how to put all variables in a form and pass them to ajax? Or How to make that variable id="nombregrupon" pass to ajax?
Please any ideas?
</div>
