0

Есть код формы

<div id="form">
  <form id="paypal" name="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="iframe name">
    <input type="hidden" name="charset" value="utf-8">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="item_number" value="funds01">
    <input type="hidden" name="item_name" value="Deposit">
    <input type="hidden" name="quantity" value="1">
    <input type="hidden" name="custom" value="admin">
    <input type="hidden" name="receiver_email" value="example@yandex.ru">
    <input type="hidden" name="business" value="example@yandex.ru">
    <input type="hidden" name="no_shipping" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="no_note" value="1">
    <input type="text" class="form-control" name="amount">
    <button type="submit">Go to payment</button>
  </form>
</div>

<div id="result">
  <iframe name="iframe name"></iframe>
</div>

Как сделать так, чтобы после нажатия кнопки отправки формы, блок id form скрылся, а блок id result появился?

3 ответа 3

2

Примерно вот так.

var form = document.getElementById("form");
var result = document.getElementById("result");
function getResult() {
  form.classList.add("hidden");
  result.classList.remove("hidden");
}
.hidden {
  display: none;
}
<div id="form">
  <form id="paypal" name="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="iframe name">
    <input type="hidden" name="charset" value="utf-8">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="item_number" value="funds01">
    <input type="hidden" name="item_name" value="Deposit">
    <input type="hidden" name="quantity" value="1">
    <input type="hidden" name="custom" value="admin">
    <input type="hidden" name="receiver_email" value="example@yandex.ru">
    <input type="hidden" name="business" value="example@yandex.ru">
    <input type="hidden" name="no_shipping" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="no_note" value="1">
    <input type="text" class="form-control" name="amount">
    <button type="submit" onclick="getResult()">Go to payment</button>
  </form>
</div>

<div id="result" class="hidden">
  <iframe name="iframe name"></iframe>
</div>

С помощью AJAX:

var form = document.getElementById("form");
var result = document.getElementById("result");

function getResult() {
  var xhr = new XMLHttpRequest();

  xhr.open("POST", 'https://www.paypal.com/cgi-bin/webscr', true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200 || 302) {
      form.classList.add("hidden");
      result.classList.remove("hidden");
    };
  };

  xhr.send();
}
.hidden {
  display: none;
}
<div id="form">
  <form id="paypal" name="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="iframe name">
    <input type="hidden" name="charset" value="utf-8">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="item_number" value="funds01">
    <input type="hidden" name="item_name" value="Deposit">
    <input type="hidden" name="quantity" value="1">
    <input type="hidden" name="custom" value="admin">
    <input type="hidden" name="receiver_email" value="example@yandex.ru">
    <input type="hidden" name="business" value="example@yandex.ru">
    <input type="hidden" name="no_shipping" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="no_note" value="1">
    <input type="text" class="form-control" name="amount">
    <button type="submit" onclick="getResult()">Go to payment</button>
  </form>
</div>

<div id="result" class="hidden">
  <iframe name="iframe name"></iframe>
</div>

1

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('#result').style.display = 'block';
  document.querySelector('#form').style.display = 'none';
})
#result {
  display: none;
}
<div id="form">
  <form id="paypal" name="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="iframe name">

    <input type="text" class="form-control" name="amount">
    <button type="submit">Go to payment</button>
  </form>
</div>

<div id="result">
  <iframe name="iframe name"></iframe>
</div>

0

так как там айфрей,то sucess работать не будет, прийдётся проверку по другому делать,в данном случае проверка происходит в случае любого завершения запроса. Расчёт на то,что валидация стоит на форме всётаки.

$('#paypal').submit(function(){ 
 $.ajax({
  type: 'POST',
  url: 'https://www.paypal.com/cgi-bin/webscr',
  data: 'параметры',
  complete: function(){
    $('#paypal').hide()
    $('#result').hide()
  }
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form">
  <form id="paypal" name="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="iframe name">
    <input type="hidden" name="charset" value="utf-8">
    <input type="hidden" name="cmd" value="_xclick">
    <input type="hidden" name="item_number" value="funds01">
    <input type="hidden" name="item_name" value="Deposit">
    <input type="hidden" name="quantity" value="1">
    <input type="hidden" name="custom" value="admin">
    <input type="hidden" name="receiver_email" value="example@yandex.ru">
    <input type="hidden" name="business" value="example@yandex.ru">
    <input type="hidden" name="no_shipping" value="1">
    <input type="hidden" name="currency_code" value="USD">
    <input type="hidden" name="no_note" value="1">
    <input type="text" class="form-control" name="amount">
    <button type="submit">Go to payment</button>
  </form>
</div>

<div id="result">
  <iframe name="iframe name"></iframe>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.