I'm trying to post a single form to two pages. The first page is loacally hosted and other one is a remote page which need to be redirected after posting to first page. I can use jquery to post the form but have no idea how to post to the remote server's file.
My form is like:
<form method ='POST' action='https://remotewebsite.com/api/step1.asp' id='payment_form' class='form-horizontal' >
<div class='form-body'>
<input type='hidden' name='group' value='$net_amount'/>
<input type='hidden' name='type' value='$payment_type' />
<div class='modal-footer'>
<button type='button' class='btn default' data-dismiss='modal'>Cancel</button>
<input type='button' id='pay' name='pay' value='pay' class='btn green' />
</div>
</div>
</form>
I can use jquery to post it to my other page say "process.php" but couldn't find any way to submit the form again to the url https://remotewebsite.com/api/step1.asp
<script type="text/javascript">
$('input[type=button]').click(function(e){
e.preventDefault(); // prevent the browser's default action of submitting
$.ajax({
type: "POST",
url: "process.php",
data=$("#payment_form").serialize(),
data: data,
dataType: "html",
});
});
</script>
One solution would be to POST to your process.php script as you currently are.
Then after you've finished processing, fire off a cURL POST request to the remote server (from your process.php script. If you Google for PHP curl post request you should find a load of articles telling you how to do so, e.g: http://davidwalsh.name/curl-post
how about just simply duplicate $.ajax?
<script type="text/javascript">
$('input[type=button]').click(function(e){
e.preventDefault(); // prevent the browser's default action of submitting
$.ajax({
type: "POST",
url: "process.php",
data=$("#payment_form").serialize(),
data: data,
dataType: "html",
});
$.ajax({
type: "POST",
url: "https://remotewebsite.com/api/step1.asp",
data=$("#payment_form").serialize(),
data: data,
dataType: "html",
});
});
</script>
Related
For example i have this form that i send to queries.php.
echo "<form method='GET' action='queries.php'>
<label>name1</label>
<input type='checkbox' name='name1'/>
<label>name2</label>
<input type='checkbox' name='name2'/>
<label>name3</label>
<input type='checkbox' name='name3'/>
<input type='submit' name='sendData' value='Send'/>
</form>";
In order to perform an ajax call the url can be queries.php?name1=on&name2=on&name3=on&SendData=Send or with less and variable parameters.
If i have main.js how can i access the url if the parameters i send are variables? For variables i mean that they are not always the same.
$.ajax({
type: "GET",
url: "queries/queries.php?",
dataType: "json",
contentType: "application/json",
}).done(function (data) {
console.log(data);
}).fail(function (response) {
console.log(response);
});
}
Hope i've been clear, thank you. And sorry if the question can be newbie.
I think you're asking how to get the data from the form fields and put it into the URL?
If so, the simplest way is to handle the form's submit event, and then have jQuery serialise the form's data for you, and send it to the server in your AJAX request.
For example:
HTML (note the ID on the form):
<form method='GET' id="someForm" action='queries.php'>
<label>name1</label>
<input type='checkbox' name='name1'/>
<label>name2</label>
<input type='checkbox' name='name2'/>
<label>name3</label>
<input type='checkbox' name='name3'/>
<input type='submit' name='sendData' value='Send'/>
</form>
JavaScript/jQuery:
$(function() { //wait till page has loaded
$("#someForm").submit(function(event) { //add "submit" event handler to the form
event.preventDefault(); //stop normal postback behaviour
$.ajax({
type: "GET",
url: "queries/queries.php?",
data: $(this).serialize() //grab the form data
dataType: "json",
}).done(function (data) {
console.log(data);
}).fail(function (response) {
console.log(response);
});
});
});
serialize() will output a querystring (like you showed in your question) automatically and, for a GET request, append it to the URL - although for a form like this, it's usually preferable to use POST to submit, but that's up to you. Documentation: https://api.jquery.com/serialize/
Use data property of JQuery AJAX.
$.ajax({
type: "GET",
url: "queries/queries.php?",
data: {name1: variable1, name2: variable2, name3: variable3},
dataType: "json",
contentType: "application/json",
}).done(function (data) {
console.log(data);
}).fail(function (response) {
console.log(response);
});
Where variable1, variable2, variable3 are variables and name1, name2, name3 are GET variables.
So in PHP you'll receive them $name1 = $_GET["name1"];
If you have html form and want to submit entire form using AJAX, go for #ADyson's approach as it'll submit entire form and easier to write and cleaner too.
<form id='gbookform'>
<input id='inputname' type='text' name='name' autocomplete='off' placeholder='Your name'>
<input id='inputcon' type='text' name='contact' autocomplete='off' placeholder='Your contact or website'>
<div id='forminfo'></div>
<textarea id='inputstory' name='story' rows='9' placeholder='Your story'></textarea>
<div class="g-recaptcha" data-sitekey="6LfobygTAAAAACxBzCl1FxPe4lALE-669wt6NC7G"></div>
<input id='btnsubmit' type='submit' value='SEND'>
</form>
JS
$("#gbookform").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "gbookajax.php",
data: $(this).serialize(),
success: function(data) {
$('#dataload').load('gbookdata.php');
$('#forminfo').text(data).show();
}
})
})
After submitting the form I see my variables written inside url:
http://localhost/gbook.php?name=q&contact=q&story=q&g-recaptcha-response=
How can I avoid this ?
Just specify the form method :
<form id='gbookform' method='post'>...</form>
Your ajax is not working. the file name in
http://localhost/gbook.php?name=q&contact=q&story=q&g-recaptcha-response=
is different from
url: "gbookajax.php",
so i believe the form is being posted the regular way, and not the ajax.
what you can do is put
$("#btnsubmit").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "gbookajax.php",
data: $(this).serialize(),
success: function(data) {
$('#dataload').load('gbookdata.php');
$('#forminfo').text(data).show();
}
})
})
in a function, like:
function postForm(){
...// the ajax request above
}
and add replace:
<input id='btnsubmit' type='submit' value='SEND'>
with
<button onclick="postForm()">SEND</button>
I am not sure if you want to send form as GET, but suppress the variables that show in your link, or if you want to send a POST request. According to the JS you provided I assumed you want to send a POST request so I think this should work for you.
<form id='gbookform' method="post">
...
</form>
Notice the difference in the first line of code, where method is added.
Default method for form is GET, hence why it was treated as such.
// EDIT
Since you are trying to send a post request, you should also suppress the buttons core functionality to send the request and refresh the page. So to your JS you should probably add this...
$("#gbookform").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "gbookajax.php",
data: $(this).serialize(),
success: function(data) {
$('#dataload').load('gbookdata.php');
$('#forminfo').text(data).show();
}
})
return false;
})
I have no idea how to implement this, let me try to explain
I have a form that open inside a bootstrap modal frame in my layout, in this form i have 2 fields
<input type="file" name="photoimg" id="photoimg" value="" />
<input type="hidden" name="consulta" value="5">
I need to submit this to my url with the value 5 for 'consulta' so the script can read and do the proper things with the file,
BUT
I need to do this without refreshing the opened modal, in other words, using ajax to submit the file (for further cropping)
i have this script that do the submit, what i'm doing wrong here?
<script type="text/javascript">
function enviaimagem(){
$.ajax({
type: "POST",
data: { consulta:5 },
dataType: 'html',
url: "<?=JURI::ROOT()?>ajax.html",
//dataType: "html",
success: function(result){
$("#corpo_modal").html('');
$("#corpo_modal").html(result);
},
beforeSend: function(){
$("#corpo_modal").html('');
$("#corpo_modal").css({display:"none"});
$('#ajaxloadergeneric').css({display:"block"});
},
complete: function(msg){
$('#ajaxloadergeneric').css({display:"none"});
$("#corpo_modal").css({display:"block"});
}
});
}
</script>
File upload through AJAX is supported through FormData object:
https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
, however it is not supported by all/old browsers( especially IE < 10)
I'm building up an ajax function that grabs the info needed to send into the database than print it out on the page. Only it grabs the streamid but not the commentcontent. I can see this in firebug under the post parameters. The strange thing is, I've used the same method for my main status updates and just changed the id's so they don't conflict.
Most would say there is no value in the commentcontent..but that would be the users inserted comment, and their is no value on my main status updates..So I'm rubbing my head thinking, where am I going wrong?
FORM
<form id='mycommentform' method='POST' class='form_statusinput'>
<input type='hidden' name='streamid' id='streamid' value='".$streamitem_data['streamitem_id']."'>
<input class='text' name='commentcontent' id='commentcontent' placeholder='Say something' autocomplete='off'>
<input type='submit' id='button' value='Feed'>
</form>
</div>
AJAX
<script>
$(document).ready(function(){
$("form#mycommentform").submit(function(event) {
event.preventDefault();
var streamid = $("#streamid").val();
var commentcontent = $("#commentcontent").val();
$.ajax({
type: "POST",
url: "comment_add.php",
cache: false,
dataType: "json",
data: { streamid: streamid, commentcontent: commentcontent},
success: function(response){
$("#commentcontent").val("");
$("#commentaddid").html("<div class='stream_comment_holder' style='display:none;' id='comment_holder_"+response['streamitem_id']+"'><div id='comment_list_"+response['streamitem_id']+"'></div></div>");
}
});
return false
});
});
</script>
You always need to quote your data, so changing it to: { 'streamid': streamid, 'commentcontent': commentcontent} should probably fix your issue
After some discussion, we found out var commentcontent = $(this).children('#commentcontent ').val(); fixed the issue
First let me say I'm new to Ajax. I've been reading articles from jquery.com and some tutorials but I didn't figured it out yet how this works on what I'm trying to achieve.
I am trying to get the weather for a searched city using Google's Weather API XML, without page refresh.
I managed to retrieve the Weather XML and parse the data but everytime I search for a different place, the page reloads since my weather widget is under a tab.
This is what I have in my HTML:
<script type="text/javascript">
$(document).ready(function(){
// FOR THE TAB
$('.tab_btn').live('click', function (e) {
$('.tab_content').fadeIn();
});
$(".submit").click(function(){
$.ajax({
type : 'post',
url:"weather.php",
datatype: "text",
aysnc:false,
success:function(result){
$(".wedata").html(result);
}});
});
});
</script>
<style>.tab_content{display:none;}</style>
</head><body>
<input type="button" value="Show Content" class="tab_btn">
<div class="tab_content">
<h2>Weather</h2>
<form id="searchform" onKeyPress="return submitenter(this,event)" method="get"/>
<input type="search" placeholder="City" name="city">
<input type="hidden" placeholder="Language" name="lang">
<input type="submit" value="search" class="submit" style="width:100px">
</form>
<div id="weather" class="wedata">
</div>
</div>
And here is the actual demo I'm working on: http://downloadlive.org.
Now, if I add action="weather.php" on the search form I get the results, but I get redirected to weather.php which is logical. Without the action="weather.php", everytime I search my index which I'm on, adds up /?city=CITY+NAME which shouldn't. This should be added to weather.php, get the results and then retrieve them back into my index, if that makes sense?
This is my php code for weather.php: http://pastebin.com/aidXCeQg
which can be viewed here: http://downloadlive.org/weather.php
Can someone please help me out with this please?
Thanks alot
You just need to return false; from the click event handler. This will prevent the default action from occuring - in this case, submitting the form. Also, remove the async: false setting. You almost never want synchronous ajax requests.
$(".submit").click(function(){
$.ajax({
type : 'post',
url:"weather.php",
datatype: "text",
success: function(result){
$(".wedata").html(result);
}
});
return false;
});
Alternately you can pass a parameter name to the callback and then use event.preventDefault() to accomplish the same result as above:
$(".submit").click(function(e){
$.ajax({
type : 'post',
url:"weather.php",
datatype: "text",
success: function(result){
$(".wedata").html(result);
}
});
e.preventDefault();
});
You need to send the form data with the POST. It's super-easy to do this using .serialize().
$(".submit").click(function(){
$.ajax({
type : 'post',
url:"weather.php",
data: $(this.form).serialize(),
datatype: "text",
success: function(result){
$(".wedata").html(result);
}
});
return false;
});