duanshan1856 2017-03-07 05:58
浏览 150
已采纳

尝试使用onclick事件提交表单,也在formData中附加值

I am trying to submit a form using onclick event since I need to pass a value to that function as well. But when I click the submit button, the page reloads and shows no data. Also, the textarea is empty and is not picking up the values.

Let me show you the code:

<form action="" id="form_content">
    <textarea name="textdata" id="content" cols="50" rows="50" class="form-control message" placeholder="Whats on your mind ?"></textarea>
    <button type="submit" onclick="comment_here('+post_id+');">Comment</button></form>

The script:

function comment_here($post_id) {
    // alert($post_id);
    document.getElementById("form_content").submit();

    var Post_id=$post_id;
    var User_id = $('.id_data').attr('value');
    var textdata = $("#content").val();
    alert(textdata);

    jQuery.ajax({
        type:'POST',
        url:'<?php echo base_url("user/post_comment"); ?>',
        data: {Post_id:Post_id,User_id:User_id,textdata:textdata},
        dataType: 'json', 
        success:function(data) {
            alert('you have like this');
        }
    });

});
}

This is my code, but its now working. Can you tell me where I am wrong?

edited attempt:

jQuery('#comment_button').on('onclick',function(e){
    alert('data');
    var Post_id=$post_id;
    var User_id = $('.id_data').attr('value');
    var textdata = $("#content").val();
    alert(textdata);

    jQuery.ajax({
        type:'POST',
        url:'<?php echo base_url("user/post_comment"); ?>',
        data: {Post_id:Post_id,User_id:User_id,textdata:textdata},
        dataType: 'json', 
        success:function(data) {
            alert('you have like this');
        }
    });    
});

edited

$(document).on('click','#comment_button',function(e){
    // this will prevent form and reload page on submit.
    e.preventDefault();
    var Post_id=$post_id;
    var User_id = $('.id_data').attr('value');
    // here you will get Post ID

     var textdata = $('textarea#content').val();
    alert(textdata);
   // Add your Ajax call here.
   $.ajax({
                  type:'POST',
                  url:'<?php echo base_url("user/post_comment"); ?>',
                  data: {textdata:textdata},
                  dataType: 'json', 
                  success:function(data)
                  {
                    alert('you have like this');
                  }
  • 写回答

3条回答 默认 最新

  • dousong2967 2017-03-07 06:25
    关注

    I have added Data attribute of the HTML5 and try this code it is working perfectly as you want,

    You can add form.serialize() also in the data of the ajax,

    $(document).on('click','#button_comment',function(e){
        // this will prevent form and reload page on submit.
        e.preventDefault();
        
        // here you will get Post ID
        my_post_id=$(this).attr('data-postId');
        var User_id = $('.id_data').attr('value');
        var textdata = $('textarea#content').val();
        alert(textdata);
    
       // Add your Ajax call here.
        
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form action="" id="form_content">
    
    <textarea name="textdata" id="content" cols="25" rows="10"  class="form-control message"  placeholder="Whats on your mind ?"></textarea>
    
    <!-- use Data attribute that save post id on submit button -->
    
    <button type="submit" id="button_comment" data-postId="12">Comment</button></form>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥85 maple软件,solve求反函数,出现rootof怎么办?
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题