Как показать успех формы в iframe

есть selectbox. и я написал функцию для метода onchange этого с помощью ajax. он работает хорошо, когда я показываю успех формы в div. Мой вопрос заключается в том, как показать мою успешную форму в iframe? вот мой сниппет:Как показать успех формы в iframe

$(document).ready(function(e) { 
 
    $("[name='count']").on('change', function() { 
 
    var url = "/page2.html"; 
 
    $.ajax({ 
 
     type: "POST", 
 
     url: url, 
 
     data: $("#form").serialize(), 
 
     success: function(data) { 
 
     $("#box").html(data) 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<form method="post" action="" id="form"> 
 
<select name="count"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 
</form> 
 

 
<iframe name="box" id="box"></iframe> 
 
</body> 
 
</html>

Благодаря

источник

2017-02-11 inaz

IFrame имеет собственный окно, так что вы не можете получить доступ к нему непосредственно так же, как вы делаете другие элементы

Вы может использовать contents() для доступа к этому окну и сделать что-то вроде:

$("#box").contents().find('body').html(data);

Кажется мне, что вам не нужно Ajax для этого и может просто отправить форму с target как IFRAME

DEMO

источник

2017-02-11 12:19:50 charlietfl

но как я могу отправить мою форму на страницу действий? – inaz

Я хочу показать мой успех формы в iframe – inaz

, если вы используете 'target' в форме и задаете идентификатор iframe, ответ будет отображать в iframe, используя URL-адрес формы action – charlietfl

Код содержит только ответить на ваш вопрос «шоу Успех форма в iframe '. Если вы пытаетесь опубликовать форму, просто отправьте сообщение на page2.html с помощью стандартного метода html, вам не нужно использовать пост ajax. Если у вас есть конкретное требование, следуйте приведенному ниже коду. Убедитесь, что вы указали каждому элементу ввода имя с помощью тега name, иначе функция сериализации не вернет никаких данных.

page2.html должен выполняться на стороне сервера, а также получать и обрабатывать данные и отображать/эхо-ответы.

HTML,

<form method="post" action="" id="form"> 
<select id="count" name="count"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 
</form> 
<iframe id="thepage"></iframe>

JQuery,

$(document).ready(function(e) { 
     $("#count").on('change', function() { 

var url = "/page2.html"; 
    $.ajax({ 
     type: "POST", 
     url: url, 
     data: $("#form").serialize(), 
     success: function(data) { 
//set iframe content 
var iFrame = $("#thepage"); 
     var iFrameDoc = iFrame[0].contentDocument || iFrame[0].contentWindow.document; 
     iFrameDoc.write(data);//set value 
     iFrameDoc.close(); 

     } 
    }); 

     }); 
    });

источник

2017-02-11 12:20:16 Matt

, где форма отправлена? – inaz

см. Обновленный ответ – Matt

вы могли бы получить доступ к содержимому вашего фрейма, как это: Предполагая, что вы находитесь в "успеха()" функции и IFrame ЦСИ является не кросс-происхождения

var iframe = $('#box'); 

//Cross browser compatility 
var iframe_doc = iframe[0].contentWindow || iframe[0].contentDocument; 
if (iframe_doc.document) { 
     iframe_doc = iframe_doc.document; 
} 
iframe_doc.open(); 
iframe_doc.write("<html><head></head><body></body></html>"); 
var iframe_body = $(iframe_doc).find('body'); 
iframe_body.html(data)

источник

2017-02-11 12:41:39 AngularPlayer

Как показать успех формы в iframe

ответ

Смежные вопросы