i am using this http://multidatespickr.sourceforge.net/#method-addDates to enable multiple date select. everything works fine but i am wondering how to get the selected dates to PHP.
below is the html code.
<input type="text" name="outgoing_call_dates" value="" id="outgoing_call_dates_id" class="hasDatepicker">
as you can see value tag is empty always when i add, its normally appending to the end but not value tag is doing the same. please check this image.
Original source : http://multidatespickr.sourceforge.net/#method-addDates (example : From input)
Please help me find a way
HTML
<input id="datePick" type="text"/>
<input id="get" type="button" value="Get" />
JS
$('#datePick').multiDatesPicker();
$('#get').on("click",function(){
var dates = $('#datePick').val();
if(dates !=''){
dataString = 'dates='+dates;
$.ajax({
type:"POST",
url : "URL_TO_PHP_FILE",
data : dataString,
dataType : 'json',
success : function(data) {
alert(data);
}
)};
}
});
PHP
$dates = ($_POST['dates']);
echo json_encode($dates);
value attribute defines default value. If you change the value of input element, it won't be inside source with value="YOUR_ENTERED_VALUE" .
To access value in client side, you can use JS or jQuery.
For example using jQuery:
var dates = $('#outgoing_call_dates_id').val();
In pure JS:
var dates = document.getElementById('outgoing_call_dates_id').value;
For PHP,
when you'll receive it on your action page.
On that page,
use this:
$dates = $_POST['outgoing_call_dates'];
or
$dates = $_GET['outgoing_call_dates'];
depending on the method you use.
Please have a look # this....!
Hope this will fix your issue :)
<no codes :|>
http://jsfiddle.net/3t4j9/23/
Related
I am struggling trying to figure out how to implement a jquery UI date range form that will allow the modification of MySQL queries according to the inputted date range. Ideally, I would like to make my date range form introduce the new query data dynamically, without having to reload the page. I realize that the best and simplest way to do this is to use AJAX to send the form data to a backend PHP file. However, I am confused over how to use AJAX to modify existing queries. In my main front-end file, I have a date range form as follows:
<form id="myForm" action="#" method="post" name="myform">
<input type="text" class = "datepicker" id="txtStartDate" placeholder = "Start Date" style = "width : 85px; margin-left: 10px; margin-top: 1mm;"/>
<br />
<input type="text"class = "datepicker" id="txtEndDate" placeholder = "End Date" style = "width : 85px; margin-left: 10px;"/>
<br />
<input type = "button" name = "submit" value = "Go" style = "margin-left: 10px;"/>
</form>
I am clearly yet to write the AJAX function, but thought it would help to show the MySQL query I would like to modify to include a date range feature. Here is what it looks like before the date range variables have been set:
SELECT project, participant, reel, machine, qc_gsr, qc_hr, qc_acz, qc_bre
FROM rtcdb.session
WHERE site = 'ORL001';
And this is what I would like it to look like after the date range PHP variables have been set:
SELECT project, participant, reel, machine, qc_gsr, qc_hr, qc_acz, qc_bre
FROM rtcdb.session
WHERE site = 'ORL001'
AND download_date >= '$start_date'
AND download_date <= '$end_date';
So all in all, I would like to use AJAX to send form date to a back end PHP script that either modifies or switches MySQL query-usage in the original file to select in terms of the set date-range. Thank you very much for viewing this question and for your insight. It is valuable to me.
$("#myForm").submit(function () { //Ajax event handler on submit
$.ajax({
type: "POST",
data: $(this).serialize(),
url: "pathToYourScript.php",
success: function (response) {
//Warn user everything went okay
},
error: function () {
//Tell there's been an error
}
});
});
In your PHP, just check if the $start_date and $end_date are set. If positive then switch query (make sure to use prepared statements by the way).
If you don't need the callbacks in the Ajax you can even use $.post() method. Everything you need is in the docs.
Use this jquery code
$("#myForm").submit(function(){
$.ajax({
url : "data.php",
type : "POST", //(POST or GET it depends up on your form action)
dataType : "JSON",
data : $(this).serialize(),
success : function (data)
{ alert("form submission is successfull"); } ,
error : function () { alert("something went wrong");}
});
});
In php file try to get the date using POST or GET automatical global variable and then pass it to the sql query as a parameter .Use any good php drivers such as pdo for avoiding sql injection .
Ok, so I've gotten most of this thing done.. Now comes, for me, the hard part. This is untreaded territory for me.
How do I update my mysql database, with form data, without having the page refresh? I presume you use AJAX and\or Jquery to do this- but I don't quite grasp the examples being given.
Can anybody please tell me how to perform this task within this context?
So this is my form:
<form name="checklist" id="checklist" class="checklist">
<?php // Loop through query results
while($row = mysql_fetch_array($result))
{
$entry = $row['Entry'];
$CID = $row['CID'];
$checked =$row['Checked'];
// echo $CID;
echo "<input type=\"text\" value=\"$entry\" name=\"textfield$CID;\" id=\"textfield$CID;\" onchange=\"showUser(this.value)\" />";
echo "<input type=\"checkbox\" value=\"\" name=\"checkbox$CID;\" id=\"checkbox$CID;\" value=\"$checked\"".(($checked == '1')? ' checked="checked"' : '')." />";
echo "<br>";
}
?>
<div id="dynamicInput"></div>
<input type="submit" id="checklistSubmit" name="checklistSubmit" class="checklist-submit"> <input type="button" id="CompleteAll" name="CompleteAll" value="Check All" onclick="javascript:checkAll('checklist', true);"><input type="button" id="UncheckAll" name="UncheckAll" value="Uncheck All" onclick="javascript:checkAll('checklist', false);">
<input type="button" value="Add another text input" onClick="addInput('dynamicInput');"></form>
It is populated from the database based on the users session_id, however if the user wants to create a new list item (or is a new visitor period) he can click the button "Add another text input" and a new form element will generate.
All updates to the database need to be done through AJAX\JQUERY and not through a post which will refresh the page.
I really need help on this one. Getting my head around this kind of... Updating method kind of hurts!
Thanks.
You will need to catch the click of the button. And make sure you stop propagation.
$('checklistSubmit').click(function(e) {
$(e).stopPropagation();
$.post({
url: 'checklist.php'
data: $('#checklist').serialize(),
dataType: 'html'
success: function(data, status, jqXHR) {
$('div.successmessage').html(data);
//your success callback function
}
error: function() {
//your error callback function
}
});
});
That's just something I worked up off the top of my head. Should give you the basic idea. I'd be happy to elaborate more if need be.
Check out jQuery's documentation of $.post for all the nitty gritty details.
http://api.jquery.com/jQuery.post/
Edit:
I changed it to use jquery's serialize method. Forgot about it originally.
More Elaboration:
Basically when the submit button is clicked it will call the function specified. You want to do a stop propagation so that the form will not submit by bubbling up the DOM and doing a normal submit.
The $.post is a shorthand version of $.ajax({ type: 'post'});
So all you do is specify the url you want to post to, pass the form data and in php it will come in just like any other request. So then you process the POST data, save your changes in the database or whatever else and send back JSON data as I have it specified. You could also send back HTML or XML. jQuery's documentation shows the possible datatypes.
In your success function will get back data as the first parameter. So whatever you specified as the data type coming back you simply use it how you need to. So let's say you wanted to return some html as a success message. All you would need to do is take the data in the success function and place it where you wanted to in the DOM with .append() or something like that.
Clear as mud?
You need two scripts here: one that runs the AJAX (better to use a framework, jQuery is one of the easiest for me) and a PHP script that gets the Post data and does the database update.
I'm not going to give you a full source (because this is not the place for that), but a guide. In jQuery you can do something like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { // DOM is ready
$("form#checklist").submit(function(evt) {
evt.preventDefault(); // Avoid the "submit" to work, we'll do this manually
var data = new Array();
var dynamicInputs = $("input,select", $(this)); // All inputs and selects in the scope of "$(this)" (the form)
dynamicInputs.each(function() {
// Here "$(this)" is every input and select
var object_name = $(this).attr('name');
var object_value = $(this).attr('value');
data[object_name] = object_value; // Add to an associative array
});
// Now data is fully populated, now we can send it to the PHP
// Documentation: http://api.jquery.com/jQuery.post/
$.post("http://localhost/script.php", data, function(response) {
alert('The PHP returned: ' + response);
});
});
});
</script>
Then take the values from $_POST in PHP (or any other webserver scripting engine) and do your thing to update the DB. Change the URL and the data array to your needs.
Remember that data can be like this: { input1 : value1, input2 : value2 } and the PHP will get something like $_POST['input1'] = value1 and $_POST['input2'] = value2.
This is how i post form data using jquery
$.ajax({
url: 'http://example.com',
type: 'GET',
data: $('#checklist').serialize(),
cache: false,
}).done(function (response) {
/* It worked */
}).fail(function () {
/* It didnt worked */
});
Hope this helps, let me know how you get on!
I need to pass an array to a php page with AJAX. This array of input elements gets sent to the other page:
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith" size="117" >
This is how I prepare it for sending:
var txtCoursesNamewith = $.serialize($('#txtCoursesNamewith').val());
But I get this error when running the script:
TypeError: $.serialize is not a function
How can I send an array with AJAX?
I am facing same problem and, i am just using code like this.
but first of all please insert one hidden field and set textbox id like this:
<input type="hidden" name="txt_count" id="txt_count" value="3" />
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith1" size="117" >
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith2" size="117" >
<input type="text" name="txtCoursesNamewith[]" id="txtCoursesNamewith3" size="117" >
<script type="text/javascript">
var txt_count= $('#txt_count').val();
for (i=1; i<=txt_count; i++){
queryString += "&txtCoursesNamewith%5B%5D=" + $('#txtCoursesNamewith'+i).val();
}
</script>
finally we can pass queryString variable to ajax, and you can print array.
<?php
echo "<pre>";
print_r($_GET); // or print_r($_POST);
?>
var textBoxes;
$('input[name="txtCoursesNamewith[]"]').each(function() {
textBoxes+=$(this).val()+"|||";
});
Now the textBoxes have all the values of text field with ||| separated and pass to php script and use explode() function to split each input value . may it helps u
You don't need to use .val() because .serialize() works on a the field itself, not on the value. (because it needs to get the name and the value from the field)
You can also call serialize() directly on a jQuery object, rather than using the jquery object as a parameter. Do it like this:
var txtCoursesNamewith = $('#txtCoursesNamewith').serialize();
Hope that helps.
Because $.serialize($('#txtCoursesNamewith').val()) is a string and not a jQuery object, it doesn't have the serialize function.
If you want to serialize the input (with its value), use $('#txtCoursesNamewith').serialize();
$.ajax({
type: 'POST',
url: your url,
data: $('#'+form_id).serialize(),
success: function(data) {
$('#debug').html(data);
}
});
Then in php
<?php
print_r($_POST);
?>
I have one problem...
These are names of some my html form elements:
name="password"
name="meta[naziv_firme]"
This is my jQuery
var data = {action: 'edit', form: $('input', 'form#edit-klijent-form').serialize()}
console.log(data);
$.get('/index.php/admin-ajax', data,
function(response){
// Success
$('div#edit-klijent-div,.tipsy').hide();
$('div#klijent-edit-success').show();
});
Console.log gives me result:
action edit
form userID=12&password=&password-match=&email=test15%5Bmeta%5Bnaziv_firme%5D=test15&meta%5Bkontakt_osoba%5D=test156&meta%5Bkontakt_telefon%5D=test157&meta%5Bkontakt_email%5D=test158
So everything look OK!
Now in PHP I have var_dump($_GET); and the result is:
string(165) "userID=12&password;=&password;-match=&email=test15&meta;[naziv_firme]=test15&meta;[kontakt_osoba]=test156&meta;[kontakt_telefon]=test157&meta;[kontakt_email]=test158"
Why does PHP put ; after password, in &meta;[... ??
And ideas? What am I doing wrong?
Thank you!
In your HTML form element, add:
<input type="hidden" name="action" value="edit">
And change this line:
var data = {action: 'edit', form: $('input', 'form#edit-klijent-form').serialize()}
Into this:
var data = $('input', 'form#edit-klijent-form').serialize();
Can't really test it since I don't have your HTML or server configuration, but I think it should work.
Update:
To clarify #AnthonyGrist's comment above, let's observe what serialize does:
<form>
<input type="text" name="input1" value="foo">
<input type="text" name="input2" value="bar">
</form>
<script>
var data = $('form input').serialize();
// data is now: 'input1=foo&input2=bar'
</script>
If you assign the value returned above to a query parameter (which PHP accesses using $_GET), you're basically telling PHP that $_GET['form'] equals the string above, which is not what you intended. PHP would not parse the contents of $_GET['form'] to give you $_GET['input1']... The value returned by serialize() should be used as the 2nd argument to $.get() directly.
Change your code from:
var data = {action: 'edit', form: $('input', 'form#edit-klijent-form').serialize()}
To:
var data = "action=edit&" + $('input', 'form#edit-klijent-form').serialize();
I think it is what you're trying to achieve.
i am creating a few input fields in a foreach loop:
<?php foreach($this->results as $value){?>
<td>View Detail
<input name="processor" id="processor" type="text" value="<?php echo $value['processor']; ?>">
<input name="auth_code" class="auth_code" type="hidden" value="<?php echo $value['auth_code']; ?>"></td>
<? } ?>
is will give me something like:
<td>
View Detail
<input name="processor" class="processor" type="text" value="19">
<input name="auth_code" class="auth_code" type="text" value="4">
</td>
<td>
View Detail
<input name="processor" class="processor" type="text" value="9">
<input name="auth_code" class="auth_code" type="text" value="11">
</td>
...
then i try to get the values:
$('.buttonDetails').live("click", function (){
var processor = $('.processor').val();
alert(processor);
$.ajax({
type: 'POST',
dataType: 'json',
url: '/decline/list',
async: false,
data: {
processor: processor,
processor: auth_code
},
success: function(json) {
$('#details').html(json.processor);
}
});
return false;
});
the problem i have is that my alert gets the same number (usually the first value from the first input) when i click on any link.
any ideas ho to fix this? i've tried replacin classes with id's and 'click' with 'live' but still nothing
edit:
i believe i need to differentiate the classes so he links will know what value to pull..??
edit: what if i want to get the 'auth_code ' also?
Try:
$('.buttonDetails').live("click", function (){
var processor = $(this).next(".processor").val();
alert(processor);
/* snip */
});
Use next to get the input next to the link that was clicked.
Update (due to comment).
You could find auth_code similarly using nextAll instead:
var auth_code = $(this).nextAll(".auth_code").val();
Also, are you sure you're supplying the correct values to your AJAX call? It looks like you're specifying processor twice. The first value specified for processor will be overwritten.
If you just want the next item you can use jquery next()
$('.buttonDetails').live("click", function (){
var processor = $(this).next().val();
alert(processor);
return false;
});
here is a fiddle
http://jsfiddle.net/znge4/1/
data: {
processor: processor,
processor: auth_code
},
the 'auth_code' line will overwrite the 'processor' line, effectively making it
data: {
processor: auth_code
},
only. You can't have a single key with two different values in a associate array/object. For submitting same-name fields to PHP, use its fieldname[] notation, which tells PHP to treat that particular form field as an array.
<input name="processor[]" ...>
<input name="processor[]" ...>
and pass the data to JQuery via
data : $(this).serialize()
use Jquery .next() which should give you the next element
You get the same value no matter which anchor tag was clicked because of this line:
var processor = $('.processor').val();
You're searching the entire DOM for all elements with class 'processor', which returns every input, and then .val() will return the value of the FIRST match (the first input).
Try this instead:
var processor = $(this).next('.processor').val();
All you need to do is get the value from the element they clicked. Using Jquery's 'this' keyword should solve your problem.
$('.buttonDetails').live("click", function (){
var processor = $(this).next().val();
alert(processor);
The 'this' will select the 'a' they clicked on, then next will iterate to the next sibling, in this case your input, and the val retrieves that value as before.