Это не в состоянии автоматически публиковать с JS & AJAX

Question

Это не в состоянии автоматически публиковать с JS & AJAX

У меня есть formA что отправляет и сохраняет в БД MYSQL

<form name="A" id="FormA" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">  <== first visable form ,Submitting the data into DB
    ........field inputs. ..... 
    <input type="submit" class="btn btn-primary" value="Submit">
</form>

У меня есть скрытая форма под названием PayForm которые хранят некоторую переменную со скрытым методом ввода и получают $input_amount как amount от FromA

Отмечено, что я не сделал submit кнопка

Эта форма будет опубликована в EPayment Gateway .

<form name="payForm" id="payForm" method="post" action=" https://test.paydollar.com/b2cDemo/eng/payment/payForm.jsp">
    <input type="hidden" id="merchantId" value="sth">
    <input type="hidden" id="amount" value="<?php echo $input_amount; ?>" >
    <input type="hidden" id="orderRef" value="<?php  date_default_timezone_set("Asia/Taipei");  $date = date('m/d/Y h:i:s a', time()); echo $date ; ?>">
    <input type="hidden" id="currCode" value="sth" >
    <input type="hidden" id="mpsMode" value="sth" >
    <input type="hidden" id="successUrl" value="http://www.yourdomain.com/Success.html">
    <input type="hidden" id="failUrl" value="http://www.yourdomain.com/Fail.html">
    <input type="hidden" id="cancelUrl" value="http://www.yourdomain.com/Cancel.html">
    ...
</form>

Вот мой рабочий процесс идеи:

1) Пользователь нажимает кнопку "Отправить" в FormA ==> информация в FormA собирается хранить в DB,

2)JS работает. Заставить PayForm отправлять автоматически. Затем пользователь направляется в платежный шлюз.

Короче говоря, Submit кнопка в FormA вызвать обе формы после действий.

Вот мой JS

  <script type='text/javascript'>
   var payFormDone = false;
    $('#FormA').on('submit', function(e){
        if( !payFormDone ) {
            e.preventDefault(); // THIS WILL TRIGGER THE NEXT CODE
            $('#payForm').submit();

        }
    });

    $("#payForm").submit(function(event) {
        /* stop form from submitting normally */
       //event.preventDefault();

        /* get the action attribute from the <form action=""> element */
        var $form = $(this),
        url = $form.attr( 'action' );

        /* Send the data using post with element id name and name2*/
        var posting = $.post( url, { 
                merchantId: $('#merchantId').val(), 
                amount: $('#amount').val(), 
                orderRef: $('#orderRef').val(), 
                currCode: $('#currCode').val(), 
                mpsMode: $('#mpsMode').val(), 
                successUrl: $('#successUrl').val(), 
                failUrl: $('#failUrl').val(), 
                cancelUrl: $('#cancelUrl').val(), 
                payType: $('#payType').val(), 
                lang: $('#lang').val(), 
                payMethod: $('#payMethod').val(), 
                secureHash: $('#secureHash').val()
        } );

        /* Alerts the results */
        posting.done(function( data ) {
            alert('success'); 
         payFormDone = true;
            $('#FormA').submit();

        });
    });
    </script>

Теперь идея не работает. Это может вызвать только действие второй формы. Первое действие формы не вызвано. По крайней мере, данные в FormA не сохранил в БД.

Короче,

 posting.done(function( data ) {
        alert('success');
        payFormDone = true;
        $('#payFormCcard').submit();
    });

Не работает. Я думаю!

Обновить

Вот как я публикую FormA на сервер

<?php
// Include config file
require_once 'database.php';
header("Content-Type:text/html; charset=big5");
print_r($_POST);

// Define variables and initialize with empty values
$CName = $Address = $Phone = $amount= $Purpose= $Ticket = "";
$CName_err = $Address_err = $Phone_err = $amount_err = $Purpose_err = $Ticket_err="";

// Processing form data when form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Validate name
    $input_CName = trim($_POST["CName"]);
    if (empty($input_CName)) {
        $CName_err = "Please enter a name.";
    } elseif (!filter_var(trim($_POST["CName"]), FILTER_VALIDATE_REGEXP, array("options" => array("regexp" => "/^[a-zA-Z'-.\s ]+$/")))) {
        $CName_err = 'Please enter a valid name.';
    } else {
        $CName = $input_CName;
    }
......
if (empty($CName_err) && empty($Address_err) && empty($amount_err) && empty($Phone_err)) {
        // Prepare an insert statement
        $pdo = Database::connect();
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $sql = "INSERT INTO donation (CName, Address, Phone, Amount ,Ticket, Purpose) VALUES (?, ?, ?, ? ,?, ?)";

        $q = $pdo->prepare($sql);
        $q->execute(array($CName, $Address, $Phone, $amount ,$Ticket ,$Purpose));
        Database::disconnect();

}

}
?>

0

javascript php ajax html-form html-post

Источник

user6685357 28 июн '18 в 08:31

4 ответа

Другие вопросы по тегам javascript php ajax html-form html-post

user1982631 28 июн '18 в 08:40 2018-06-28 08:40 · Answer 1 · 2018-06-28 08:40

