I have this ajax form that gets the value of the user field, I need the answer of everything of all the process I do in the php file to be seen in the same user field but it doesn't work how can I do this thanks
<form method="post" id="form">
<input type="text" id="user" name="user"/>
<input type="button" id="btn" value="button" />
</form>
$.ajax({
type: "POST",
url: url,
data: $("#form").serialize(),
success: function(data) {
$('#user').html(data); //print answer in text field
}
});
You use the val() method to set text in an textbox
$.ajax({
type: "POST",
url: url,
data: $("#form").serialize(),
success: function(data) {
$('#user').val(data); //print answer in text field
}
});
Related
I am trying to post File using JQuery. Below is my code.
<script language="javascript">
$(document).ready(function() {
$('#frmUpdateProfile').on("submit", function(event) {
event.stopPropagation(); // Stop stuff happening
event.preventDefault(); // Totally stop stuff happening
var data = {
"FileName" : event.target.FileName.files,
"_token" : "{!! csrf_token() !!}"
};
$.ajax({
url: '{{URL::route("UpdateProfile")}}',
method: "POST",
async: true,
data: JSON.stringify(data),
processData: false,
contentType: "application/json; charset=utf-8",
success: function (msg) {
SuccessCallback(msg);
},
error: function (jqXHR) {
ErrorCallback(jqXHR);
}
});
});
});
</script>
I tried processData: false,. While debugging in Js, you can check that image is coming in the data. Below is the screenshot.
But when I print the request data in Laravel, it show blank array.
Html form is here
<form method="POST"
action="http://localhost:1234/AS6-Code/public/UpdateProfile"
accept-charset="UTF-8"
enctype="multipart/form-data"
id="frmUpdateProfile">
<input name="_token" type="hidden" value="26KWkWdNqe5iOFE8VRBf1dRnL5xKxwN25jg3tAFW">
<input type="hidden" name="_token" value="26KWkWdNqe5iOFE8VRBf1dRnL5xKxwN25jg3tAFW">
<input multiple="1" name="FileName" type="file">
<input class="btn btn-info" type="submit" value="Update">
</form>
Am I doing something wrong?
Try sending your request with FormData instead:
var data = new FormData($('#frmUpdateProfile')[0]);
Also set contentType to false:
contentType: false
Also Update
event.target.FileName.files
to
event.target.FileName.files[0]
event.target.FileName.files is a FileList object. I believe you need event.target.FileName.files[0] instead.
I'm trying to integrate AJAX with a mailchimp form. I’ve followed another member’s answer but still cannot get it to work. Could you guys see what's wrong with my code?
Thank you.
Here is my code:
<form id="form">
<script>
$( "button" ).click(function() {
formData = {
u: "xxxxxxxxx",
id: "xxxxxxxxx"
};
$.ajax({
url: "http://xxxxxxxxxxxxxxxxxxxxxxx/post-json?",
type: "GET",
crossDomain: true,
contentType: 'application/json',
data: formData,
dataType: "json",
success: function(data) {
//action
},
error: function() {
//action
}
});
});
</script>
<fieldset>
<label for="email_input_id"><input placeholder=
"Type Your Email" type="email" /></label>
</fieldset><button type= "submit">Submit</button>
I finally got my code working.
<form id="form" action="https://xxxxx.com/subscribe/post-json?u=xxxxx&id=xxxx&c=?" method="GET">
<input type="hidden" name="u" value="xxxx">
<input type="hidden" name="id" value="xxxx">
<input type="EMAIL" autocapitalize="off" autocorrect="off"
name="MERGE0" id="MERGE0" size="25" value=""
placeholder="Type your email and press enter">
<p id="response"> </p>
</form>
<script>
$('#form').submit(function(e) {
var $this = $(this);
var paragraph = document.getElementById('response');
$.ajax({
type: "GET",
url: "https://xxx.com/subscribe/post-json?u=xx&id=xx&c=?",
data: $this.serialize(),
dataType : 'json',
contentType: "application/json; charset=utf-8",
error : function(err) { alert("Could not connect to the registration server."); },
success : function(data) {
if (data.result != "success") {
paragraph.innerHTML = data.msg;
} else {
paragraph.innerHTML = data.msg;
}
}
});
return false;
});
</script>
I am trying to post data by a form.
I need to submit the form on other website and have to save the data in my database as well. I tried my best but did not find the solution for this.
Here is my form:
<form class="formaction" action="http:www.demo.com" method="post">
<input type="text" value="1" name="quantity" class="form-style pull-left">
<input type="hidden" name="stock" value="1100">
<input type="submit" value="Add" style="display: block;" class="button-style">
</form>
Case I:
In this case form is submitted to www.demo.com , but it causes error at mystagingserver/addtotrolley
Ajax function:
$('.formaction').submit(function() {
$.ajax({
type: 'POST',
url: 'mystagingserver/addtotrolley',
data: {
quantity: $( "input[name$='quantity']" ).val(),
stockcode: $( "input[name$='stockcode']" ).val()
}
});
});
Case II:
In this case Form is not submitted to www.demo.com but ajax works properly, and it saves my data to database from mystagingserver/addtotrolley
$('.formaction').submit(function() {
$.ajax({
type: 'POST',
url: 'mystagingserver/addtotrolley',
data: {
quantity: $( "input[name$='quantity']" ).val(),
stockcode: $( "input[name$='stockcode']" ).val()
}
});
return false;
});
From Case I what I gathered is, when the user clicks Submit, it makes an ajax call. And immediately attempts to submit the form to www.demo.com. Meaning you are moving away from the page and probably losing the connection. What error message are you getting exactly?
The best approach would be to make an AJAX call to your staging server. If it succeeds only then proceed with the regular form submission or make another AJAX post request to the third party domain.
Something like below would be ideal:
$('.formaction').submit(function() {
$.ajax({
type: 'POST',
url: 'mystagingserver/addtotrolley',
data: {
quantity: $( "input[name$='quantity']" ).val(),
stockcode: $( "input[name$='stockcode']" ).val()
},
success: function(resp) {
$.ajax({
type: 'POST',
url: 'http:www.demo.com',
data: {
quantity: $( "input[name$='quantity']" ).val(),
stockcode: $( "input[name$='stockcode']" ).val()
},
success: function(resp) {
alert("Successfully submitted to both!");
}
});
}
});
return false;
});
i am trying to display the full response of jsonp call in textarea and div but for some reason it doesnt work! could any one tell me what i am doing wrong here?Thanks
ajax script:
<script>
$(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.somesite.com/test&count=-1",
success: function(data) {
alert(data);
$(".response").append(data);
$("#outputtext").append(data);
document.myform.outputtext.value = document.myform.outputtext.value+data+'\n' ;
}
});
});
</script>
<div class="response"></div>
<form id="myform" name="myform" action="./" method="post">
<td><textarea rows="6" cols="15" name="outputtext" style="width: 99%;"></textarea></td>
</form>
I have a form in my view page.it contains 5 text boxes,one search button.while the user enters values in textbox(Entering all fields are not mandatory)and click on the search button,the values I have to store it in an array and pass it to the controller and depending upon the search results i have to display the results of those searched records.
I am able to store the searched values in an array,now i want how to pass this array to the controller and how to access these values in the controller.
as Jose referred , your request may look like this :
$("#submit").click(function () {
var searchData = new Array();
$(".search-input").each(function () {
searchData.push($(this).attr('value'));
});
$.ajax({
type: "POST",
url: "/Home/Index",
data: {"searchData" : searchData},
success: function (data) {
// do something on success
},
traditional: true,
dataType: "json"
});
return false;
});
and your controller action could be :
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index([Bind(Prefix="searchData")] List<string> searchData)
{
return Index();
}
and your form have to have markup like this:
<form id="myform">
<input type="text" class='search-input' />
<input type="text" class='search-input' />
<input type="text" class='search-input' />
<input type="text" class='search-input' />
<input type="submit" id="submit" />
</form>
Use ajax. If jQuery is an option you could write something like this
$(form).submit(function()
{
var ;
$.ajax({
type: "POST",
url: "/Controller/Action",
data: JSON.stringify(_yourArrayObject),
success: function(data){
alert(data.Result);
},
dataType: "json"
});
})