Develop Reference

reCAPTCHA form submitting twice on second submit

I am creating a form using reCAPTCHA v2 and want the form to be able to be submitted again without reloading the page. When I submit the form for the first time, it works as expected. However, when I submit the form again without reloading the page, my CaptchaValidate function will be called twice, first returning false, then returning true. Why is this happening? Any help would be brilliant, thanks.
HTML
<form id="form" method="POST">
<label for="name">Name</label>
<input class="form-control" id="name" name="name">
<label for="age">Age</label>
<input class="form-control" id="age" name="age">
<button class="g-recaptcha" data-sitekey="myKey" data-callback="onSubmit" type="submit">Submit</button>
</form>
Javascript
function onSubmit(response) {
$('#form').submit(function (e) {
e.preventDefault();
const formData = $(this).serializeArray();
$.ajax({
url: '/Home/CaptchaValidate',
type: 'POST',
dataType: 'text',
data: { dataToken: response },
success: function (resultData) {
if (resultData == 'true') {
//do something
}
else {
$('.error-message').html('could not submit form');
}
},
error: function (err) {
console.log(err);
}
})
}).submit();
grecaptcha.reset();
}
Controller
[HttpPost]
public async Task<string> GetCaptchaData(string dataToken)
{
HttpClient httpClient = new HttpClient();
string secretKey = "mySecretKey";
var res = httpClient.GetAsync("https://www.google.com/recaptcha/api/siteverify?secret=" + secretKey + "&response=" + dataToken).Result;
if (res.StatusCode != HttpStatusCode.OK)
return "false";
string JSONres = res.Content.ReadAsStringAsync().Result;
dynamic JSONdata = JObject.Parse(JSONres);
if (JSONdata.success != "true")
return "false";
return "true";
}

try use e.stopImmediatePropagation();
it stops the rest of the event handlers from being executed.
function onSubmit(response) {
$('#form').submit(function (e) {
e.preventDefault();
e.stopImmediatePropagation(); // new line
const formData = $(this).serializeArray();
$.ajax({
url: '/Home/CaptchaValidate',
type: 'POST',
dataType: 'text',
data: { dataToken: response },
success: function (resultData) {
if (resultData == 'true') {
//do something
}
else {
$('.error-message').html('could not submit form');
}
},
error: function (err) {
console.log(err);
}
})
}).submit();
grecaptcha.reset();
}

AJAX call in external JavaScript file not reaching ActionResult in controller

I am trying to check if an email address exists in the database. I have an external JavaScript file that I am using to call my jQuery (to keep my view clean). Perhaps it is because I am running with SSL enabled? (I am using https)
Function in external js file:
function checkemail() {
var email = $("#email").val();
$.ajax({
url: "/Account/CheckEmailExists/",
data: JSON.stringify({ p: email }),
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
alert(data)
}
});
}
Action in Controller:
public ActionResult CheckEmailExists(string p)
{
bool bEmailExists = false;
using (RBotEntities EF = new RBotEntities())
{
var query = (from U in EF.AspNetUsers
where U.Email == p
select U).FirstOrDefault();
if(query.Email != null)
{
bEmailExists = true;
}
else
{
bEmailExists = false;
}
}
return Json(bEmailExists, JsonRequestBehavior.AllowGet);
}
I seem to be getting an error stating the following:
XML Parsing Error: no root element found Location:
https://localhost:44347/Account/CheckEmailExists/ Line Number 1,
Column 1:
My understanding would be that this ActionResult does not exist. But it does ?
Am I doing something wrong, or is there a reason why an ActionResult can not be called via an external JavaScript file ?

Try this
In Controller
[httppost]
public ActionResult CheckEma.........
In JS
function checkemail() {
var email = $("#email").val();
$.ajax({
url: "/Account/CheckEmailExists/",
data: { p: email },
type: "POST",
success: function (data) {
alert(data)
}
});
}

No need for Json.Stringify and ContentType here
function checkemail() {
var email = $("#email").val();
$.ajax({
url: "/Account/CheckEmailExists",
data: { p: email },
type: "POST",
success: function (data) {
alert(data)
}
});
}

So I found out what was causing the issue...
Above my Action result, I needed to add [AllowAnonymous] data annotation and then it reached my ActionResult! I would prefer to not allow anonymous, but it works and I wanted to share this in case it helps someone else. Below is my code:
ActionResult:
[AllowAnonymous]
public ActionResult CheckEmailExists(string p)
{
bool bEmailExists = false;
using (RBotEntities EF = new RBotEntities())
{
var query = (from U in EF.AspNetUsers
where U.Email == p
select U).FirstOrDefault();
if (query.Email != null)
{
bEmailExists = true;
}
else
{
bEmailExists = false;
}
}
return Json(bEmailExists, JsonRequestBehavior.AllowGet);
}
JavaScript function in JavaScript File:
function checkemail() {
var email = $("#email").val();
var bReturnedValue = false;
$.ajax({
url: "/Account/CheckEmailExists/",
data: { p: email },
async: false,
success: function (data) {
if(data)
{
bReturnedValue = true;
}
else
{
bReturnedValue = false;
}
}
});
return bReturnedValue;
}
And this is how I initiated it(I am doing a popover to specify that the email exists):
$("#createacc_next").click(function () {
var bEmailExists = false;
bEmailExists = checkemail();
if (bEmailExists) {
$("#email").attr("disabled", false).css("border-color", "red");
$('#email').popover({ title: 'Attention', content: 'Email address already exists', placement: 'top', trigger: 'focus' });
Email_Validation_Passed = false;
}
})

Show Json Data after pushing Enter instead of Click ob submit

I have a MVC view that by clicking on submit button it post Data using Ajax to the Controller. The controller return json result that is messages and I show them on the View. The problem is when I click on Submit button it working fine but when I push Enter after show the Thank you page again it post to the controller method and show a page with json Data as bellow: (I need to make the Enter work as pushing Submit as well)
{"status":"success","message":""}
This is my View:
#using (Html.BeginForm("forgotPassword", "Home", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div>
<div>Email Address</div>
<div><input type="email" name="email" placeholder="example#email.com" id="email" class="forgot-password-textbox"></div>
<div><label id="Message" class="forgot-password-error-message"></label></div>
<div><input type="button" value="Submit" id="btn-reset-password" onclick="resetPasswordHandler()" class="orange-button forgot-password-button"></div>
</div>
}
This is my Controller Method:
[HttpPost]
[Route("forgotPassword")]
public async Task<JsonResult> ForgotPassword(ForgotPasswordRequest forgotPasswordRequest)
{
...
try
{
if (ModelState.IsValid)
{
if (!string.IsNullOrEmpty(forgotPasswordRequest.Email))
{
users = await authenticationService.GetUserByEmailAsync(forgotPasswordRequest.Email);
if (users.Any())
{
if(users.FirstOrDefault().StatusId == 2)
{
return Json(new { status = "error", message = Constants.MessageStrings.ForgotPasswordDisabledUser });
}
//New User without creating password
if (string.IsNullOrEmpty(users.FirstOrDefault().PasswordHash))
{
return Json(new { status = "error", message = Constants.MessageStrings.ForgotPasswordDisabledUser });
}
....
}
}
else
{
ModelState.AddModelError("", Constants.MessageStrings.NoUser);
return Json(new { status = "error", message = Constants.MessageStrings.NoUser });
}
}
}
else
{
.......
return Json(new { status = "error", message = Constants.MessageStrings.RequiredFields });
}
and this is my Ajax to call controller:
function resetPasswordHandler() {
var postResult = null;
var data = {
Email: document.getElementById('email').value
};
var path = "/forgotPassword";
var errorMessage = document.getElementById('Message');
$.ajax({
dataType: "text",
url: path,
data: data,
type: "POST",
cache: false,
success: function (result) {
postResult = $.parseJSON(result);
if (postResult.status == "success") {
$('#forgot').hide();
$('#forgot-thank-you').show();
return false;
}
else {
errorMessage.innerHTML = postResult.message;
}
},
error: function () {
errorMessage.innerHTML = "An error occured";
}
});
return false;
};
window.onkeydown = function () {
if (window.event.keyCode == '13') {
resetPasswordHandler();
}
}

return Json(new { status="success",message="what ever your msg"}, JsonRequestBehavior.AllowGet);

I would remove the click handler from the button, and handle the submit event of the relevant form.
You should give an id for easier targeting
#using (Html.BeginForm("forgotPassword", "Home", FormMethod.Post, new { id = "reset-form" }))
And simplify your script (since you are using jQuery) to
function resetPasswordHandler(event) {
var postResult = null,
data = {
Email: $('#email').val()
},
path = "/forgotPassword",
errorMessage = $('#Message');
event.preventDefault();
$.ajax({
dataType: "text",
url: path,
data: data,
type: "POST",
cache: false,
success: function(result) {
postResult = $.parseJSON(result);
if (postResult.status == "success") {
$('#forgot').hide();
$('#forgot-thank-you').show();
return;
} else {
errorMessage.html(postResult.message);
}
},
error: function() {
errorMessage.html("An error occured");
}
});
return false;
};
$('#reset-form').on('submit', resetPasswordHandler);

Retrive Data from DB in Codeigniter using json

I want to retrieve data from a database but I can't get any record.
I am using json to fetch record from the database.
Here is the view :
<p id="result"></p>
<script>
$("#txt_category_item_name").on("keyup",function(e)
{
$("#searchSuggestionList").css({"display":"block"});
var input_searchValue=$("#txt_category_item_name").val();
$.ajax({
type: "POST",
url: "search_suggestion_list",
data: {recive_value: input_searchValue},
dataType: 'json',
cache: false,
success: function(recive_result) {
$("#result").html(recive_result[1]);
}
});
});
</script>
The controller :
<?php
class Main_ctrl extends CI_Controller {
function search_suggestion_list() {
$this->load->model('main_model');
$recive_search_value=$this->input->post('recive_value');
$data=array();
$recive_search_value;
$data['recive_search_result']=$this->main_model->search_suggestion_list_model($recive_search_value);
$this->load->view('pages/search_suggestion_list_result',$data);
}
}
?>
And the model :
<?php
class Main_model extends CI_Model {
function search_suggestion_list_model($recive_search_value) {
$this->load->database();
$this->db->select('company_id,company_name,company_address,company_category,company_keywords,company_state,company_city,company_website_address');
$this->db->from('company_information');
$this->db->like('company_category',$recive_search_value);
$query=$this->db->get();
return $query->result();
}
}
?>

Try Bellow
In View
<p id="result"></p><script>
$("#txt_category_item_name").on("keyup",function(e)
{
$("#searchSuggestionList").css({"display":"block"});
var input_searchValue=$("#txt_category_item_name").val();
$.ajax({
type: "POST",
url: "/main_ctrl/search_suggestion_list",
data: {recive_value: input_searchValue},
dataType: 'json',
cache: false,
success: function(recive_result) {
if(recive_result.error){
alert(recive_result.error)
}
else{
$("#result").html(recive_result.success);
}
}
});
});
In Controller :
<?php
class Main_ctrl extends CI_Controller {
function search_suggestion_list() {
if($this->input->post('recive_value')){
$this->load->model('main_model');
$recive_search_value=$this->input->post('recive_value');
$data=array();
$data['recive_search_result']=$this->main_model->search_suggestion_list_model($recive_search_value);
if($data['recive_search_result']){
$data['error'] = 'No Records found';
}
else{
$data['success'] = $data['recive_search_result'][1]['name']; // edit as you wish
}
echo json_encode($data);exit;
}
}
}
In Model :
<?php
class Main_model extends CI_Model {
function search_suggestion_list_model($recive_search_value) {
$this->load->database();
$this->db->select('company_id,company_name,company_address,company_category,company_keywords,company_state,company_city,company_website_address');
$this->db->from('company_information');
$this->db->like('company_category',$recive_search_value);
$query=$this->db->get();
return $query->result_array();
}
}

ajax is not calling the function from php page

I'm having a problem with my code...
function retmsg isn't returning a value if javascript is implemented
<div id="pop">
Elunika
<div class="txt">Its the way to connect with your friends.</div>
<form action="login.php" method="post" id="login">
<input id="email" placeholder="E-mail" type="text" name="em" />
<input id="email" placeholder="Password" type="password" name="pwd"/>
<div class="txt1"><input type="checkbox" name="check" />Keep me logged in | Forgot Password ?</div>
<input id="loginButton" type="submit" value="Login" name="log" />
</form>
<span>Register</span>
<div id="error1"></div>
<div id="termdiv1"></div>
</div>
value returned from retmsg() function should display in div id="error"
login script...
if (isset($c))
{
$q = mysql_query("select * from registeration where email='$a' and password='$b'");
$r = mysql_num_rows($q);
if($r)
{
$_SESSION["Authenticated"] = 1;
$_SESSION['id'] = $a;
echo retmsg(1,"profile.php");
}
else
{
$_SESSION["Authenticated"] = 0;
die (retmsg(0,"Incorrect Information"));
}
}
function retmsg($status,$txt)
{
return '{"status":'.$status.',"txt":"'.$txt.'"}';
}
javascript code...
$(document).ready(function(){
$('#login').submit(function(e) {
att();
e.preventDefault();
});
$('#regForm').submit(function(e) {
register();
e.preventDefault();
});
});
function register()
{
hideshow('loading',1);
error(0);
$.ajax({
type: "POST",
url: "submit.php",
data: $('#regForm').serialize(),
dataType: "json",
success: function(msg){
if(parseInt(msg.status)==1)
{
window.location=msg.txt;
}
else if(parseInt(msg.status)==0)
{
error(1,msg.txt);
}
hideshow('loading',0);
}
});
}
function hideshow(el,act)
{
if(act) $('#'+el).css('visibility','visible');
else $('#'+el).css('visibility','hidden');
}
function error(act,txt)
{
hideshow('error',act);
if(txt) {
$('#error').html(txt);
$('#regpop').css('height','419px');
$('#termdiv').css('margin-top','10px');
}
if(!txt) {
$('#regpop').css('height','400px');
$('#termdiv').css('margin-top','-20px');
}
}
function att()
{
hideshow1('loading',1);
error1(0);
$.ajax({
type: "POST",
url: "login.php",
data: $('#login').serialize(),
dataType: "json",
success: function(retmsg){
if(parseInt(retmsg.status)==1)
{
window.location=retmsg.txt;
}
else if(parseInt(retmsg.status)==0)
{
error1(1,retmsg.txt);
}
hideshow1('loading',0);
}
});
}
function hideshow1(el,act)
{
if(act) $('#'+el).css('visibility','visible');
else $('#'+el).css('visibility','hidden');
}
function error1(act,txt)
{
hideshow1('error1',act);
if(txt) {
$('#error1').html(txt);
$('#pop').css('height','290px');
$('#termdiv1').css('margin-top','50px');
}
if(!txt) {
$('#pop').css('height','270px');
$('#termdiv1').css('margin-top','-35px');
}
}
in javascript code
retmsg should return txt parameter to the att function.....
att function is passing retmsg.txt value to the error1 function
part of the function error1 is working as retmsg.txt is not returning value...
rest of the javascript code is working fine...
rest of the code is same as of this...
only function names are different....
ANSWER *ANSWER* ANSWER
javascript code was all correct
made changes in the login script
$q = mysql_query("select * from registeration where email='$a' and password='$b'");
$r = mysql_num_rows($q);
if(!$r)
{
$_SESSION["Authenticated"] = 0;
die (retmsg(0,"Incorrect Information"));
}
else
{
$_SESSION["Authenticated"] = 1;
$_SESSION['id'] = $a;
echo retmsg(1,"profile.php");
}
function retmsg($status,$txt)
{
return json_encode(array('status' => $status, 'txt' => $txt));
}