Отправить форму (jquery) и показать результаты в colorbox

ProgramBox

Отправить форму (jquery) и показать результаты в colorbox

Post author:admin
Запись опубликована:8 марта, 2023
Post category:Вопросы по программированию

#php #jquery #html #forms #colorbox

#php #jquery #HTML #формы #colorbox

Вопрос:

У меня есть форма, которую я хочу отправить, которая отправляется в php-скрипт для обработки данных формы.

Что мне нужно сделать, так это после нажатия кнопки submit получить всплывающее окно colorbox с результатами php в нем.

Можно ли это сделать?

Это то, что я пытался:

 $("#buildForm").click(function () { // #buildForm is button ID
    var data = $('#test-buildForm'); // #test-buildForm is form ID

    $("#buildForm").colorbox({
        href:"build_action.php", 
        iframe:true, 
        innerWidth:640, 
        innerHeight:360,
        data: data
    });
    return false;
     });

ОБНОВЛЕНИЕ: это должно быть возвращено в iframe как
build_action.php специально включил css и js для этих результатов.

1. Конечно, это можно было бы сделать. Где ты застрял? Не могли бы вы предоставить какой-нибудь код?

2. Пожалуйста, не могли бы вы пояснить, что такое colorbox, как в диалоговом окне?

3. @Coulton — популярный плагин jQuery, клон lightbox

Ответ №1:

Это простой, непроверенный код, но он даст вам хорошую отправную точку, чтобы вы могли разрабатывать, сколько захотите:

 <form action="/path/to/script.php" id="formID" method="post">
  <!-- form stuff goes here -->
  <input type="submit" name="do" value="Submit" />
</form> 

<script type="text/javascript">
$(function() { 
    $("#formID").submit(function() {
        $.post($(this).attr("action"), $(this).serialize(), function(data) {
            $.colorbox({html:data});
        },
        'html');
        return false;
    });
});
</script>

1. Могу ли я вместо этого поместить его в iframe?

2. Также.. что будет на стороне php теперь, когда оно сериализовано.

3. Вам нужно будет написать некоторый PHP-код для обработки отправки формы и распечатать результирующий HTML-код, который вы хотите отобразить в colorbox. В моем примере это будет происходить в «/path/to/script.php »

4. Спасибо… как насчет того, чтобы иметь это в iframe? Скрипт, в который он отправляется, не зависит от страницы формы.

5. Что вы имеете в виду? Использовать iframe вместо использования colorbox? Или использовать iframe внутри colorbox вместо html:data опции? Также «скрипт, в который он отправляется, не зависит от страницы формы». <== Это не имеет значения и не должно влиять на то, как функционирует ajax / colorbox

Ответ №2:

эта статья поможет вам решить проблему

http://www.php4every1.com/tutorials/jquery-ajax-tutorial/

 $(document).ready(function(){
$('#submit').click(function() {

    $('#waiting').show(500);
    $('#demoForm').hide(0);
    $('#message').hide(0);

    $.ajax({
        type : 'POST',
        url : 'post.php',
        dataType : 'json',
        data: {
            email : $('#email').val()
        },
        success : function(data){
            $('#waiting').hide(500);
            $('#message').removeClass().addClass((data.error === true) ? 'error' : 'success')
                .text(data.msg).show(500);
            if (data.error === true)
                $('#demoForm').show(500);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            $('#waiting').hide(500);
            $('#message').removeClass().addClass('error')
                .text('There was an error.').show(500);
            $('#demoForm').show(500);
            }
        });

        return false;
    });
});



< ?php
sleep(3);

if (empty($_POST['email'])) {
    $return['error'] = true;
    $return['msg'] = 'You did not enter you email.';
}
else {
    $return['error'] = false;
    $return['msg'] = 'You've entered: ' . $_POST['email'] . '.';
}

echo json_encode($return);

Ответ №3:

Вам нужно будет увидеть точный способ использования вашего плагина colorbox jQuery. Но вот базовый (непроверенный) пример кода, который я только что написал, чтобы, надеюсь, помочь вам в этом.

Если вы хотите отправить форму с помощью jQuery, предполагая, что у вас есть следующая форма и div для хранения данных диалога:

 <form id="myForm">
<input type="text" name="num1" />
<input type="text" name="num2" />
<input type="submit" name="formSubmit" />
</form>
<div style="display: hidden" id="dialogData"></div>

У вас может быть PHP-код (doAddition.php ), который может выполнять сложение двух чисел

 <?php
// Do the addition
$addition = $_POST['num1']   $_POST['num2'];

$result = array("result" => $addition);

// Output as json
echo json_encode($result);
?>

Вы можете использовать jQuery для обнаружения отправки кода, затем отправить данные на страницу PHP и получить результат обратно в формате JSON:

 $('form#myForm').submit( function() {

    // Form has been submitted, send data from form and get result

    // Get data from form
    var formData = $('form#myForm').serialize();

    $.getJSON( 'doAddition.php', formData, function(resultJSON) {

          // Put the result inside the dialog case
          $("#dialogData").html(resultJSON.result);

          // Show the dialog
          $("#dialogData").dialog();

    });
});

Ответ №4:

Вот как я в итоге заставил его работать:

 <div id="formwrapper">
  <form method="post" action="http://wherever" target="response">
    # form stuff
  </form>

  <iframe id="response" name="response" style="display: none;"></iframe>
</div>

<script>
function hideresponseiframe() {
  $('#formwrapper #response').hide();
}

$('form').submit(
  function (event) {
    $('#formwrapper #response').show();
    $.colorbox(
      {
        inline: true,
        href: "#response",
        open: true,
        onComplete: function() {
          hideresponseiframe()
        },
        onClosed: function() {
          hideresponseiframe()
        }
      }
    );
    return true;
  }
);

</script>