duanshan1856
duanshan1856
2017-03-07 05:58

尝试使用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 dousong2967 4年前

    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>
    
    点赞 评论 复制链接分享
  • dongzhengzhong1282 dongzhengzhong1282 4年前

    You are calling onclick with wrong parameter, onclick must be like:

    onclick="delete_row('<?php echo $row['sid'];?>');"
    

    Then, your jQuery function comment_here($post_id) is also wrong. You can't define variable as php using $. use function comment_here(post_id) instead. after this try to get value and print it first and use according to your needs.

    点赞 评论 复制链接分享
  • du229908 du229908 4年前

    You can follow this instruction from this site as it will be useful for you i think https://www.formget.com/javascript-submit-form/

    // Submit form with id function.
    function submit_by_id() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    if (validation()) // Calling validation function
    {
    document.getElementById("form_id").submit(); //form submission
    alert(" Name : " + name + " 
     Email : " + email + " 
     Form Id : " + document.getElementById("form_id").getAttribute("id") + "
    
     Form Submitted Successfully......");
    }
    }
    
    // Submit form with name function.
    function submit_by_name() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    if (validation()) // Calling validation function
    {
    var x = document.getElementsByName('form_name');
    x[0].submit(); //form submission
    alert(" Name : " + name + " 
     Email : " + email + " 
     Form Name : " + document.getElementById("form_id").getAttribute("name") + "
    
     Form Submitted Successfully......");
    }
    }
    
    // Submit form with class function.
    function submit_by_class() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    if (validation()) // Calling validation function
    {
    var x = document.getElementsByClassName("form_class");
    x[0].submit(); //form submission
    alert(" Name : " + name + " 
     Email : " + email + " 
     Form Class : " + document.getElementById("form_id").getAttribute("class") + "
    
     Form Submitted Successfully......");
    }
    }
    
    // Submit form with HTML <form> tag function.
    function submit_by_tag() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    if (validation()) // Calling validation function
    {
    var x = document.getElementsByTagName("form");
    x[0].submit(); //form submission
    alert(" Name : " + name + " 
     Email : " + email + " 
     Form Tag : <form>
    
     Form Submitted Successfully......");
    }
    }
    
    // Name and Email validation Function.
    function validation() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if (name === '' || email === '') {
    alert("Please fill all fields...!!!!!!");
    return false;
    } else if (!(email).match(emailReg)) {
    alert("Invalid Email...!!!!!!");
    return false;
    } else {
    return true;
    }
    }
    /* Below line is used for online Google font */
    @import url(https://fonts.googleapis.com/css?family=Raleway);
    h2{
    background-color: #FEFFED;
    padding: 30px 35px;
    margin: -10px -50px;
    text-align:center;
    border-radius: 10px 10px 0 0;
    }
    hr{
    margin: 10px -50px;
    border: 0;
    border-top: 1px solid #ccc;
    margin-bottom: 40px;
    }
    div.container{
    width: 900px;
    height: 610px;
    margin:35px auto;
    font-family: 'Raleway', sans-serif;
    }
    div.main{
    width: 300px;
    padding: 10px 50px 10px;
    border: 2px solid gray;
    border-radius: 10px;
    font-family: raleway;
    float:left;
    margin-top:60px;
    }
    input[type=text]{
    width: 100%;
    height: 40px;
    padding: 5px;
    margin-bottom: 25px;
    margin-top: 5px;
    border: 2px solid #ccc;
    color: #4f4f4f;
    font-size: 16px;
    border-radius: 5px;
    }
    label{
    color: #464646;
    text-shadow: 0 1px 0 #fff;
    font-size: 14px;
    font-weight: bold;
    }
    #btn_id,#btn_name,#btn_class,#btn_tag{
    font-size: 16px;
    background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
    border: 1px solid #e5a900;
    color: #4E4D4B;
    font-weight: bold;
    cursor: pointer;
    width: 47.5%;
    border-radius: 5px;
    margin-bottom:10px;
    padding: 7px 0;
    }
    #btn_id:hover,#btn_name:hover,#btn_class:hover,#btn_tag:hover{
    background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
    }
    #btn_name,#btn_tag{
    margin-left: 10px;
    }
    <html>
    <head>
    <title>Javascript Form Submit Example</title>
    <!-- Include CSS File Here -->
    <link rel="stylesheet" href="css/submit_javascript.css"/>
    <!-- Include JS File Here -->
    <script src="js/submit_javascript.js"></script>
    </head>
    <body>
    <div class="container">
    <div class="main">
    <form action="#" method="post" name="form_name" id="form_id" class="form_class" >
    <h2>Javascript Form Submit</h2>
    <label>Name :</label>
    <input type="text" name="name" id="name" placeholder="Name" />
    <label>Email :</label>
    <input type="text" name="email" id="email" placeholder="Valid Email" />
    <input type="button" name="submit_id" id="btn_id" value="Submit by Id" onclick="submit_by_id()"/>
    <input type="button" name="submit_name" id="btn_name" value="Submit by Name" onclick="submit_by_name()"/>
    <input type="button" name="submit_class" id="btn_class" value="Submit by Class" onclick="submit_by_class()"/>
    <input type="button" name="submit_tag" id="btn_tag" value="Submit by Tag" onclick="submit_by_tag()"/>
    </form>
    </div>
    </div>
    </body>
    </html>

    </div>
    
    点赞 评论 复制链接分享

相关推荐