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

您可以按照本网站的说明进行操作它会对你有用我认为 https://www.formget.com/javascript-submit-form/

＆＃13;

// 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") + "\n\n 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") + "\n\n 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") + "\n\n 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>\n\n 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;
}
}

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 2

我添加了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 3

您使用错误的参数呼叫onclick，onclick必须如下：

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

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

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

3 个答案: