基本上我要做的就是将表单数据发送到表单的相同位置。
代码应该:
- 获取#submit 点击操作
- 提取#email、#selection1 和#selection2 的数据
- 隐藏表格#form
- 在#preview 段落中显示#email、#selection1 和#selection2
我没有 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>