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

Posted 2023-05-07

【中文标题】尝试使用 onclick 事件提交表单，还要在 formData 中附加值

【英文标题】：Trying to submit a form using onclick event, also append values in formData

【发布时间】：2017-07-27 05:49:29

【问题描述】：

我正在尝试使用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');
                  

【问题讨论】：

你正在使用旧的javascript方式。

我还能做什么？ @TejasMehta

使用带有按钮和onClick的jQuery“on”选择器可以传递function(e)和e,preventDefault();将不允许您提交表单。

***.com/a/7056673/6369494检查这个答案

这是jQuery('#comment_button').on('click',function(e) 不是jQuery('#comment_button').on('onclick',function(e)。 click 与 onclick

【参考方案1】：

我已经添加了 html5 的 Data 属性并尝试使用此代码，它可以按照您的要求完美运行，

你也可以在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>

【讨论】：

感谢@TejasMehta，我得到了“点击”功能，但 textdata 值没有通过它是空的。

你可以通过这个 $('textarea#content').val() @HimanshuGoyal

***.com/questions/10507294/… 检查此链接以获取 textarea 值

这是我现在使用的，但是警报时的文本数据是空的

删除 textarea html 标签之间/之间的空格，有时它也会导致此类问题，也可以尝试使用 jQuery 而不是 $

【参考方案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") + "\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;

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

【讨论】：

我已经尝试过该方法，但我无法使用名称 @BKarthikKumar 从中选择值

// 姓名和邮箱验证功能。函数验证() var name = document.getElementById("name").value; var email = document.getElementById("email").value; var emailReg = /^([w-.]+@([w-]+.)+[w-]2,4)?$/; if( name ==='' || email ==='') alert("请填写所有字段...!!!!!!");返回假； else if(!(email).match(emailReg)) alert("无效的电子邮件...!!!!!!");返回假； else 返回真； @HimanshuGoyal 只需将其与上面的代码一起使用，您就可以使用名称从中选择值

【参考方案3】：

你用错误的参数调用onclick，onclick 必须是这样的：

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

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

【讨论】：

onclick=function('.php标签和你要传递的变量。')