HTML

Question

使用e.preventDefault();值不插入数据库，如果注释e.preventDefault();数据插入数据库，没有页面重新加载如何使用下面的javascript代码插入数据请建议我

插入表单

<form class="form-horizontal msg_fixed_bottom send_message_form"   method="POST" role="form" action="<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_communication"> 
   <div class="panel-footer" id="myForm" >
      <div class="input-group submit_group">
          <input id="messagee" name="messagee" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
             <span class="input-group-btn">
             <button class="btn btn-primary btn-sm" id="submit" name="submit">Send</button>
           </span>
       </div>
    </div>
 </form>

脚本

 <script>
 $(document).ready(function () {

    scrollDown();

    $("#submit").click(function (e) {

        e.preventDefault();

        var message = $("#messagee").val();

        $('#chat_log').append('<div class="row msg_container base_sent active"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>' + message + '</p></div></div></div>');
        $('#messagee').val('');

        scrollDown();
   });
});


function scrollDown() {
  $('.msg_container_base').animate({scrollTop: $('.msg_container_base').prop("scrollHeight")}, 0);
}

</script>

Answer 1

HTML

<form id="data_form" class="form-horizontal msg_fixed_bottom send_message_form"> 
<div class="panel-footer" id="myForm" >
    <div class="input-group submit_group">
        <input id="messagee" name="messagee" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" id="submit" name="submit" type="submit">Send</button>
        </span>
    </div>
</div>

的JavaScript

    $(document).ready(function(){
    $('#data_form').on('submit', function(e){
        var form_data = $(this).serialize();
        $.ajax({
              type: "POST",
              url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_communication',
              data: form_data,
              success:function(data)
              {
                alert('Success');
              },
              error:function()
              {
                alert('failed');
              }
        });
        e.preventDefault();
    });
});

Answer 2

插入表单

<form class="form-horizontal msg_fixed_bottom send_message_form" id="data_form"  method="POST" role="form" action="#"> 
                                    <div class="panel-footer" id="myForm" >
                                        <div class="input-group submit_group">



                                            <input id="messagee" name="messagee" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />


                                            <span class="input-group-btn">
                                                <button class="btn btn-primary btn-sm" id="submit" name="submit">Send</button>
                                            </span>
                                        </div>
                                    </div>
                                </form>

<强>的javascript

<script>
        $(document).ready(function(){

    $('#data_form').on('submit', function(e){

        var form_data = $(this).serialize();
        $.ajax({
              type: "POST",
              url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_communication',
              data: form_data,
              success:function(data)
              {

                 var message = $("#messagee").val();
                    $('#chat_log').append('<div class="row msg_container base_sent active"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>' + message + '</p></div></div></div>');

                    scrollDown();
                    function scrollDown() {
                $('.msg_container_base').animate({scrollTop: $('.msg_container_base').prop("scrollHeight")}, 0);
            }
              },
              error:function()
              {
                alert('failed');
              }
        });
        e.preventDefault();
    });
});
        </script>

Answer 3

您可以使用ajax提交数据而无需重新加载页面。

<script type="text/javascript">
// Ajax post
$(document).ready(function() {
    $(".submit").click(function(event) {
        event.preventDefault();
        var messagee= $("input#messagee").val();

        jQuery.ajax({
            type: "POST",
            url: "<?php echo base_url(); ?>" + "your_controller/your_function",
            dataType: 'json',
            data: {
                messagee: messagee                    
            },
            success: function(res) {
                if (res) {
                    // Show Entered Value
                   //sussess message here

                }
            }
        });
    });
});

你的控制器：

 // This function call from AJAX
public function your_function() {
    $data = array(
    'messagee' => $this->input->post('messagee')    
    );

    //Either you can print value or you can send value to database
    echo json_encode($data);
}

Answer 4

您的表单：

<form class="form-horizontal msg_fixed_bottom send_message_form" method="POST" role="form" id="msg-form"> 
<div class="panel-footer" id="myForm" >
    <div class="input-group submit_group">
        <input id="messagee" name="messagee" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
        <span class="input-group-btn">
        <input type="submit" class="btn btn-primary btn-sm" id="submit" name="submit" value="Submit">
        </span>
     </div>
</div>
</form>

你的ajax

<script>
   $(document).ready(function(){
       $("#msg-form").submit(function(e){
           e.preventDefault();
           var msg = $("#messagee").val();
           $.ajax({
              type: "POST",
              url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_communication',
              data: {msg:msg},
              success:function(data)
              {
                alert('SUCCESS!!');
              },
              error:function()
              {
                alert('fail');
              }
        });
    });
});
</script>

我认为这样可以。现在，您可以自行在成功区域添加其他追加功能。感谢。

没有页面重新加载如何使用下面的javascript插入数据

4 个答案:

HTML

的JavaScript