我如何获得一个表单的值与AJAX(没有jquery)


How can I get the value of a form with AJAX (no jquery)?

我有一些表单,当我按下其中的一个按钮时,我想在javascript中得到我按下的这个按钮的形式。或获得值的形式在php代码与var $_POST?

<?php include ('conexion.php');?>
<!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/199/xhtml">
<head>
<meta hhtp-equiv="Content-Type" content="text/html; charset="utf-8" />
<title>Tienda</title>
<script>
function inicializar()
{
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    return new XMLHttpRequest();
}
else{// code for IE6, IE5
    return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function comprar()
{
var xmlhttp;
var fieldValue = document.comprar.elements[0].value;
xmlhttp=inicializar();
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
  }
xmlhttp.open("POST","comprar.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("p="+fieldValue);
}
</script>
</head>
<body>
<div id="myDiv"><p>Carrito: 0 productos 0,00&#8364 </p></div>
<p>LISTADO DE PRODUCTOS</p>
<table width="200" border="0" id="myTable">
<tr>
    <td bgcolor="#D6D6D6">ID</td>
    <td bgcolor="#D6D6D6">IMAGEN</td>
    <td bgcolor="#D6D6D6">NOMBRE</td>
    <td bgcolor="#D6D6D6">DESCRIPCION</td>
    <td bgcolor="#D6D6D6">PRECIO</td>
    <td bgcolor="#D6D6D6">AGREGAR</td>
</tr>
<tbody>
<?php 
$consulta=mysql_query("select * from productos");
while($filas=mysql_fetch_array($consulta)){
    $id=$filas['id'];
    $imagen=$filas['imagen'];
    $nombre=$filas['nombre'];
    $descripcion=$filas['descripcion'];
    $precio=$filas['precio'];
?>
    <tr>
    <td><?php echo $id ?></td>
    <td><img src="<?php echo $imagen; ?>" width="70" height="70"></td>
    <td><?php echo $nombre ?></td>
    <td><?php echo $descripcion ?></td>
    <td><?php echo $precio ?></td>
    <td><form action ="javascript:comprar()" method="post" name="comprar">
        <input name="id_txt" type="hidden" value="'.$id.'" />
        <input name="nombre" type="hidden" value="'.$nombre.'" />
        <input name="precio" type="hidden" value="'.$descripcion.'" />
        <input name="cantidad" type="hidden" value=1 />
        <input type="submit" name="Comprar" value="Comprar" /></form></td>
    </tr>   
<?php } ?>
</tbody>    
</table>
</body>
</html>

我有代码"比较。php",它是可能得到表单的值在这里吗?

将ajax更改为此,它将工作但您必须处理compare .php

中的三个值
function comprar()
{
var id_txt = document.forms["comprar"]["id_txt"].value;
var nombre = document.forms["comprar"]["nombre"].value;
var precio = document.forms["comprar"]["precio"].value;

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

  }
xmlhttp.open("POST","comprar.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("id_txt=" + id_txt + "&nombre=" + nombre + "&precio=" + precio + "");
}

在compare .php页面:

<?php 
$id_txt = $_POST['id_txt'];
$nombre = $_POST['nombre'];
$precio = $_POST['precio'];
?>
更新:

看lͨ̕ŵƦȆ̴̟̟͙̞ͩ͌͝ƞCͭ̏ȇƇhƐȓ0 ne反应和改变你的表单或你不会得到正确的价值观,你的价值不是用php变量,因为你不能把它们在标签和你没有回声页面。

的例子:

外面有标签。

<?php echo '<input name="precio" type="hidden" value="'.$descripcion.'" />'; ?>

或带有标签的

 <input name="precio" type="hidden" value="<?php echo $descripcion;?>" />

对于多个表单,您可以创建其他函数,如comparar2(),然后从第二个表单中获取变量,就像您在第一个表单中所做的那样。

下面是你第二个问题的答案:只需要创建一个变量,将数字设置为0每次创建新表单时都要在数字上加1,就像for循环一样但是使用while语句时,代码是这样的

<?php 
$consulta=mysql_query("select * from productos");
$i = 0;
while($filas=mysql_fetch_array($consulta)){
    $id=$filas['id'];
    $imagen=$filas['imagen'];
    $nombre=$filas['nombre'];
    $descripcion=$filas['descripcion'];
    $precio=$filas['precio'];
?>
    <tr>
    <td><?php echo $id ?></td>
    <td><img src="<?php echo $imagen; ?>" width="70" height="70"></td>
    <td><?php echo $nombre ?></td>
    <td><?php echo $descripcion ?></td>
    <td><?php echo $precio ?></td>
    <td><form action ="javascript:comprar(<?php echo $i; ?>)" method="post" name="comprar">
        <input name="id_txt" type="hidden" value="<?php echo $id;?>" />
        <input name="nombre" type="hidden" value="<?php echo $nombre;?>" />
        <input name="precio" type="hidden" value="<?php echo $descripcion;?>" />
        <input name="cantidad" type="hidden" value=1 />
        <input type="submit" name="Comprar" value="Comprar" /></form></td>
    </tr>   

<?php $i = $i + 1; } ?>

现在修改脚本来处理表单的数字:

function comprar(nr_form)
{
var id_txt = document.forms["comprar"]["id_txt"].value;
var nombre = document.forms["comprar"]["nombre"].value;
var precio = document.forms["comprar"]["precio"].value;

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

  }
xmlhttp.open("POST","comprar.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("id_txt=" + id_txt + "&nombre=" + nombre + "&precio=" + precio + "&nr_form=" + nr_form +"");
}

在compare。php中我们有被点击表单的编号在nr_form变量

<?php 
$nr_form = $_POST['nr_form'];
$id_txt = $_POST['id_txt'];
$nombre = $_POST['nombre'];
$precio = $_POST['precio'];
?>

您需要在表单中对这些变量启用php。

<form action ="javascript:comprar()" method="post" name="comprar">
        <input name="id_txt" type="hidden" value="<?php echo $id; ?>" />
        <input name="nombre" type="hidden" value="<?php echo $nombre; ?>" />
        <input name="precio" type="hidden" value="<?php echo $descripcion; ?>" />
        <input name="cantidad" type="hidden" value=1 />
        <input type="submit" name="Comprar" value="Comprar" />
</form>