I am tryin to pass multiple values in the below method but I am unable to get this to work. What is the correct syntax?
I have tried
data: ('keyword='+$(this).val(),'id='10),
and
data: {'keyword='+$(this).val(),'id='10},
and
data: {'keyword='+$(this).val(),'&id='10}//I have also tried to replace the curly braces with brackets.
This works so I think its a syntax problem?
data: ('keyword='+$(this).val())
Here is my complete request. I am using GET, I have tried using POST to no avail.
$.ajax({
type: "GET",
url: "showhints.php",
data: ('keyword='+$(this).val()),
beforeSend: function() {
$("#search-box").css("background","#FFF url(loading.gif) no-repeat 165px");
},
success: function(data) {
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background","#FFF");
}
});
The easiest is to use an object literal which will then be uri encoded internally
data: {keyword: $(this).val(), id : 10}
You would do it like
...
data: {
keyword: $(this).val(),
id: 10
},
...
You can send multiple values like this
$.ajax({
type: "GET",
url: "showhints.php",
data: {'key':'value','key':'value',..},
beforeSend: function(){
$("#search-box").css("background","#FFF url(loading.gif) no-repeat 165px");
},
success: function(data){
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background","#FFF");
}
Try the following:
HTML:
<form action="">
<input type="text" name="name">
<input type="text" name="surname">
<input type="submit" name="submitForm">
</form>
Ajax call:
var name = $('input[name]');
var surname = $('input[surname]');
$('input[submitForm]').click(function() {
url: 'someLink.php',
dataType: json,
data: {
name: name.val(),
surname: surname.val()
},
success: function(data) {
console.log(data)
}
});
Related
I am trying to pass array through ajax request
<input type="text" name="item_name[]">
<input type="text" name="address">
$(document).on('click', '#save_info', function () {
var address = $("#address").val();
var item_name = $("[name^='item_name']");
$.ajax({
url: '/save_information',
dataType: "json",
type: 'POST',
data: {
_token: '{{ csrf_token() }}',
address: address,
item_name: item_name,
}
});
});
In my controller
$item_name = $request->item_name;
$array_count = count($item_name);
It makes error. How can i save array value using loop. Thanks in advance
#Mujahidur Rahman Mithun IUB you can write this more shortly by using serializeArray.
$(document).on('click', '#save_info', function () {
var serializeData = $("[name^='item_name']").serializeArray();
serializeData.push(
{
name: "address", value: $("#address").val()
},
{
name: "_token", value: '{{ csrf_token() }}'
},
);
$.ajax({
url: '/save_information',
dataType: "json",
type: 'POST',
data: serializeData
});
});
Or if you use <form>, then you can use with very few line code :
$(document).on('click', '#save_info', function () {
$.ajax({
url: '/save_information',
dataType: "json",
type: 'POST',
data: $('form#myform').serialize(),
});
});
`
The variable item_name holds DOM Node instead of input values. You'd have to make it either var item_name = $("[name^='item_name']").val() or var item_name = $("[name^='item_name']").value
i have try to clear value:
<input type="text" class="token-field" name="meta_keyword" id="meta_keyword" value="">
$('#meta_keyword').val();
but it's not working.
Try this code.
$.ajax({
url: "url",
type: "POST",
success: function(obj)
{
$("#meta_keyword").tokenfield('setTokens', []);
}
});
The content that i want to send
<div id="preview">        </div>
Element function:
function _(obj) {
return document.getElementById(obj);
}
Ajax:
$.ajax({
type: 'POST',
url: 'http://<?php echo $domain ?>/libraries/ajax/pdf.php',
data: 'html=' + _("preview").innerHTML + '&nama=a',
dataType: 'html',
beforeSend: function() {},
success: function(response) {
Materialize.toast((response), 4000);
}
});
How to send &nsbp as text instead of POST parameter?
Use the encodeURIComponent(<string to be encoded>) to encode the data
Use
data: { html: _("preview").innerHTML, nama: 'a'}
And $.ajax will encode it. Under the hood, it uses uses this encodeURIComponent(), you use it like
data: 'html='+encodeURIComponent(_("preview").innerHTML)+'&nama=a',
The following is my form
<form id="form1">
<table>
<tr><td >Name:</td><td class="CommentsRight"><input type="text" name="txtName" style="width:90%" /></td></tr>
<tr><td >Email: (Optional)</td><td class="CommentsRight"><input type="text" Name="txtEmail" style="width:90%" /></td></tr>
<tr><td >Comment: </td><td class="CommentsRight"><textarea type="text" style="width:90%" Name="txtMessage" TextMode="MultiLine" Rows="10"></textarea></td></tr>
<tr><td ></td><td class="CommentsRight"><input type="submit" width="100" ID="cmdSubmit" onclick="javascript: SubmitComment();" /> <input type="button" ID="cmdCancel" Text="Reset" value="Reset" onclick="document.getElementById('form1').reset();" /></td></tr>
</table>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
function SubmitComment()
{
alert($("txtName").val());
$.ajax({
type: "POST",
url: "#(Request.RawUrl)",
data: '{txtCode: "' + $("#txtName.value") + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () { alert('success'); } ,
failure: function (response) {
alert(response.d);
}
});
}
The alert is bringing back undefined all the time for the alert, i'm a beginner to Ajax/Jquery. I've tried #txtName, I've tried input also but it doesn't return any value I put into the txtName, what am I do wrong. I want to then extend data so i pass all the input strings into the data.
In short,
How do I get the value of txtName.text
How do I build up the data string so it contains separated data values
Your help most appreciated.
Try the following:
<input type="text" name="txtName" style="width:90%" />
Into
<input type="text" name="txtName" id="txtName" style="width:90%" />
javascript: SubmitComment();
Into
javascript: SubmitComment(e);
function SubmitComment()
{
Into
function SubmitComment(e)
{
e.preventDefault();
alert($("txtName").val());
Into
alert($("#txtName").val());
data: '{txtCode: "' + $("#txtName.value") + '" }',
Into
data: {txtCode: $("#txtName").val() }, // Send particular data
(or)
data: $("#form1").serialize(), // Send inside form all data
You can not use $("txtName") as you did it. jQuery will not know what to select. There is no class/id or any other selector. Rather use $("input[name=txtName]").val() or give the txtName a class or id (like i did in my example below).
If you want to send the form now in a nice Json you need to serialize it:
var data = $("#form1").serialize();
https://jsfiddle.net/gahapv4t/
you have written wrong code in data parameter in ajax request. you can pass object of paramater then jQuery take care of it to convert into Raw POST data or Query string.
function SubmitComment()
{
alert($("txtName").val());
$.ajax({
type: "POST",
url: "#(Request.RawUrl)",
data: {txtCode: $("#txtName").val()},
dataType: "json",
success: function (data) { alert('success'); alert(JSON.stringify(data)) } ,
failure: function (response) {
alert(response.d);
}
});
Look you can do it in many ways. According to your markup you can try to get value of txtName in following way
$("input[name=txtName]").val();
Or you can add an id with the input field in following way
<input name="txtName" id="someid">
And finally to get value use following code
$("#someid").val()
$("input[name=txtName]").val() is to get the value by name.
$("#id").val() is to get value by its id.
$(".class").val() is to get value by class name.
I think that you have the answer to your first question.
use $("#txtName').val() for receive the value of the field,
you can achieve your second question in multiple ways:
Using the .serialize() function
like Marcel wrote you can create a variable data where you serialize the form and pass it to the $.ajax function like this:
var data = $("#form1").serialize();
$.ajax({
type: "POST",
url: "#(Request.RawUrl)",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () { alert('success'); } ,
failure: function (response) {
alert(response.d);
}
});
2. Using FormData Object
Update your function intercepting a submit event to your form, create a FormData Object and pass your form like this:
$("#form1").submit(function(e){
e.preventDefault();
var formdata = new FormData($(this)[0]);
$.ajax({
type: "POST",
url: "#(Request.RawUrl)",
data: formdata,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () { alert('success'); } ,
failure: function (response) {
alert(response.d);
}
});
});
Whit this method you can also insert custom data to pass:
formData.append('action', 'customAction');
formData.append('id', 123);
formData.append('mydogname', 'Jo');
3. Using post() function
This is one of the simpliest way to send post data using Ajax (Documentation ). It's also easy to customize and use Jquery Logics.
$( "#form1" ).submit(function( event ) {
event.preventDefault();
var $form = $( this ),
data = $form.serialize();
var posting = $.post( "#(Request.RawUrl)", data );
posting.done(function( data ) {
alert(data);
});
});
I hope this will help you.
My text box and button
<input type="text" class="form-control" name="ClaimNumber" placeholder="Enter a claim number"
id="ClaimNumber" />
<button class="btn btnNormal" type="submit" id="btnSearch">
<i class="fa fa-search"></i>
</button>
My jquery
$(document).ready(function () {
$("#btnSearch").on("click", function () {
var enteredClaimNumber= $("#ClaimNumber").val();
alert(enteredClaimNumber);
$.ajax({
type: "POST",
url: "/Home/ClaimsSearch",
data: enteredClaimNumber
});
});
});
My controller
[HttpPost]
public ActionResult ClaimsSearch(string enteredClaimNumber)
{
_lfAPI.ClaimsAdvanceSearch(enteredClaimNumber);
return View();
}
I'm not able to get the value in controller..Thanks in advance..
Data in AJAX request must be like name, value pair:
data: {"enteredClaimNumber": ClaimNumber}
Write like this:
$(document).ready(function () {
$("#btnSearch").on("click", function () {
var ClaimNumber = $("#ClaimNumber").val();
alert(enteredClaimNumber);
$.ajax({
type: "POST",
url: "/Home/ClaimsSearch",
data: {"enteredClaimNumber": ClaimNumber}
});
});
});
var datum = {"claimNum": ClaimNumber};
$.ajax ({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Home/ClaimsSearch",
dataType: "json",
data: JSON.stringify(datum),
});
![Check This][1]
In
data : { parameter : value }
if there are multiple parameter then separate with comma (,)
data : { parameter1 : value1,parameter2 : value2 }
as shown below
$.ajax({
url: this.href,
type: 'POST',
data: { input: $('#caption').val() },
success: function (result) {
alert(result.name);
},
error: function () {
alert("error");
}
});