dreamone5156 2013-05-11 16:26
浏览 56
已采纳

如何使用AJAX（没有jquery）获取表单的值？

I have somes forms, and when I push one button of there I want to get in javascript wich is the form of this button I pushed. Or get the value's form in php code with the 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>

I have the code "comprar.php" and it is possible get the value of forms here?

  • 写回答

2条回答 默认 最新

  • dongtan6206 2013-05-11 16:52
    关注

    Change your ajax to this, it will work but you will have to handle the three values in the comprar.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 + "");
}

    In the comprar.php page:

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

    UPDATE:

    Look at l̕aͨŵƦȆ̴̟̟͙̞ͩ͌͝ƞCͭ̏ȇ ƇhƐȓ0nè response and change your form or you wont get the right values, your values are not the variables in php because you did't put them inside the tags and you didnt echo them to the page.

    example:

    with tags outside:. 

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

    or with tags inside:

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

    For more than one form you can create other functions like comprar2() and then get the variables from the second form, just like you did in the first.

    here is the answer to your second question : Just create a variable with a number set to zero and every time a new form is created you add one to the number, like a for loop but with the while your code stays like this:

    <?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; } ?>

    Now change the script to handle the number of the form:

    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 +"");
}

    now in the comprar.php you have the number of the form that was clicked in nr_form variable

    <?php 
$nr_form = $_POST['nr_form'];
$id_txt = $_POST['id_txt'];
$nombre = $_POST['nombre'];
$precio = $_POST['precio'];
?>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • jquery 获取表单元素里面的值示例代码
    2020-10-27 01:58
    在前端开发中，经常需要操作表单元素（如文本框、单选按钮、复选框和下拉选择框等），而jQuery提供了一套简单易用的方法来获取和设置这些表单元素的值。 1. 获取表单元素的值 在表单中，获取元素的值是常见的需求。...
  • jQuery使用$.ajax提交表单完整实例
    2020-10-23 04:31
    ### jQuery使用$.ajax提交表单知识点 #### 1. jQuery和$.ajax简介 - **jQuery**是一个快速、小巧且功能丰富的JavaScript库。它使得HTML文档遍历和操作、事件处理、动画和Ajax变得异常简单。 - **$.ajax**是jQuery中...
  • jQuery前端UI框架表单样式代码
    2021-06-24 09:40
    在本资源"jQuery前端UI框架表单样式代码"中，我们聚焦于jQuery如何与前端UI设计相结合，特别是针对表单元素的样式定制和交互效果。 表单是网页中不可或缺的部分，用于收集用户输入数据。传统的HTML表单样式往往单调...
  • jQuery实现表单动态加减、ajax表单提交功能
    2021-01-19 17:21
    对于前端开发，我的归类是分2种层次，首先第一种是基于前端架构上的开发，有一些后台开发的同事会瞧不起搞前端的，他们认为前端无非是画个页面嘛，这就有点夜郎自大了。现在我了解的一些前端框架基本分为3个主流框架...
  • 前端入门一 —— 使用 JQuery 获取表单数据并通过 Ajax 向服务器提交数据
    2018-10-24 16:47
    wj11771的博客 前端入门一 —— 使用 JQuery 获取表单数据并通过 Ajax 向服务器提交数据一、JQuery 简介二、Ajax 简介三、传统Web应用开发模式与 Ajax 开发模式对比1、传统Web应用开发模式2、Ajax 开发模式3、对比总结四、开发实例...
  • jQuery表单插件ajaxForm实例详解
    2020-11-29 10:44
    **jQuery表单插件ajaxForm** 是一个非常实用的工具，尤其在前端开发中处理表单提交和文件上传时，能极大地提升用户体验。通过使用ajaxForm，你可以实现无刷新页面的表单提交，使得交互更加流畅。以下是关于ajaxForm...
  • jquery获取表单doc文档合集整理.zip
    2022-03-08 00:28
    以下是一个简单的jQuery获取表单数据并使用Ajax提交的示例： ```javascript $("#myForm").submit(function(event) { event.preventDefault(); var formData = $(this).serialize(); $.ajax({ url: "submit....
  • Jquery通过Ajax方式来提交Form表单的具体实现
    2020-10-26 17:41
    在Web开发中，表单提交是常见的数据交互方式，其涉及到从前端发送数据到服务器端进行处理。JQuery作为JavaScript的库，简化了JavaScript编程，而Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个...
  • JQuery打造PHP的AJAX表单提交实例
    2020-12-09 13:37
    这使用了JQuery的选择器和方法，如`.val()`（获取元素值）、`.show()`（显示元素）和`.hide()`（隐藏元素）。 ```javascript $(function() { $('.error').hide(); $('.button').click(function() { $('.error')....
  • jquery+ajax验证不通过也提交表单问题处理
    2020-12-12 23:18
    2 使用ajax提交表单,但是没有使用ajax验证.  这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如: 代码如下: //验证不通过时return   if(!$(“form#ajaxForm”).validationEngine(“validate...
  • 没有解决我的问题, 去提问