I am trying to pass the value of a html textbox form field to another .php file using jquery and ajax when the user defocuses that textbox. The textbox has the id "aircraftReg". I am using the code as follows...
$(document).ready(function(){
$("#aircraftReg").blur(function() {
var aircraftReg = $(this).value;
$.get("searchDatabase.php?q=aircraftReg", function(data){
// My function
});
});
});
I think the problem lies in creating the var aircraftReg. I am attempting to assign its value to the text within the text box with id "aircraftReg".
Can anyone see what is going wrong?
Try to change it like this:
var aircraftReg = $(this).val();
$.get("searchDatabase.php?q="+aircraftReg , function(data){
// My function
});
To get value of text field (or other input) there is .val() method in jQuery.
You need to change your Url because you are passing javascript var to url so it must me added with +.
var aircraftReg = $(this).val();
$.get("searchDatabase.php?q="+aircraftReg , function(data){
//function logic goes here
});
You have passed aircraftReg as regular string not as a javascript variable.
$(document).ready(function(){
$("#aircraftReg").blur(function() {
var aircraftReg = $(this).value; //or $(this).val();
$.get("searchDatabase.php?q="+ encodeURIComponent(aircraftReg), function(data){
// My function
});
});
});
Also, you have three encoding options:
escape() will not encode: #*/+
encodeURI() will not encode: ~!##$&*()=:/,;?+'
encodeURIComponent() will not encode: ~!*()'
Note: escape() function is non-ASCII, encodeURI() and encodeURIComponent() are UTF-8 compatible.
Related
I'm able to successfully get all the values from a multi-select form into one nice delimited variable, but I can't figure out how to get the value to my PHP script? How do I get the 'output' value read by PHP's $_POST array? Any help would. Be. Awesome. :D
<script type="text/javascript">
function ValidatePageForm() {
var result = new Array();
$("#select-to option").each(function() {
result.push($(this).val());
});
var output = result.join("-");
alert(output);
}
</script>
suppose you have a form
<form>
<input type="hidden" name="output" id="output">
....
</form>
send javascript variable to HTML
var output = result.join("-");
$('#output').val(output);
and when you submit the form
you wil get data in $_POST['output']
I believe your looking for something like echo $_POST['value']; ??
You can use Jquery serialize to post all the data of the form including multi select
var submit_data = $('#output').serialize();
var post_data = submit_data ;
$.ajax({
type: "POST",
url: 'submitform.php',
data: post_data,
success: function(data)
{
}
});
You will get all the value in $_POST on submitform.php
Let me know it works for you
The issue is how do I POST the value of the first dropdown selected to my Codeigniter controller using jQuery/AJAX. Here is an example of what I need to do http://css-tricks.com/examples/DynamicDropdown/
$("#first-choice").change(function() {
$("#second-choice").load("getter.php?choice=" + $("#first-choice").val());
});
In the .load() I want to be able to pass the value of #first-choice to my controller.
How can I do that? Thanks!
$("#first-choice").change(function() {
var str = '';
$.ajax({
url: 'getter.php',
type:'GET',
dataType:'json',
data:'choice='+ $("#first-choice").val(),
success:function(data){ //you must return your data as id and value for the selectbox
$.each(data as function(v){
str+='<option value="'+v.yourid+'">'+v.yourvalue+'</option>';
});
$("#second-choice").html(str);
}
});
});
try this
$("#second-choice").load("getter.php",{choice:$("#first-choice").val()},function(){
//do something here
});
this will POST the additional parameters to the server and a callback that is executed when the server is finished responding.
Try this:
$("#first-choice").change(function() {
$("#second-choice").load("<?php echo site_url('controller-name/method-name'); ?>/" + $("#first-choice").val());
});
NOTE: I have used forward trailing slash to pass your dropdown value as a parameter to your method but this is not necessary you can also pass using get or post method
I am having a problem with seeing one of my variables on a webpage. Here is what I have so far.
$(document).ready(function() {
$(function() {
$("#CheckID").click(function() {
// submit ajax job and display the result
var id = '$("#ID").val()'
$.ajax({
type: "POST",
url: "test_wID.php",
data: "id",
success: function(data) {
$('#rightselection').html(data)
}
});
});
});
});
This is the jquery function I am using to take an ID entered into a form and use that ID with a bash script.
Here is the php.
<?php
//Get the ID from the HTML form and use it with the check chunk script.
$id = $_POST['ID'];
if (is_null($id)){
echo "$id is null";
}
echo "Selected test Game ID: ".$id;
//print shell_exec('/opt/bin/tester $id');
?>
I commented out the script because the variable is returning null, at this point I am just trying to make sure that I get the ID.
For completeness here is the form I'm using.
print "<p><h3>ID: <input type=\"text\" id=\"ID\" /></h3></p>";
#print "<br>";
print "<p><button id=\"CheckID\">Check ID</button></p>";
When i click the button I get the message in my div that the variable is null. So my question is am I missing something in the declaration? How is it that the var id is null?
Thanks for any help provided.
You should consider changing your jQuery code to:
$.ajax({
type: "POST",
url: "test_wID.php",
data: {id: $("#ID").val()},
success: function(data) {
$('#rightselection').html(data)
}
});
You mixed up strings and variable references at two points.
First, the statement var id = '$("#ID").val()' assigns just a string to your if variable and not the return value of the jQuery call. So just remove the ' here.
Second, the data parameter you're giving to the ajax() call again consists just of a string "id" and not the respective value. Here you need to change to {'id': id}.
So after correcting everything, your code should look like this:
$(document).ready(function() {
$("#CheckID").click(function() {
// submit ajax job and display the result
var id = $("#ID").val();
$.ajax({
type: "POST",
url: "test_wID.php",
data: {'id': id},
success: function(data) {
$('#rightselection').html(data);
}
});
});
});
Sidenote: Try to put all ;, where they belong. This prevents some errors, which can be hard to track!
EDIT
As pointed out in the comment by #FlorianMargaine you only need one wrapper not two around your code.
Firstly, the two following snippets are equivalent:
$(document).ready(function() {
});
// Is equivalent to:
$(function() {
});
So your code does the same as:
$(document).ready(function() {
$(document).ready(function() {
});
});
Plain useless, right?
Secondly, this line is plain wrong:
var id = '$("#ID").val()';
You're passing a string to the id variable. $('#ID').val() is not evaluated. This is the equivalent of doing this in PHP:
$id = '$_POST["id"]';
Which is just wrong, right?
You want this:
var id = $('#ID').val();
By the way, this variable naming could be improved, the same goes for the HTML ID.
Thirdly, you're doing the same mistake in the data option of $.ajax:
data: 'id'
You're just passing a string to the data option. You want the value of the id variable.
Then, if you absolutely want a string, I don't recommend it. jQuery expects a special kind of string. You better pass an object. Like this:
data: {
id: id
}
Do you see why the variable naming is wrong? You can't differentiate the property from the value. If you had done the following:
var idValue = $('#ID').val();
You could use this:
data: {
id: idValue
}
Which is way more readable.
In your $.ajax call you need to do:
data : { id: id }
If you want to pass parameters in an AJAX call you need to pass a string similar to the GET string you see in urls. So something like: d=123&name=test
Change the line
var id = '$("#ID").val()'
To
var id = 'id=' + $("#ID").val();
I want to pass the id of the INPUT field to the PHP file providing options. Here's my HTML & jQuery code. But the PHP program gets the id as undefined. Thanks for helping.
jQuery :
$('.classfield').autocomplete({
//define callback to format results
source: function(req, add){
//pass request to server
$.getJSON("ajax/ajax_suggestions.php?id="+$(this).attr('id')+"&callback=?", req, function(data) {
//create array for response objects
var suggestions = [];
//process response
$.each(data, function(i, val){
suggestions.push(val.name);
});
//pass array to callback
add(suggestions);
});
},
//define select handler
change: function(e) {
$("#spill").html("change "+$(this).val()+e.type);
}
}); // autocomplete
HTML:
<input type="text" class="classfield" id="hello" value="there"></input><br>
the value of $(this).attr('id') is undefined because this is the object that is put in the parameter of autocomplete (the parameter of autocomplete accepts an object, so if you use $(this).attr('id'), you are referencing the object that was passed in the parameter on the autocomplete)
therefore you cannot use $(this).attr('id').
You have to store the id of the text field, may be as a global variable... Hope this helps a little bit
Try getting the id from this.element:
//pass request to server
$.getJSON("ajax/ajax_suggestions.php?id="+this.element.attr('id')+"&callback=?", req, function(data) {
Also see this example.
I am trying to use this piece of code to serialize a form AND send an extra variable not found in the form, at the same time. The following line of code is what I expected, but sadly does not work.
var thePage = theFilename();
$.post("pagedetail.php", { $("#PageDetailForm").serialize(), thePage: thePage },
function(data) {
alert(data);
});
Any ideas?
var serialized = $('#PageDetailForm').serialize();
serialized.thePage = thePage;
$.post("pagedetail.php", serialized,
function(data) {
alert(data);
});
what you can do is to add the extra data to an hidden input and catch it in the
pagedetail.php page .
eg lats say your form
<form id='PageDetailForm'>
<input type="hidden" name="value" id="value" value="the value u wamnt to add goes here" />
....other inputs
</form>
after this just do your normal $.post
$.post("#pagedetail.php",$("#PageDetailForm").serialize(),function(data){
$("#ans").html(data);
// in the pagedetail.php
$echo $_POST['value'];
hope dis help if ur still confused hola me #dplumptre
Try this for the second parameter to $.post:
{ form: $("#PageDetailForm").serialize(), thePage: thePage }
Hopefully you still need this :).
Try the serializeArray() method and then push some additional data in the resulting array, so you don't have splitted arrays etc.:
var postData = $('#form-id').serializeArray();
var additionalData = $('#additionalDataID').val();
postData.push({name: 'additionalName', value: additionalData});
and finally:
$.post(URL, postData);
Try sortable('toArray'):
var thePage = theFilename();
$.post("pagedetail.php", { pageDetailForm: $("#PageDetailForm").sortable('toArray'), thePage: thePage },
function(data) {
alert(data);
});