Develop Reference

JavaScript / Ajax: Multiple Forms for one Script. How to consider only the submited one?

I have multiple Forms on one Page with differend IDs which get performed with AJAX:
<form action="comment.php" class="testForm" id="1" method="POST">
<input type="text" name="name">
<input type="text" name="comment">
<input type="submit">
</form>
<form action="comment.php" class="testForm" id="2" method="POST">
<input type="text" name="name">
<input type="text" name="comment">
<input type="submit">
</form>
AJAX is actually working well, but considers only the input values of the first form. I'm pretty shure it's because it's all the same class and it does not differ between the IDs (1,2..)
<script>
$(document).ready(function() {
$('.testForm').submit(function(event) {
var formData = {
'name' : $('input[name=name]').val(),
'comment' : $('input[name=comment]').val()
};
$.ajax({
type : 'POST',
url : 'comment.php',
data : formData,
dataType : 'json',
encode : true
})
.done(function(data) {
console.log(data);
if (data.success) {
$('.testForm input[type="submit"]').addClass('red');
}
});
event.preventDefault();
});
});
</script>
I want to have only class red added on the submit button, that was clicked.
I'm sorry for my lack of knowledge, i'm pretty new to this and i could not really find helpfull stuff.

Simply use this.id:
$('.testForm#'+form.id+' input[type="submit"]').addClass('red');
$(document).ready(function() {
$('.testForm').submit(function(event) {
var form = this; // capture correct this
console.log(form.id) // should be 1 or 2 depending on the form
var formData = {
'name': $(form).find('input[name=name]').val(),
'comment': $(form).find('input[name=comment]').val()
};
console.log(JSON.stringify(formData));
$.ajax({
type: 'POST',
url: './',
data: formData,
dataType: 'json',
encode: true
})
.done(function(data) {
console.log(data);
console.log(form.id)
if (data.success) {
$(form).find('input[type=submit]').addClass('red')
}
});
event.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="comment.php" class="testForm" id="1" method="POST">
<input type="text" name="name" value="n1">
<input type="text" name="comment" value="c1">
<input type="submit">
</form>
<form action="comment.php" class="testForm" id="2" method="POST">
<input type="text" name="name" value="n2">
<input type="text" name="comment" value="c2">
<input type="submit">
</form>
<form action="comment.php" class="testForm" id="3" method="POST">
<input type="text" name="name" value="n3">
<input type="text" name="comment" value="c3">
<input type="submit">
</form>
<form action="comment.php" class="testForm" id="4" method="POST">
<input type="text" name="name" value="n4">
<input type="text" name="comment" value="c4">
<input type="submit">
</form>
You can also capture the correct form by using jQuery's $.fn.find(), like #pschichtel wrote in his comment:
$(form).find('input[type=submit]').addClass('red')

How to capture URL created by form submit in Javascript and Ajax

I need help creating a URL that is clickable. We are currently using PeopleCode in peoplesoft to call an Iscript. That Iscript calls HTML. We've created this form below to build our URL
<form id="form1" name="frmHostedCheckout" method="POST" action="XXXXXXXXX">
<input type="hidden" id="api_token" name="api_token" value="XXXXXXXXX" />
<input type="hidden" id="school_id" name="school_id" value="XXXXXX" />
<input type="hidden" id="student_id" name="student_id" value="%BIND(:1)" />
<input type="hidden" id="email_address" name="email_address" value="%BIND(:2)" />
<input type="hidden" id="curriculum_id" name="curriculum_id" value="8" />
<input type="hidden" id="first_name" name="first_name" value="%BIND(:3)" />
<input type="hidden" id="last_name" name="last_name" value="%BIND(:4)" />
<input type="hidden" id="group" name="group" value="HavenTestGroup1" />
</form>
We are submitting the form with the following JavaScript...
< script type = "text/javascript" >
form1.submit(function() {
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
$('#created').html(response);
}
});
return false;
});
< /script>
When I run this we get a URL string but, it's not a clickable hyperlink. How can we make the URL clickable?
Result from code

I believe that you should change this line:
$('#created').html(response);
To this:
$('#created').html('<a href="path-to-file-or-place">' +response + '</a'>);

send data to php JSON way from html form

I'm trying to send POST data using JavaScript. I have data in HTML form :
<form name="messageact" action="">
<input name="name" type="text" id="username" size="15" />
<input name="massage" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
after press submit key i want to send name and massage to my PHP file ! a wrote this for my JavaScript in html : post.php , with post method
$(document).ready(function(){
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
and for my php i wrote this :
if(isset($_SESSION['name'])){
$text = $_POST['text'];
....
....
but in PHP i couldn't receive anything ! please help me to solve this problem ! and how can i change it to JSON way ?

You don't need javascript for send data to server just submit the form and add the destination php in action
<form name="messageact" action="post.php">
<input name="name" type="text" id="username" size="15" />
<input name="massage" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
for testing post.php you could use this code
<?php
if(isset($_POST['name'])){
echo $_POST['name'] . <br />;
echo $_POST['massage'] . <br />;
echo $_POST['submitmsg'] . <br />;
?>
if you want ajax behavior try this
$(document).ready(function(){
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {submitmsg: clientmsg});
$("#usermsg").attr("value", "");
return false;
});

Why do you need to store name in the $_SESSION?
If you have used $_SESSION by mistake change this
if(isset($_SESSION['name'])){
$text = $_POST['text'];
....
....
to this and it should work
if(isset($_POST['text'])){
$text = $_POST['text'];
....
....
The $_POST and $_SESSION are 2 different variables. You might wanna take a look at this and this

Try this:
<form name="messageact" method="post" action="post.php">
<input name="name" type="text" id="username" size="15" />
<input name="message" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
$("#submitmsg").click(function(e){
var name = $("#username").val();
var usermsg = $("#usermsg").val();
$.post("post.php", {'name': name,'usermsg':usermsg});
return false;
});

i do it for java :
//If user submits the form
$('#edit').submit(function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:'post.php',
dataType:'json',
data:$('#edit').serialize(),
success:function(data) {
console.log("success");
$('#feedback').html(data).fadeIn().delay(3000).fadeOut();
},
error: function( jqXHR,textStatus,errorThrown ){
console.log(textStatus);
}
});
});
and for form :
<form id="edit" action="" method="POST">
<input type="text" name="name" >
<input type="text" name="phone" >
<input type="text" name="address" >
<input type="submit" name="submit" value="Send">

Submit multiple form with one button

I know this question has been asked a lot, but there doesn't seem to be an answer for me. I'm sorry if I'm just really dumb, but I've been stuck for a day now..
I want to select a table row(see below), and then delete that user. Since I want to have multiple form's to interact with the table I can't place them in one form.
$("#clickMe").click(function () {
$(".myForms").trigger('submit');
});
$('.myForms').submit(function () {
console.log("SWAGGG");
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="listForm" action="index.php?p=admin" method="POST">
<?php
$userQuery = "SELECT * FROM usr2";
$row_userQuery = $dbportal->query($userQuery);
if(isset($row_userQuery) && !empty($row_userQuery))
{
//row[0] = ID
//row[1] = username(abbrevation)
//row[2] = admin? 0=normale user 1=admin
echo'
<table id="myTable" class="table table-striped">
<tr><td></td><td>User ID</td><td>username</td><td>Role</td></tr>';
foreach ($row_userQuery as $row)
{
echo'
<tr>
<td id="tdSelect"> <input type="checkbox" name="selectedUser[]" value="'. $row[0] .'" />
<td>'. $row[0] .'</td>
<td>'. $row[1] .'</td>
<td>'. $row[2] .'</td>
</tr>';
}
echo'</table>';
}
?>
<input type="hidden" name="action" value="listForm">
</form>
<form id="deleteForm" class="myForms" action="index.php?p=admin" method="POST">
<div class="leftTextBox">
<p>user ID:</p>
<p class="margin">gebruikersnaam:</p>
</div>
<div class="rightTextBox">
<input class="form-control" type="text" name="userID" placeholder="user ID">
<input class="form-control" type="text" name="login" placeholder="gebruikersnaam" style="margin-top: 8px;">
</div>
<input type="hidden" name="action" value="deleteForm">
</form>
<button id="clickMe" class="btn btn-default" style="margin-top:5px;float:right;">Delete user</button>
I'm sure that its just me overseeing something, but help would greatly be appriciated.
Also, I have ajaxForm plugin installed.

A 'submit' is by definition a jump to a new URL. You know this can only be done for one form at a time.
However, we talking normal 'submits' here, and you don't have to use normal submits to get information from a form and act on it.
Since you're using JQuery, you could use that. Have a look at ajax calls. For instance here:
http://api.jquery.com/jquery.post
Look for the example called: Post a form using ajax and put results in a div, you will find useful code there. It shows you how to get the values of the fields in the form.

Let's imagine you have 3 forms like this:
<form id="form1" action="api/url1">
<input name="field1" type="text" />
</form>
<form id="form2" action="api/url2">
<input name="field2" type="text" />
</form>
<form id="form3" action="api/url3">
<input name="field3" type="text" />
</form>
<button>Submit</button>
Then you can fire the submit of each form like this:
$('button').on("click", function () {
$('form').each(function (index, form) {
$(form).submit();
});
});
Then to prevent form full post back just prevent the default of the submit event and then post the serialized form with ajax:
$('form').on("submit", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
data: $(this).serialize(),
success: function (data) {
alert(data);
},
error: function (error) {
console.error({ status: error.status, statusText: error.statusText })
}
});
});
JSFIDDLE

If you want to use ajax
you can group a data of all input and post using new FormData()
function fnSubmintAll(){
var formData = new FormData();
$("#form1,#form2,#form3").each(function(idx,item){
var frmValue = $(item).serializeArray();
$.each(frmValue, function (key, input) {
formData.append(input.name,input.value);
});
})
$.ajax({
url: "/PostUrl",
type: "POST",
data: formData,
contentType:false,
processData: false,
success: function (result) {
alert("Success")
},
error: function () {
alert("Error")
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<legend>From 1</legend>
<form id="form1">
<input name="field1" type="text" />
</form>
</fieldset>
<fieldset>
<legend>From 2</legend>
<form id="form2">
<input name="field2" type="text" />
</form>
</fieldset>
<fieldset>
<legend>From 3</legend>
<form id="form3">
<input name="field3" type="text" />
</form>
</fieldset>
<br />
<br />
<br />
<button type="button" onclick="fnSubmintAll">Submit All</button>

Particular div to refresh onsumbit using ajax or jquery

I want a particular div on a page that contains database field to refresh itself to bring out the currenty entry onsubmit of a form. the div that contains the record is called #new_entry
<div id="new_entry"></div>
<script>
$(document).ready(function(){
$("#form3").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "../calls/insert_call_love.asp",
data: data
}).success(function() {
$("#feedback").append("<div class='messages' style='border:1px purple solid; padding:2px; margin:5px;'>Your have loved this photo </div>");
setTimeout(function() {
$(".messages").fadeOut(function(){
$(".messages").remove();
});
}, 1000);
$("input[type=text]").val("");
});
});
});
</script>
this is what i'm posting to the insert_call_love.asp
<form action="<%=MM_editAction%>" method="post" name="form3" id="form2">
<input name="comment" type="text" id="comment" size="50" />
<input name="imageField3" type="image" id="imageField3" src="../imgs/buttons/comment.png" align="bottom" />
<input name="wardrobe" type="hidden" id="wardrobe" value="1" />
<input name="comme" type="hidden" id="comme" value="2" />
<input name="comfn" type="hidden" id="comfn" value="3" />
<input name="photo_id" type="hidden" id="photo_id" value="4" />
<input name="ctype" type="hidden" id="ctype" value="picture" />
<input name="resp_email" type="hidden" id="resp_email" value="5" />
<input name="MM_insert" type="hidden" id="MM_insert" value="form2" />
</form>

In your code, you have to add a variable to success(function()) function
success(function(msg)
**"msg"**will contain data which you want to return from below url:-
url: "../calls/insert_call_love.asp",
then you can assign this data to any div
}).success(function(msg) {
$('#new_entry').html(msg);
}
Note: variable "msg" will contain all the data which you have printed on the page "insert_call_love.asp"

Well depending on what you are doing on the server side with this post...You would need to query the DB and retrieve the latest item, and send it back/echo it out as JSON.
So in pseudocode steps...
Process posted variables...
Query DB for latest entry..
Echo out as JSON...
Then do something like ...
.success(function(data) {
$('#new_entry').html(data);