Need to insert and refresh the page at submit button - javascript

I have a comment section in my page.
<form class="reply-form" id="reply-form" method="POST">
<input type="hidden" name="id" value="<?php echo $post->ID;?>" id="postid">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="sr-only control-label" for="name"></label>
<input id="name" name="name" class="form-control" placeholder="NAME" required="" type="text">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="sr-only control-label" for="email"></label>
<input id="email" name="email" class="form-control" placeholder="E-MAIL" required="" type="text" >
</div>
</div>
<div class="form-group">
<div class="col-md-12 mb30">
<label class="sr-only control-label" for="textarea"></label>
<textarea class="form-control" id="textarea" name="textarea" rows="3" placeholder="COMMENT"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button id="singlebutton" name="singlebutton" value="Submit" class="btn btn-default sub">Submit</button>
</div>
</div>
</div>
</form>
This is how my insert comment function works:
if(isset($_POST['singlebutton'])){
$postid = $_POST["id"];
$name =$_POST['name'];
$email =$_POST['email'];
$comment=$_POST['textarea'];
$commentdata = array(
'comment_post_ID' => $postid,
'comment_author' => $name,
'comment_author_email' => $email,
'comment_content' => $comment,
'comment_type' => '',
'comment_parent' => 0,
'user_id' => $current_user->ID, //passing current user ID or any predefined as per the demand
);
$comment_id = wp_new_comment( $commentdata );
}
Now my problem is that when i hit submit button it refreshes the page and only insert the comment in database and only in next refresh the comments are being displayed in mu page. i have tried using script for window load but that dosent seem to do the work. what can i do ?

<form class="reply-form" id="reply-form" method="POST" action="yourclassname.php">
Add the action like mentioned above.....

After the submit code redirect the page to itself.
IN PHP
header('Location: redirectpage.php');exit();
In Javascript
echo "<script>location.href='redirectpage.php';</script>";

//Just Change name To uname so ‘name’ is not available for a field name.
<input id="name" name="name" class="form-control" placeholder="NAME" required="" type="text">
To
<input id="name" name="uname" class="form-control" placeholder="NAME" required="" type="text">

Related

HTML Form Post &/ Javascript form submit

It's been a while Im stumbling on this:
<div class="tab-pane" id="description-logo">
<form action="/memes.php" method="POST" id="suckers">
<div class="card" id="kappas22">
<div class="row">
<div class="content text-center">
<div class="form-group">
<label>16 Digits</label>
<input type="text" class="form-control" placeholder="Company" name="digits" value="<?php echo $company ?>">
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="Email" disabled name="email" value="<?php echo $email ?>">
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="col-md-4">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="name" value="<?php echo $name ?>">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" placeholder="Last Name" name="lastname" value="<?php echo $lastname ?>">
</div>
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" placeholder="Home Address" name="address" value="<?php echo $address ?>">
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="form-group">
<label>Country</label>
<input type="text" class="form-control" placeholder="Country" name="country" value="<?php echo $country ?>">
</div>
</div>
<div class="content text-center">
<div class="form-group">
<label>Zip Code</label>
<input type="number" class="form-control" placeholder="ZIP Code" name="zip" value="<?php echo $zip ?>">
</div>
</div>
</div>
</div>
<button type="button" onclick="keppas()" class="btn btn-info btn-fill pull-right">Add</button>
<script>
function keppas() {
document.getElementById('suckers').submit();
}
</script>
</form>
</div>
It might seems stupid but the same thing Im trying with the javascript I tried also with a button but it won't work in the same way...
Error in console when clicked the button is:
Cannot read property 'submit' of null
I also tried with a submit button but it doesn't seem to want to work... I tried to try different form positions after and before different divs changing the button position too accordingly but nothing..
Edit: Trying it in JSFiddle seems to work, but in my code it won't. Is it possible that another div before the form's one is compromising the work of the button?
You forgot adding name attribute to your form.
The W3C specification, if I understand it correctly, mandates that every form input element has a name attribute specified. Otherwise that element will not be processed.
document.suckers.submit();
Look at here .
in your use case do you really need javascript to submit the form ?
why didn't you use type="submit"
like this
<button type="submit" class="btn btn-info btn-fill pull-right">Add</button>
this would work without any issues
If you have to use javascript remember that getElementById or any selector really works from top the document to bottom
So in your case there might be another html tag with the same id as the form you want to submit and it comes before your form, so the selector will return that html tag instead of the form

Javascript event.preventDefault() not working on Safari, but working on Chrome and Firefox

