尝试使用OnClick事件提交表单，也可以在FormData中附加值

Question

我正在尝试使用onclick事件提交表单，因为我还需要将值传递给该功能。但是，当我单击submit按钮时，页面重新加载并显示没有数据。另外，Textarea是空的，没有拾取值。

让我向您展示代码：

<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>

脚本：

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');
        }
    });
});
}

这是我的代码，但现在起作用。你能告诉我我在哪里错了吗？

编辑尝试：

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');
        }
    });    
});

编辑

$(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');
                  }

Answer 1

我添加了html5的数据属性，并尝试根据需要工作完美地工作，

您也可以在Ajax的数据中添加form.serialize（），

$(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>

Answer 2

您可以从本网站遵循此说明我认为这对您有用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 + " n Email : " + email + " n Form Id : " + document.getElementById("form_id").getAttribute("id") + "nn 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 + " n Email : " + email + " n Form Name : " + document.getElementById("form_id").getAttribute("name") + "nn 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 + " n Email : " + email + " n Form Class : " + document.getElementById("form_id").getAttribute("class") + "nn 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 + " n Email : " + email + " n Form Tag : <form>nn 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>

Answer 3

您正在用错误的参数调用onclick，onclick必须像：

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

然后，您的jQuery function comment_here($post_id)也是错误的。您无法使用$将变量定义为PHP。改用function comment_here(post_id)。此后，尝试获得价值并首先打印并根据您的需要使用。