Как отобразить результаты для формы в div?

Question

я в настоящее время принося форму в DIV так:

$('#m').load('http://example.com/converter/index.php #converty'); 

Мне нужны результаты, чтобы отобразить в #m DIV, в настоящее время он принимает меня к странице конвертер/index.php, любая помощь приветствуется! Форма, которая загружена:

<form action="/converter/index.php" method="post" id="conversionForm" style="display: block;"> 
**do stuff** 
</form> 

FYI: страница со скриптом находится в корневом домене, в то время как преобразователь находится в каталоге папки example.com/converter.

Answer 1

Предотвратите поведение формы отправки по умолчанию с помощью метода .submit в элементе формы, затем заполните данные формы, используя .serializeArray и сделайте то, что вам нужно сделать.

Вот пример.

$("form").submit(function(event) { 
 
    var formData = $(this).serializeArray(); 
 
    $.each(formData, function(i, item) { 
 
    var $p = $("<p>"); 
 
    $p.text(item.name + ": " + item.value); 
 
    $("#output").append($p); 
 
    }) 
 
    event.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="output"></div> 
 
<form method="get" action="foo.php"> 
 
    <div><input type="text" name="a" value="1" id="a"></div> 
 
    <div><input type="text" name="b" value="2" id="b"></div> 
 
    <div><input type="hidden" name="c" value="3" id="c"></div> 
 
    <div> 
 
    <textarea name="d" rows="8" cols="40">4</textarea> 
 
    </div> 
 
    <div><select name="e"> 
 
    <option value="5" selected="selected">5</option> 
 
    <option value="6">6</option> 
 
    <option value="7">7</option> 
 
    </select></div> 
 
    <div> 
 
    <input type="checkbox" name="f" value="8" id="f"> 
 
    </div> 
 
    <div> 
 
    <input type="submit" name="g" value="Submit" id="g"> 
 
    </div> 
 
</form>