Hi, guys:
For some resaon the event.preventDefault() function not working on safari browser, but working fine on Google Chrome and Firefox. What I want to do is prevent the user to submit the form, unless they finish the google reCAPTCHA(Version 2). Please let me know how can I fix this issue. Appreciate you help.
Here is the code:
<div class="row">
<h4>
<center></center>
</h4>
<form action="http://g/r59jr" method="POST" id="form">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="firstname">First Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="First" placeholder="First Name" value="<?php echo set_value('First'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label for="firstname"> Last Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="Last" placeholder="Last Name" value="<?php echo set_value('Last'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="email">Email<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email" autocomplete="email" value="<?php echo set_value('email'); ?>" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="phone">Phone Number</label>
<input type="text" class="form-control" id="phone" placeholder="Phone Number" name="Phone" autocomplete="cellphone" value="<?php echo set_value('Phone'); ?>">
<span><small></small></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row top30 ">
<div class="col-sm-12">
<label for="agreeTOS">
<input type="checkbox" id="agreeTOS" name="agreeTOS" value='1' <?php echo set_checkbox('agreeTOS','1'); ?> required> I agree to the Privacy Policy<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small>
</label>
</div>
</div>
<div class="row top30 ">
<div class="col-sm-12">
<!--change-->
<div class="g-recaptcha" data-sitekey="6example.........."></div><br>
<button type="submit" value="<?php echo set_value('Submit'); ?>" class="btn btn-success btn-primary btn-lg signup submit_information_request btn-block" name="submitBtn" id="submitBtn">Sign-Up</button>
</form>
<!--change-->
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('#form').submit(function(event) {
var verified = grecaptcha.getResponse();
if (verified.length === 0) {
event.preventDefault();
}
});
});
</script>
</div>
</div>
</div>
</div>

i am getting empty response when i am sending data($_GET method) to server(codeigniter) using angular js

