Как отправить данные на ту же страницу с помощью JQuery

128
6

В основном все, что я пытаюсь сделать, это отправить данные формы в одно и то же место формы.

Код должен:

Получите действие #submit click Извлечь данные #email, # selection1 и # selection2 Скрыть форму #form Дисплей #email, # selection1 и # selection2 внутри абзаца #preview

У меня нет опыта JQuery, поэтому я потерялся. Я пробовал оглядываться и пробовать разные коды, но для меня ничего не получилось.

Мой код формы:

<form method="post" id="form">
<div class="form-group col-lg-10 col-lg-offset-1">
<input type="email" id="email" class="form-control" name="email" placeholder="Email" />
</div>

<div class="form-group col-lg-10 col-lg-offset-1">
<select class="form-control" id="selection1">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>

<div class="form-group col-lg-10 col-lg-offset-1">
<select class="form-control" id="selection2">
<option selected="selected">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>

<div class="form-group col-lg-offset-1 col-lg-10">
<button type="button" id="submit" class="btn btn-primary btn-lg">Sign in</button>
</div>
</form>

<p id="preview"></p>

Вот JQUery, который я пробовал.

<script type="text/javascript">
$("#submit").click(function () {
var FormVal = {
datafield1: $('#email').val(),
datafield2: $('#field2').val()
};

$.ajax({
type: "POST",
dataType: "json",
data: FormVal,
async: false,
success: function (response) {
$('#preview').html($('#email').val() + '<br />' + $('#selection1').val()) + '<br />' + $('#selection2').val());
}
});
});
</script>

спросил(а) 2021-01-19T16:22:23+03:00 9 месяцев назад
1
Решение
120

Вам не нужно проходить через все эти материалы AJAX, чтобы выполнить то, что вам нужно. Вы можете просто скрыть форму и затем установить значение в абзац #preview

$("#submit").click(function () {
//get value like this..
var datafield1 = $("#email").val();
//hiding the form
$("#form").hide(function () {
//setting the text to #preview
$('#preview').html(
$('#email').val() + '<br />' + $('#selection1').val() + '<br />' + $('#selection2').val());
});
});

Вот ссылка jsfiddle рабочего кода.

ответил(а) 2021-01-19T16:22:23+03:00 9 месяцев назад
46

$('#preview').html($('#email').val() + '<br />' + $('#selection1').val()) + '<br />' + $('#selection2').val());

Здесь у вас есть дополнительные круглые скобки: $('#selection1').val()). Вы можете использовать консоль своего браузера для отладки синтаксических ошибок.

ответил(а) 2021-01-19T16:22:23+03:00 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема