/    Sign up×
Community /Pin to ProfileBookmark

Html form, how to send data by traditional post and jquery ajax

I want to save html form data in my server and to an another server. For this data is sending by traditional post (refreshing the page) to local server and also by jquery ajax post (or javascript) to the remote server. The html form:

`<!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<script type=”text/javascript” src=’jquery.js’></script>
<script type=”text/javascript” src=’e.js’></script>
<h2>PHP Form Validation Example</h2>
<p><span class=”error”>* required field</span></p>
<form method=”post” id=”registration” action=”receiver1.php”>
Name: <input type=”text” id=”nameq” name=”name” value=””>
<span class=”error”>* </span>
<br><br>
E-mail: <input type=”text” id=”email” name=”email” value=””>
<span class=”error”>* </span>
<br><br>
Website: <input type=”text” id=”website” name=”website” value=””>
<br><br>
Comment: <textarea id=”comment” name=”comment” rows=”5″ cols=”40″></textarea>
<br><br>
Gender:
<input type=”radio” id=”gender” name=”gender” value=”female”>Female
<input type=”radio” id=”gender” name=”gender” value=”male”>Male
<input type=”radio” id=”gender” name=”gender” value=”other”>Other
<span class=”error”>* </span>
<br><br>
<table width=’100%’>
<tr>
<td align=’center’>
<input type=’image’ src=’image/submit_button.jpg’>
</td>
</tr>
</table>
</form>
</html>`

here action=”receiver1.php” is file in my server http://localhost/receiver1.php. I make handler on input type=’image’, e.js:

`$(document).ready(function() {
$(“table tr input:image”).click(function() {
var cln = $(“#nameq”).val();
$.post(“https://remote-server/receiver2.php”, {“cln”: cln});
});
});`

https://remote-server/receiver2.php is file in an another server. But it does not work, I can’t receive data in remote server. Have someone a perfect solution for this problem? Thanks in advance

to post a comment
HTMLJavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumAug 27.2019 — This issue is discussed here:

https://stackoverflow.com/questions/19129463/form-submit-and-ajax-at-the-same-time-using-onsubmit

and a solution is given: Wait until the Ajax call is complete and then submit the form by javascript.
Copy linkTweet thisAlerts:
@kevs12345authorAug 28.2019 — Thank you, works like a charm. Right now I have two solutions: Solution #1 by using ajax complete() method:


$(document).ready(function() {<br/>
$("table tr input:image").click(function() {<br/>
$.ajax({<br/>
type: "POST",<br/>
url: 'https://remote-server/receiver2.php',<br/>
data: {cln: $("#nameq").val()},<br/>
complete: function(){
//ajax complete() method

$("form").submit(); //submit the form after ajax completes

}<br/>
});<br/>
return false;
//stop the form from initially submitting

});<br/>
});


and Solution #2, using by ajax async:



$(document).ready(function() {<br/>
$("table tr input:image").click(function() {<br/>
var cln = $("#nameq").val();<br/>
$.ajaxSetup({async: false});
//set ajax async to false

$.post("https://remote-server/receiver2.php", {"cln": cln});<br/>
});<br/>
});


so my question is which solution would be better to use? In case of performance, speed, efficient etc? What are the negative and positive sides of each of these methods, or both are the same?
×

Success!

Help @kevs12345 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...