当表单使用 ajax 和 Codeigniter 更改时自动更新 html
Auto Update html when form is change with ajax and Codeigniter
我需要在表单更改时自动更新答案。 如果我删除 e.preventDefault(); 但它会导致刷新页面. 我不想要它. 有什么技巧可以做到这一点吗?
查看表单1
<div>Some Content</div>
<div><?php echo($draft);?></div>
查看草稿网页
<p>This is array 1 : <?=$do->fill($keys[0]);?></p>
<p>This is array 2 : <?=$do->fill($keys[1]);?></p>
阿贾克斯
$(function() {
$(".auto_submit").change(function() {
$("form").submit();
});
});
$(function () {
$('form').on('submit', function (e) {
var url = $(location).attr('href');
e.preventDefault();
$.ajax({
type: 'post',
url: url,
data: $('form').serialize(),
success: function (e) {
console.log($('form').serialize());
}
});
});
});
查看表单
<form class="auto_submit" action="<?=base_url('web/dashboard/create/html1');?>" method="post">
<input type="text" name="answerswer[]">
<input type="text" name="answerswer[]">
</form>
控制器 CI
function create($doc){
if(!isset($_POST['answer'])) $data['keys'] = null;
else $data['keys'] = $_POST['answer'];
$data['do'] = $this;
if($doc == 'html1'){
$data['draft'] = $this->load->view('doc/html1', $data, true);
$this->template->admin_render('form/form1', $data);
}
}
如果您想自动更新
而不重新加载整个页面,只需刷新一个div,
<div id="div1">
<div id="div2">
<p>This is array 1 : <?=$do->fill($keys[0]);?></p>
<p>This is array 2 : <?=$do->fill($keys[1]);?></p>
</div>
</div>
jquery:
$(function() {
$(".auto_submit").change(function() {
$("form").submit();
});
});
$(function () {
$('form').on('submit', function (e) {
var url = $(location).attr('href');
e.preventDefault();
$.ajax({
type: 'post',
url: url,
data: $('form').serialize(),
success: function (e) {
console.log($('form').serialize());
$('#div1').load(url + ' #div2'); //note: the space before #div2 is very important
}
});
});
});
如果有帮助,请更新我。
编辑:然后直接在<P>
标签上附加您的答案,而无需发布表单
<p>This is array 1 : <span id="answerswer1"><?=$do->fill($keys[0]);?></span></p>
<p>This is array 2 : <span id="answerswer2"><?=$do->fill($keys[1]);?></span></p>
查看表单:
<form class="auto_submit" action="<?=base_url('web/dashboard/create/html1');?>" method="post">
<input id="inputanswer1" type="text" name="answerswer[]">
<input id="inputanswer2" type="text" name="answerswer[]">
</form>
jquery:
$(function() {
$(".auto_submit").change(function() {
//$("form").submit();
var answer1 = $("#inputanswer1").val(),
answer2 = $("#inputanswer2").val();
$("#answer1").text(answer1);
$("#answer2").text(answer2);
});
});
相关文章:
- $Scope变量在HTML中不更新,尽管在控制器中不断更新
- HTML动态更新滑块输入
- AngularJS$apply有时不会;当在highchart中使用click事件时,t触发更新{{}}中html标记中
- 用jQuery.html更新span内部html在IE中不起作用
- jquery html更新可以在电脑上使用,但不能在智能手机上使用
- 使用HTML更新JavaScript对象
- Angular.js:如何将数据从一个HTML更新到使用相同控制器的另一个HTML
- 简单的内部HTML更新不起作用
- 如何根据用户输入 HTML 更新多个 SPAN 元素
- 如何在现有JQuery数据表上使用HTML更新现有行
- 点击使用jQuery用HTML更新DIV
- 滚动条在使用$selector.html()更新内容后重置
- 从jquery ajax调用html更新多个元素
- HTML更新没有反映在AngularJS中
- 如何从HTML更新MySQL数据库
- 我正在尝试使用按钮创建一个动态HTML更新
- 不使用HTML 5更新查询字符串(没有重定向)
- 点击Sencha touch中html更新后新元素上的事件
- 使用Javascript/HTML更新两组值的按钮
- 使用Javascript从HTML更新MySQL数据