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="ment_here('+post_id+');">Comment</button></form>
The script:
function ment_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_ment"); ?>',
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('#ment_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_ment"); ?>',
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','#ment_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_ment"); ?>',
data: {textdata:textdata},
dataType: 'json',
success:function(data)
{
alert('you have like this');
}
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="ment_here('+post_id+');">Comment</button></form>
The script:
function ment_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_ment"); ?>',
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('#ment_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_ment"); ?>',
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','#ment_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_ment"); ?>',
data: {textdata:textdata},
dataType: 'json',
success:function(data)
{
alert('you have like this');
}
- you are going on old way of javascript. – Tejas Mehta Commented Mar 7, 2017 at 6:00
- what else can i do ? @TejasMehta – Himanshu Goyal Commented Mar 7, 2017 at 6:00
- 1 Use jQuery "on " selector with button and onClick you can pass function(e) and e,preventDefault(); will not allow you to submit form. – Tejas Mehta Commented Mar 7, 2017 at 6:01
- stackoverflow./a/7056673/6369494 check this answer – Tejas Mehta Commented Mar 7, 2017 at 6:02
-
1
It's
jQuery('#ment_button').on('click',function(e){notjQuery('#ment_button').on('onclick',function(e){.clickvsonclick– Rasclatt Commented Mar 7, 2017 at 6:23
3 Answers
Reset to default 1I 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_ment',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./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_ment" data-postId="12">Comment</button></form>You can follow this instruction from this site as it will be useful for you i think https://www.formget./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./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>You are calling onclick with wrong parameter, onclick must be like:
onclick="delete_row('<?php echo $row['sid'];?>');"
Then, your jQuery function ment_here($post_id) is also wrong. You can't define variable as php using $. use function ment_here(post_id) instead.
after this try to get value and print it first and use according to your needs.