Вы не должны комментировать event.preventDefault(); из второй формы. В настоящее время происходит отправка в качестве действия по умолчанию, которое является отправкой по URL.

0

Источник

user1982631 28 июн '18 в 08:40

user1686626 28 июн '18 в 11:27 2018-06-28 11:27 · Answer 2 · 2018-06-28 11:27

Если я правильно понимаю вопрос:

<script type='text/javascript'>
  $('#FormA').on('submit', function(e){
    e.preventDefault();
    $('input[type="submit"]', $(this)).attr('disabled','disabled');
    $.post( $(this).attr('action'), $(this).serialize(), function() {
        var $payForm = $("#payForm");
        $.post( $payForm.attr('action'), $payForm.serialize(), function(data) {
            alert('success');
            // redirect to whereever you want
        });
    });
  });
</script>

ОБНОВИТЬ:

случай 2) перенаправление на платежный шлюз:

<script type='text/javascript'>
  $("#payForm").submit(function(e) {
     alert('redirecting to payment gateway');
  }); 
  $('#FormA').on('submit', function(e){
    e.preventDefault();
    $('input[type="submit"]', $(this)).attr('disabled','disabled');
    $.post( $(this).attr('action'), $(this).serialize(), function() {
        $("#payForm").submit();
    });
  });
</script>

ПРИМЕЧАНИЕ: замените весь ваш скрипт только этим и проверьте в браузере, выполняются ли запросы в опубликованных данных - F12 (Инструменты разработчика) - вкладка Сеть. Имейте в виду, что этот код написан с нуля, поэтому он может иметь некоторые ошибки, но он показывает путь.

user121199 28 июн '18 в 08:48 2018-06-28 08:48 · Answer 3 · 2018-06-28 08:48

Обработчик отправки для FormA фактически предотвращает отправку формы. Вот почему данные не сохраняются в БД.

$('#FormA').on('submit', function(e){
    if( !payFormDone ) {
        e.preventDefault(); // => HERE you are preventing the form from submitting
        $('#payForm').submit();
    }
});

Здесь вы находитесь в обработчике отправки для формы, но вызов метода protectDefault останавливает отправку для FormA и вместо этого инициирует отправку payForm. См. https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Кроме того, вместо того, чтобы запускать его через javascript, я бы, вероятно, отправил первый нормально. Затем, в ответ на запрос POST в первой форме, вы можете напечатать пользователю что-то вроде: "Вы перенаправлены на платежный шлюз... " и скрытую форму со всеми полями, которая будет активирована автоматически через x секунд. ИМХО такой подход проще и надежнее.

Итак, на первой html-странице я удалю весь ваш код JavaScript и оставлю только:

<form name="A" id="FormA" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
  ........field inputs. ..... 
  <input type="submit" class="btn btn-primary" value="Submit">
</form>

Когда пользователь нажимает кнопку, он отправляет данные на страницу php в POST. На сервере данные сохраняются в БД, и сервер печатает сообщение для пользователя и перенаправляет на платежный шлюз (на этот раз через javascript). Что-то вроде:

<?php if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  .... save data to db
?>
<form name="payForm" id="payForm" method="post" action=" https://test.paydollar.com/b2cDemo/eng/payment/payForm.jsp">
  <input type="hidden" id="merchantId" value="sth">
  <input type="hidden" id="amount" value="<?php echo $input_amount; ?>" >
  <input type="hidden" id="orderRef" value="<?php  date_default_timezone_set("Asia/Taipei");  $date = date('m/d/Y h:i:s a', time()); echo $date ; ?>">
  <input type="hidden" id="currCode" value="sth" >
  <input type="hidden" id="mpsMode" value="sth" >
  <input type="hidden" id="successUrl" value="http://www.yourdomain.com/Success.html">
  <input type="hidden" id="failUrl" value="http://www.yourdomain.com/Fail.html">
  <input type="hidden" id="cancelUrl" value="http://www.yourdomain.com/Cancel.html">
  <p>You are being redirected to the payment gateway. If the redirect takes too long</p>
  <input type="submit" value"click here">
</form>
<script>
// submits the form after 5 seconds
setTimeout(function(){ $('#payForm').submit(); }, 5000);
</script>
<?php } // this ends the POST block ?>

user5962802 28 июн '18 в 08:51 2018-06-28 08:51 · Answer 4 · 2018-06-28 08:51

Внутри posting.done() пожалуйста, удалите / отсоедините onSubmit обработчик для FormA непосредственно перед вызовом $('#FormA').submit();

posting.done(function( data ) {
     alert('success'); 
     $('#FormA').off('submit');
     $('#FormA').submit();
    });

РЕДАКТИРОВАТЬ:

Хорошо, почему бы не отправить поля формы A с AJAX внутри его onSubmit обработчик и отправить форму B из posting.done() обработчик?

<script type='text/javascript'>
  $('#formA').on('submit', function(e){
     e.preventDefault();

    /* Send the data using post with element id name and name2*/
    var posting = $.post( "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>", { 
            field1: $('#field1').val(), 
            .....
    } );

    /* Alerts the results */
    posting.done(function( data ) {
        alert('success'); 
        $('#FormB').submit();
    }
});
</script>