当表单使用 ajax 和 Codeigniter 更改时自动更新 html - Auto Update html when form is change with ajax and Codeigniter

Auto Update html when form is change with ajax and Codeigniter

本文关键字：html 更新 Codeigniter 表单 ajax | 更新日期: 2023-09-27

我需要在表单更改时自动更新答案。如果我删除 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);
        });
    });