Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Wesley R

Como enviar dados de uma página para outra com Ajax.

Por , em Javascript

Recommended Posts

Wesley R    0

Wesley R
Postado

Bom dia pessoal!

 

Tenho este formulário que carrega dois inputs do banco de dados. O primeiro lista os pacotes, e o segundo é listado em função do primeiro.

 

Quero enviar estas três variáveis : "servico" $serv, $price, $id , como também #date e #hour que contém os valores selecionados , pois vou precisar delas na outra página. Como enviar via Ajax ?

 

 

 

Script que fica dentro da pagina formulario.php 

//pega o id do select pacote e manda para pagina valida.php.
$(document).ready(function(){
  $('#pacote').change(function(){
    var id_pacote = $(this).val();
    var data = 'id_pacote='+id_pacote;
    $.ajax({
      type : "POST",
      url : "assets/third_party/login/valida.php",
      data : data,
      cache : false,
      success: function(html)
      {
            $('#servico').html(html);
      }


    })


  });
});


Formulário.php


     <form id="form-order" action="booking/personal.php" method="post" class="sky-form vp-form">

	
	                <div id="residential" class="service-list vp-form-line clearfix">
			<span class="vp-form-icon"><i class="vp-icon vp-add"></i></span>
			<label class="vp-form-item select">
				<select class="pacote" name = "pacote" id = "pacote">
						    <?php 
	$SQL = "SELECT * FROM tb_pacote";
	$query = mysqli_query($mysqli, $SQL);
	while ($row = mysqli_fetch_array($query)){
	  $res = "<option ";
	  $res .="value='".$row['id_pacote']."' >";
	  $nome= $res .= $row['nome_pacote'];
	  $res .="</option>";
	  echo $res;

	}

	?>				   
							
				  </select>
				<i></i>
			</label>
		</div>

		
		<div class="vp-form-line clearfix">
			<span class="vp-form-icon"><i class="vp-icon vp-supplies"></i></span>
			<label class="vp-form-item select">
				<select name="servico" class="select-service" id="servico">
					<option value="0">Cleaning Plain</option>
					
				</select>
				<i></i>
			</label>
		</div>
<script>

$(document).ready(function(){
  $('#servico').change(function(){
  	$serv = $(this).find('option:selected').text();
  	$price = $(this).find('option:selected').data("price");
    $id = $(this).find('option:selected').val();
    
  });
});


</script>
		

		<div class="vp-form-line clearfix">
			<span class="vp-form-icon"><i class="vp-icon vp-date"></i></span>
			<label class="vp-form-item  input">
				<input name="date" type="text" name="date" id="date" value="Select date" />
			</label>
		</div>

		<div class="vp-form-line clearfix">
			<span class="vp-form-icon"><i class="vp-icon vp-time"></i></span>
			<label class="vp-form-item select">
				<select name="hour" id="hour">
					<option value="0">Select Time</option>
											<option value="08:00 AM">08:00 AM</option>
											<option value="08:30 AM">08:30 AM</option>
											<option value="09:00 AM">09:00 AM</option>
											<option value="09:30 AM">09:30 AM</option>
											<option value="10:00 AM">10:00 AM</option>
											<option value="10:30 AM">10:30 AM</option>
											<option value="11:00 AM">11:00 AM</option>
											<option value="11:30 AM">11:30 AM</option>
											<option value="12:00 PM">12:00 PM</option>
											<option value="12:30 PM">12:30 PM</option>
											<option value="01:00 PM">01:00 PM</option>
											<option value="01:30 PM">01:30 PM</option>
											<option value="02:00 PM">02:00 PM</option>
											<option value="02:30 PM">02:30 PM</option>
											<option value="03:00 PM">03:00 PM</option>
											<option value="03:30 PM">03:30 PM</option>
											<option value="04:00 PM">04:00 PM</option>
											<option value="04:30 PM">04:30 PM</option>
											<option value="05:00 PM">05:00 PM</option>
											<option value="05:30 PM">05:30 PM</option>
											<option value="06:00 PM">06:00 PM</option>
											<option value="06:30 PM">06:30 PM</option>
											<option value="07:00 PM">07:00 PM</option>
											<option value="07:30 PM">07:30 PM</option>
											<option value="08:00 PM">08:00 PM</option>
				  </select>
				<i></i>
			</label>
		</div>

		<input type="hidden" name="cart" id="cart-input" value="" />

		<div class="vp-form-cart clearfix">
			<span class="vp-form-icon"><i class="vp-icon vp-cart"></i></span>
			<span class="vp-form-item">Cart</span>
		</div>

		<div id="cart"></div>



	</div> <!-- end: box-content -->