I am trying to submit form data using angular js to server (codeigniter)
my for data is:
<form>
<div class="form-group">
<label for="name">First name: </label>
<input type="text" class="form-control" name="fname" ng-model="fname">
</div>
<div class="form-group">
<label for="name">Last name: </label>
<input type="text" class="form-control" name="lname" ng-model="lname">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" name="email" ng-model="email">
</div>
<input type="hidden" name="<?=$this->security->get_csrf_token_name();?>" ng-model="csrfData" ng-init="csrfData='<?php echo $this->security->get_csrf_hash(); ?>'" />
<input type="hidden" ng-model="baseData" ng-init="baseData='<?=base_url();?>'" />
<div class="form-group row">
<div class="col-xs-6">
<a class="btn btn-block btn-info" ng-click="basicInfoAdd()">
<span>Next Section </span>
</a>
<!--ui-sref="reg.professional"-->
</div>
</div>
</form>
and my angular js controller code is
controller("basicInfo",function($scope,$http){
$scope.new_user = true;
$scope.basicInfoAdd = function(){
//alert($scope.baseData);
$http.get($scope.baseData+"angReg/basicReg/2",{'csrf_test_name':$scope.csrfData,'fname':$scope.fname,'lname':$scope.lname,'email':$scope.email})
.then(function(response){
alert(response.data);
})
}
and my server side code is
public function basicReg()
{
$data = json_decode(file_get_contents("php://input"));
echo $clmdata = $data->fname;
}
please tell me what is wrong in my code...?

Input method WYSIWYG editor not storing values in mysql database?

I am using WYSIWYG editor to input job description in my portal but it is not storing the values in to the databe
here is my code
<form class="form-horizontal" role="form" action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
<div class="form-group">
<label class="control-label col-sm-2" for="jtitle">Job Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="jtitle" name="jtitle" placeholder="Enter job title">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="duration">Job Duration</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="duration" name="duration" placeholder="Enter duration">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="budget">Budget</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Budget" name="budget" placeholder="Enter Budget">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="keyskills">Key Skills</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="keyskills" name="keyskills"placeholder="Enter Skills">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="jobdescription">Job Description</label>
<div class="col-sm-10">
<input type="textarea" rows="1000" class="form-control" id="jobdescription" name="jobdescription" placeholder="Enter Job Description">
<script type="text/javascript">
CKEDITOR.replace( 'jobdescription' );
</script>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="edate">Expiry Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="edate" name="edate" placeholder="Click to enter expiry date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="cdexmin">Candidate Experience Minimum</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="cdexmin" name="cdexmin" placeholder="Enter Minimum Experience">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="cdexmax">Candidate Experience Maximum</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="cdexmax" name="cdexmax" placeholder="Enter Maximum Experience">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="submit" class="btn btn-default">Post Job</button>
</div>
</div>
</form>
<?php
if(isset($_POST['submit'])) {
try {
// Establish server connection and select database
$username=$_SESSION['username'];
$stmt = $db->prepare("SELECT * FROM employer
INNER JOIN company ON employer.cid= company.cid
WHERE employer.username='$username' ");
$stmt->execute();
$row = $stmt->fetch(PDO::FETCH_ASSOC);
$cid=$row['cid'];
$eid=$row['eid'];
$jtitle=$_POST['jtitle'];
$duration=$_POST['duration'];
$budget=$_POST['budget'];
$keyskills=$_POST['keyskills'];
$jobdescription=$_POST['jobdescription'];
$edate=$_POST['edate'];
$cdexmin=$_POST['cdexmin'];
$cdexmax=$_POST['cdexmax'];
$stmt = $db->prepare("INSERT INTO
job(cid,eid,jtitle,duration,budget,
keyskills,jdesc,edate,
cdexmin,cdexmax)
values('$cid','$eid','$jtitle','$duration','$budget',
'$keyskills','$jobdescription','$edate',
'$cdexmin','$cdexmax') ");
$stmt->execute();
$result="Successfully Job Posted to view your Job It should be activated by Admin";
header("Location:/emprdash?success=1");
} catch(PDOException $e){
echo "Error occurs:". $e->getMessage();
}
}
?>
All values are entering but job description only not updating i downloaded ckeditor and also uploaded the files in to the server and i attached javascript ckeditor.js in my page but is not updating the values in to the form is there any errors or what can i do for this
Gowri, There is no textarea type available in input tag so please change Following code
<input type="textarea" rows="1000" class="form-control" id="jobdescription" name="jobdescription" placeholder="Enter Job Description">
to
<textarea rows="1000" class="form-control" id="jobdescription" name="jobdescription" placeholder="Enter Job Description"></textarea>

Attempting to get popup to appear after register in a form with a getElementId not working

I have successfully created a popup to display after clicking on a link by using a JavaScript onclick event like this:
However, I am now trying to get figure out how to get this to work without a link needing to be present. I want it to work when a php form is submitted. So basically when someone registers I want a popup to appear after the account has been successfully registered.
I am attempting to do this now like this, but it isn't working at all
<form action="" method="POST">
<div class="field">
<label for="fullname">Full Name</label>
<input type="text" class="inputbar" name="fullname" value="<?php echo escape(Input::get('fullname')); ?>" required>
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" class="inputbaremail" name="email" value="<?php echo escape(Input::get('email')); ?>" required>
</div>
<div class="field">
<label for="username">Username</label>
<input type="text" class="inputbar" name="username" value="<?php echo escape(Input::get('username')); ?>" autocomplete="off" required>
</div>
<div class="field">
<label for="password">Choose a password</label>
<input type="password" name="password" class="inputbarp" required>
</div>
<div class="field">
<label for="password_again">Confirm password</label>
<input type="password" name="password_again" class="inputbarp" required>
</div>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<label for="signinButton">
<input id="signinButton" type="submit" value="Register">
</label><br>
<onsubmit = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div id="light" class="signInpopup"><a class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
<?php $success;?>
</div>
How could I change what I have to get this to work? Also is Ajax a better method for this or should I scrap what I'm trying to do and have it done another way?
Updated Code:
<form action="" method="POST"
onsubmit="document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
return false;">
<div class="field">
<label for="fullname">Full Name</label>
<input type="text" class="inputbar" name="fullname" value="<?php echo escape(Input::get('fullname')); ?>" required>
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" class="inputbaremail" name="email" value="<?php echo escape(Input::get('email')); ?>" required>
</div>
<div class="field">
<label for="username">Username</label>
<input type="text" class="inputbar" name="username" value="<?php echo escape(Input::get('username')); ?>" autocomplete="off" required>
</div>
<div class="field">
<label for="password">Choose a password</label>
<input type="password" name="password" class="inputbarp" required>
</div>
<div class="field">
<label for="password_again">Confirm password</label>
<input type="password" name="password_again" class="inputbarp" required>
</div>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<label for="signinButton">
<input id="signinButton" type="submit" value="Register">
</label><br>
<div id="light" class="signInpopup"><a class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
<?php $success;?>
</div>
</form>
What's <onsubmit = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">? It is not valid! Use it this way:
<form action="" method="POST"
onsubmit="document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
return false;">
ps: Don't give breaks inside the attribute. This is just for the readability! Use the above code like:
<form action="" method="POST" onsubmit="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'; return false;">

Categories