We Keep Coding

How to select the clicked form in Jquery [ $(this) ]

This is my code:
function onsubmitlogin(token)
{
$(document).ready(function()
{
$("form.formajax").submit(function(e)
{
e.preventDefault();
var data = $(this).serialize();
var url = $(this).attr("action");
var form = $(this);
$.post(url, data, function(data)
{
$(form).children(".signupresult").css("opacity", "1");
$(form).children(".loginresult").html(data.loginresult);
$(form).children(".loginresult").css("opacity", "1");
});
return false;
});
$(this).submit();
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="abc.com" method="post" class="formajax" >
<input type="text">
<input type="submit">
</form>
<form action="xyz.com" method="post" class="formajax" >
<input type="text">
<input type="submit">
</form>
The problem is with this line $(this).submit(); (last 3rd line of jquery code)
I want to submit only the clicked form. What is the problem?
$(this); is working on the above code

Try following:
function onsubmitlogin(token){
$(document).ready(function(){
$("form.formajax").each(function(e){
$(this).submit(function(e){
e.preventDefault();
var data = $(this).serialize();
console.log(data);
var url = $(this).attr("action");
console.log(url);
var form = $(this);
$.post(url, data, function(data){
$(form).children(".signupresult").css("opacity", "1");
$(form).children(".loginresult").html(data.loginresult);
$(form).children(".loginresult").css("opacity", "1");
});
$(this).submit();
return false;
});
});
});
};

Multiple AJAX forms with the same ID on the same page

I have two AJAX newsletter subscribe forms on the same page (top and bottom). Both forms have the same ID. The top form works perfectly, however I'm unable to get the alert messages to appear in the bottom form.
I found this question but wasn't sure how to implement the answer into my code.
Here's the form:
<div class="newsletter">
<form id="newsletter" class="newsletter-signup" action="" method="POST" accept-charset="UTF-8">
<input id="hero-section-newsletter-email-input" type="email" name="email">
<button class="button" type="submit">
Subscribe
</button>
<div id="newsletter-alert" style="display: none;" data-alert></div>
</form>
</div>
Here's the jQuery:
(function() {
'use strict';
var newsletterAlert = function(message) {
$('#newsletter-alert').text(message);
};
var isValidEmail = function(email) {
var pattern = new RegExp(/^[+a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
return pattern.test(email);
};
$('#newsletter').on('submit', function(e) {
var data,
$form = $(this),
$email = $form.find('input[type="email"]');
e.preventDefault();
$('#newsletter-alert').show();
if ( !isValidEmail( $email.val() )) {
newsletterAlert('Looks like you entered an invalid email address! Please try again.');
} else {
newsletterAlert('Subscribing you now...');
data = $form.serialize();
$.ajax({
url: 'PATH_TO_SUBSCRIBE_PHP',
type: 'post',
data: data,
success: function(msg) {
if ( msg === 'success') {
newsletterAlert('Success! Please check your email to confirm.');
$email.val('');
} else {
newsletterAlert( msg );
}
},
error: function(msg) {
newsletterAlert('Error! ' + msg.statusText);
}
});
}
});
})();
Any help would be appreciated. Thanks

Don't use the same ID for the top and bottom forms.
An id must be unique in a document -- see MDN Docs.
Instead have two separate id's and reference them both in the one jQuery call when you are binding to the submit event:
$('#newsletter_top, #newsletter_bottom').on('submit', function(e) {
// ...
});
and in your HTML:
<form id="newsletter_top" ...>
</form>
<form id="newsletter_bottom" ...>
</form>

Taking into consideration special characters in a search

I have a form with a search suggestion that appears as the user types in the input. Now this search suggestion is clickable, where users are able to click on a particular item. when that item it clicks it take them to something like searchPage.php?user_query=the text of the item that was click (i.e. searchPage.php?user_query=html).
What I notice is that if the search suggestion item has a special character known as ASCII ISO 8859-1 Characters it will disregard it, and hence the result would be searchPage.php?user_query=
Under no circumstances can it be blank because its bad design if you click on a item and then it populates you the entire list.
Below is the search suggestion js:
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
window.open('searchPage.php?user_query=' + decoded,'_self',false);
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
Below is the form:
<form method="get" action="searchPage.php" enctype="multipart/form-data" autocomplete="off">
<input type="text" class="search" id="searchid" name="user_query" id="searchBar" placeholder="Search for courses" />
<input type="submit" id="searchButton" name="search" value="search" class="btn btn-danger" autocomplete="off"/>
<div id="result"></div>
</form>

First, as commented by GolezTrol, I would use UTF8 everywhere: it is the recommendend most reliable way to avoid any issue like yours.
Then, in the particular case you have here, you may try to replace
var decoded = $("<div/>").html($name).text();
by
var decoded = encodeURIComponent($("<div/>").html($name).text());
(not absolutely sure it works fine...)

Using JQuery and AJAX to pass data to a PHP script

I have an HTML form that Is only composed of a button with a value. I would like to leave it this way. I am using AJAX/JQuery to pass the form data to a PHP script. But, for some reason, the button value is not sent. What could I be doing wrong?
HTML:
<form id="friend-send" method="post" action="">
<button type="submit" class="foll" name="approve-friend" value="4"> Approve </button>
</form>
AJAX/JQUERY:
$(document).ready(function() {
$("#friend-send").submit(function(e) {
var $this = $(this);
var dataString = $this.serialize();
e.preventDefault();
$.ajax({
type: "POST",
url: "relate.php",
data: dataString,
async: false,
success: function() {
$this.hide();
}
});
});
});

JQuery won't serialize a button, use a hidden field instead
<form id="friend-send" method="post" action="">
<input type="hidden" name="approve-friend" value="4" />
<button type="submit" class="foll"> Approve </button>
</form>
Also, You need to serialze the form by id, not the button by id
Instead of this
$("#friend-request-buttons")
It should be this
$("#friend-send")
Lastly, since you are using ajax to post, you can simplfy your form open tag to this...
<form id="friend-send">

<button>
tags are not supported by serialize https://api.jquery.com/serialize/
You would need to use an input of some kind. A hidden one would work.

Don't use serialize, create the input data yourself:
var dataString = {};
var $button = $this.find("[type=submit]");
dataString[$button.attr('name')] = $button.val();
When you provide an object as the data: argument to $.ajax, jQuery will serialize it automatically.

This answer would be if you are set on using the button alone
$(document).ready(function() {
$("#friend-send").submit(function(e) {
var $this = $(this);
var dataString = "?" + $(this).find('button').attr('name') + "=" + $(this).find('button').attr('value');
e.preventDefault();
$.ajax({
type: "POST",
url: "relate.php",
data: dataString,
async: false,
success: function() {
$this.hide();
}
});
});
});

How to submit an AJAX form with a <a href> link?

I have the following form:
<form id='confirm_reset' action='login/forgotPassword_action' method='post'>
<input type='hidden' name='user_email' value='user_email'>
Submit
</form>
<div id="alert_box_register"></div>
I am trying to submit this with Ajax to return JSON in the alert box:
$("#confirm_reset").on("submit", function(event) {
//disable default click operation
event.preventDefault();
var action_url = $(this).attr("action");
alert_box_register("Resetting password...");
console.log(action_url);
var postData = $(this).serializeArray();
console.log(postData);
$.post(action_url, postData, function(data) {
console.log(data);
var obj = $.parseJSON(data);
alert_box_register(obj.message);
});
});
This script returns no result (as if the link did not function). Where am I going wrong?

Not sure if this code is still a problem for you or not...?
A quick note about out your progress messages ("Resetting password..."): this code will probably run so fast that this message will just barely flash on the screen for the user. I don't know how your stuff is set up but you may never see this on the screen.
<!-- The following line was missing .php from the action -->
<!--form id='confirm_reset' action='login/forgotPassword_action' method='post'-->
<form id='confirm_reset' action='login/forgotPassword_action.php' method='post'>
<input name="txtbox" type="text" value="hello world"/>
<input type='hidden' name='user_email' value='user_email'>
<!-- submit_confirm_reset() is a function I made in the javascript tages-->
Submit
</form>
<div id="alert_box_register"></div>
<script>
function submit_confirm_reset() {
$("#confirm_reset").submit();
}
$("#confirm_reset").on("submit", function(event)
{
console.log('("#confirm_reset").on("submit", function(event)');
//disable default click operation
event.preventDefault();
var action_url = $(this).attr("action");
// you were using alert_box_register like it was a function
// but it doesn't exist in the code you posted in your question
// but a DOM element has this name so I assume you meant that
$("#alert_box_register").html("Resetting password...");
console.log(action_url);
var postData = $(this).serializeArray();
console.log(postData);
$.post(action_url, postData, function(data) {
console.log(data);
// if this response is already json, you don't need to parse it
var obj = $.parseJSON(data);
$("#alert_box_register").html(obj.message);
});
});
</script>