<script type="text/template" id="item_template">
	<span><%= this.model.get("title")  %></span><span><%= this.model.get("price") %></span>
</script>

<script type="text/template" id="cart_template">
	<div class="services clearfix">
		<div id="cleaning_service" class="cart-line">
			<div class="title">Cleaning Services</div>
			<div class="price"><%= parseFloat(this.model.get("cleaning_total")).toFixed(2) %> </div>
			<ul class="cart_added" id="teste"><li><span><%= this.model.get("cleaning_name") %></span><span><%= parseFloat(this.model.get("cleaning_total")).toFixed(2) %></span></li></ul>
		</div>
		<div id="additional_service" class="cart-line">
			<div class="title"></div>
			<div class="price"></div>
			<ul id="additional_items" class="cart_added"></ul>
		</div>
		<div >
			<div></div>
			<div></div>
		</div>

		<div>
			<div></div>
			<div></div>
			<ul></ul>
		</div>
	</div> 
	<div class="footer">
		<table id="price-total">
			<tr>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>	</td>
				<td </td>
			</tr>  
			<tr class="total"> 
			<td>TOTAL</td>
				<td class="text-right"><%= parseFloat(this.model.get("total") * 0 + +this.model.get("total")).toFixed(2)  %></td>
			</tr>
		</table>
	</div>
</script>

</form>

Página valida php. 

<?php
include "conexao.php";

if(isset($_POST['id_pacote']))
{
	$SQL = "SELECT * FROM tb_servico WHERE tb_pacote_id_pacote = '".$_POST['id_pacote'] . "'";
	$query = mysqli_query($mysqli, $SQL);
    while ($row = mysqli_fetch_array($query)){
  $res = "<option ";
  $res .="value='".$row['id_servico']."'";
   $res .="data-price='".$row['preco_servico']."' >";
  $res .= $row['nome_servico'];
  $res .="</option>";
  echo $res;
 }

}

?>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Iskandar    5

Iskandar
Postado

Para enviar:

$.post("destino.php", {
dadosA: 'Meu nome é Jon',
dadosB: 'Mentira',
dadosC: 'Meu nome é Pedro'
}, function(result) {
console.log(result);
});

Página que recebe (destino.php)

$A = $_POST['dadosA'];
$B = $_POST['dadosB'];
$C = $_POST['dadosC'];

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wesley R    0

Wesley R
Postado

A pagina de destino eu entendi como funciona, porém a de envio não. Teria como você mostrar como fica a estrutura completa?

Compartilhar este post

Link para o post
Compartilhar em outros sites

wootzor    103

wootzor
Postado

Pegando no que foi escrito pelo Iskandar, eu faria o seguinte:

$(document).ready(function() {
   $("#form-order").submit(function(event) {
      event.preventDefault(); //importante para evitar que o formulário seja enviado duas vezes 
                             //(directamente a partir do HTML e através de AJAX)
      $.post("booking/personal.php", {$(this).serialize()}, function(result) {
         //A variável 'result' contém a resposta devolvida pela  página "personal.php"
      });

   });
});

$(this).serialize() serve para enviar todos os dados inseridos no formulário. Mais sobre o que é e para que serve o objecto this aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wesley R    0

Wesley R
Postado

Na página de recepção eu recebi todos os dados exceto no select "servico" veio somente o value do campo selecionado. Preciso recuperar os valores que peguei com esta função:

$(document).ready(function(){
  $('#servico').change(function(){
  	$serv = $(this).find('option:selected').text();
  	$price = $(this).find('option:selected').data("price");
    $id = $(this).find('option:selected').val();
    
  });
});

preciso enviar para a página personal.php essas os dados destas 2 variáveis $serv , $price.

Compartilhar este post

Link para o post
Compartilhar em outros sites

wootzor    103

wootzor
Postado

E como é que as "recebes" na página personal.php?

 

Podes fazer algo assim:

$.post("booking/personal.php", {serv: $serv, price: $price}, function(result) {
 //A variável 'result' contém a resposta devolvida pela  página "personal.php"
});

E "recuperar" os valores com $_POST["serv"] e $_POST["price"].

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito