tomar valores de textfield y enviarlos por url utilizando ajax

[hdiazvalenzuela]

Hola que tal, tengo un problema que me ha causado dolores de cabeza durante dias, lo comento, es el siguiente.

Estoy tratando de pasar 2 valores de 2 textfield's por URL con ajax, es decir, la pagina php esta cargada dentro de un contenedor (con ajax) y tengo un formulario ahi dentro, en el formulario estan 2 textfiel de los que quiero sacar los valores para enviarlos a una pagina php por medio de ajax, en el url contiene tmb 2 valores php, que si se envian y re recogen bien en la pagina php destino.
Mi problema es que no se como sacar los valores de los textfield. Les muestro el codigo.

Código:

<form id="form1" name="form1"  method="post" action="">
  <div align="center">
  <table width="600" border="2" bgcolor="#FFFFFF">
    <tr>
      <th width="180" scope="col">Fecha inicio</th>
      <th width="176" scope="col">Fecha fin</th>
      </tr>
    <tr>
      <td><input class="inputBoxes" name="inicio" type="text" id="inicio" /> (yyyy-mm-dd) </td>
      <td><input class="inputBoxes" name="fin" type="text" id="fin" />(yyyy-mm-dd)  </td>
    </table>
    
<a href="javascript:Enviar('mostrarExcelResumen.php?id_actividad=<?php echo $id_actividad ?>&id_nino=<?php echo $id_nino ?>&inicio='document.form1.inicio.value'&fin='document.form1.fin.value'','contenidoReporte')"><input type="button" value="Ver Resumen!" class="buttons" onClick=""/></a>
  </div>
</form>

Los valores que deseo sacar son "inicio" y "fin".

Espero sus respuestas y de antemano GRACIAS.

[ZiTAL]

para coger los valores:

Código Javascript:

var inicio = document.getElementById('inicio');
var fin = document.getElementById('fin');
 
alert("valor de inicio: "+ inicio.value + " valor de fin: "+ fin.value);
 

[hdiazvalenzuela]

Gracias! la forma de tomar los valores de los textfield si sabia como hacerlo, mi pregunta es como paso esos valores por URL con Ajax en esta linea:

Código:

<a href="javascript:Enviar('mostrarExcelResumen.php?id_actividad=<?php echo $id_actividad ?>&id_nino=<?php echo $id_nino ?>&inicio='document.form1.inicio.value'&fin='document.form1.fin.value'','contenidoReporte')"><input type="button" value="Ver Resumen!" class="buttons" onClick=""/></a>

[lukas4]

en lo personal esa manera que tienes de enviar los valores se me hace algo complicada y dificil de comprender.

porque no pones esos valores de id_actividad e id_nino como campos ocultos?

algo asi:

Código HTML:

<input type="hidden" id=ïd_actividad" value=<?=$id_actividad?>/>
<input type="hidden" id="id_nino" value=<?=$id_nino?> />
 

y ya en tu función de ajax pones algo como lo que puso Zital:

Código Javascript:

id_actividad=document.getElementById('id_actividad').value;
id_nino=document.getElementById('id_nino').value;
inicio = document.getElementById('inicio').value;
fin = document.getElementById('fin').value;
 

y ya armas tu url de esta manera:

Código Javascript:

//todo esto seguiria en tu función de ajax
data="?id_actividad="+id_actividad+"&id_nino="+id_nino+"&inicio="+inicio+"&fin="+fin;
url="mostrarExcelResumen.php"+data;
//y ahora si ya solo lo envias
xmlhttp.open("GET",url,true); //xmlhttp suponiendo que tengas la función como los demas tutoriales de ajax
 

saludos y espero te alla servido de algo la ayuda =)

[hdiazvalenzuela]

gracias lo intentare!