Wordpress многошаговая форма с AJAX перезагрузкой моей страницы - PullRequest
0 голосов
/ 12 апреля 2020

Я пытаюсь создать многошаговую форму для выставления счета. Но когда я go перехожу ко второму шагу, ajax обновляет мою страницу.

Первый шаг работает отлично, он ищет заказ woocmmerce с помощью формы, я могу получить всю эту информацию без проблем.

Проблема возникает в STEP 2 (paso_dos), где я хочу чтобы получить эти поля формы.

Вот мой js:

jQuery(document).ready(function ($) {

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});



    $(".formulario_factura").on("submit", function(e){
    
    e.preventDefault();
    var id = $('.id').val();
   var monto = $('.monto').val();
        jQuery.ajax({
 type : "post",
 url : facturama_object.ajaxurl,
 data : {
 action : 'paso_uno',
 		id : id,
 		monto: monto, 
 },
 error: function(response){
 
 $(".formulario_factura").css("display","none");
 },
 
 success: function(data) {
         jQuery("#feedback").html(data);
         $("#contenedor-factura").css("display","none");
 
  }
        });
    });
    
    
    
$("#timbrarfactura").on("submit", function(event){

    
   event.preventDefault();
   
    var rfc = $('.RFC').val();
    var razonsocial = $('.razonsocial').val();
    var email = $('.email').val();
    var domicilio = $('.domicilio').val();
    var numerodeorden = $('.numerodeorden').val();
    var formadepago = $('.formadepago').val();
    var metododepago = $('.metododepago').val();
    var usocfdi = $('.usocfdi').val();
        jQuery.ajax({
 type : "post",
 url : "<?php echo $ajaxurl; ?>",
 data : {
 action : 'paso_dos',
 		rfc: rfc,
 		razonsocial: razonsocial,
 		email: email,
 		domicilio: domicilio,
 		numerodeorden: numerodeorden,
 		formadepago: formadepago,
 		metododepago: metododepago,
 		usocfdi: usocfdi,
 },
 error: function(response){
 
 $(".formulario_factura").css("display","block");
 },
 
 success: function(data) {
         jQuery("#feedback").html(data);
         $("#contenedor-factura").css("display","none");
 
  }
        });
    
    
    
    
});

А вот моя PHP функция.

add_action( 'wp_ajax_paso_dos', 'paso_dos' ); // ADD AJAX SUPPORT FOR PASO 2
add_action( 'wp_ajax_nopriv_paso_dos', 'paso_dos' );// ADD AJAX SUPPORT FOR PASO 2

function paso_dos(){


// A default response holder, which will have data for sending back to our js file
    $response = array(
        'error' => false,
    );

    // Example for creating an response with error information, to know in our js file
    // about the error and behave accordingly, like adding error message to the form with JS
    if (trim($_POST['id']) == '') {
        $response['error'] = true;
        $response['error_message'] = 'Email is required';

        // Exit here, for not processing further because of the error
        exit(json_encode($response));
    }

//OBTENEMOS LOS DATOS DEL FORMULARIO:


$numerodepedido = $_POST['numerodeorden'];
$rfc = $_POST['rfc'];
$razonsocial = $_POST['razonsocial'];
$email = $_POST['email'];
$domicilio = $_POST['domicilio'];
$formadepago = $_POST['formadepago'];
$metododepago = $_POST['metododepago'];
$usocfdi = $_POST['usocfdi'];



echo $numerodepedido."<br>";
echo $rfc."<br>";
echo $razonsocial."<br>";
echo $email."<br>";
echo $domicilio."<br>";
echo $formadepago."<br>";
echo $metododepago."<br>";
echo $usocfdi."<br>";

}

А вот моя HTML форма:

<form method="post" class="timbrarfactura" style="width:100%;" id="timbrarfactura">
  
  
  <div class="col-md-8" style="float:left">
  
  RFC :<br> <input type="text" name="RFC" class="RFC"><br>
  
  Razón social:<br> <input type="text" name="razonsocial" class="razonsocial"><br>
  
   
  Email:<br> <input type="email" name="email" class="email"><br>
  
	Domicilio :<br> <input type="text" name="domicilio" class="domicilio"><br>
	
	<input type="hidden" id="numerodeorden" class ="<?php echo $numerodeorden ?>" name="numerodeorden" value="<?php echo $numerodeorden ?>">
  
  <br>
  
  </div>
  
  <div class="col-md-4" style="float:left">
  
  <h3>DATOS DEL COMPROBANTE</h3>
  
  FORMA DE PAGO:<br>
  <select name="formadepago" class="formadepago">
  <option value="01">Efectivo</option>
  <option value="02">Cheque Nominativo</option>
  <option value="03">Transferencia electrónica de fondos</option>
  <option value="04">Tarjeta de crédito</option>
  <option value="05">Monedero electrónico</option>
  <option value="06">Dinero electrónico</option>
  <option value="08">Vales de despensa</option>
  <option value="12">Dación de pago</option>
  <option value="13">Pago por subrogación</option>
  <option value="14">Pago por consignación</option>
  <option value="15">Condonación</option>
  <option value="17">Compensación</option>
  <option value="23">Novación</option>
  <option value="24">Confusión</option>
  <option value="25">Remisión de deuda</option>
  <option value="26">Prescripción o caducidad</option>
  <option value="27">A satisfaciión del acreedor</option>
  <option value="28">Tarjeta de Débito</option>
  <option value="29">Tarjeta de servicios</option>
  <option value="30">Apliación de anticipos</option>
  <option value="31">Intermediario pagos</option>
  <option value="99">Por definir</option>
</select>
  
  <br>
  Método de pago:<br>
<select name="metododepago" class="metododepago">
  <option value="PUE">Pago en una sola exhibición</option>
  <option value="PPD">Pago en parcialidades o diferido</option>
</select>

<br>

USO DE CFDI:
<br>

<select name="usocfdi" class="usocfdi">
  <option value="G01">Adquisición de mercancias</option>
  <option value="G02">Devoluciones, descuentos o bonificaciones</option>
  <option value="G03">Gastos en general</option>
  <option value="I01">Construcciones</option>
  <option value="I02">Mobilario y equipo de oficina por inversiones</option>
  <option value="I03">Equipo de transporte</option>
  <option value="I04">Equipo de computo y accesorios</option>
  <option value="I05">Dados, troqueles, moldes, matrices y herramental</option>
  <option value="I06">Comunicaciones telefónicas</option>
  <option value="I07">Comunicaciones satelitaleso</option>
  <option value="I08">Otra maquinaria y equipo</option>
  <option value="D01">Honorarios médicos, dentales y gastos hospitalarios.</option>
  <option value="D02">Gastos médicos por incapacidad o discapacidad</option>
  <option value="D03">Gastos funerales.</option>
  <option value="D04">Donativos.</option>
  <option value="D05">Intereses reales efectivamente pagados por créditos hipotecarios (casa habitación).</option>
  <option value="D06">Aportaciones voluntarias al SAR.</option>
  <option value="D07">Primas por seguros de gastos médicos.</option>
  <option value="D08">Gastos de transportación escolar obligatoria.</option>
  <option value="D09">Depósitos en cuentas para el ahorro, primas que tengan como base planes de pensiones.</option>
  <option value="D10">Pagos por servicios educativos (colegiaturas)</option>
  <option value="P01">Por definir</option>
</select>
  
  
<button id="botonera" type="submit">ENVIAR</button>  
  </form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...