Working from the ground up on a Joomla Component re-config. I'm trying to incorporate an AJAX search function in my component. So far, I have this:
$(document).ready(function() {
$('form').submit(function() {
var results = $('form').serialize();
var url = 'index.php?option=com_mls&task=ListData&format=raw&' + results;
$('#test').html(url);
});
});
This just need to dump the values of the the form elements into a div. right now, it will display the text string, but not the results var.
You are using $('form').serailize() so if your form input elements don't have any name attributes attached to them - which serialize will turn that into the key.. Then you won't get anything when you serialize the form.
Also since you are inside the form's submit function.. it would probably be better to use $(this).serialize() - that way if you ever have multiple forms on one page - it will know which form is getting submitted and serialize the correct form.
Related
I'm dabbling in JQuery, and have run up against an issue I'm not quite able yet to figure out. Here is the context:
I have a HTML form, utilising MySQL & PHP, used to edit a CMS post. This post would have a list of attachments (eg. images for a gallery, or downloadable files). Using JQuery, the user can click on these list item elements and edit the details of each attachment in a revealed div (eg. delete image, add capton, etc).
Currently when the user opts to delete an attachment, I simply fade its opacity and provide a new option to the user to 'undo' the delete. Upon submission of the complete parent form (the CMS post), I want to gather all the attachments still marked for deletion, and submit their GUID's to the PHP script that is doing all the rest of the post updating for me.
Option A:
Is it possible to submit a JQuery array to a PHP script alongside the data being sent naturally to the action script by the form inputs?
Option B:
Is it possible to fill / empty a (hidden) form input array dynamically with JQuery, which could then be submitted naturally to the action script with everything else?
I am currently at the stage where I am filling a Javascript array with the necessary GUIDs, but now don't know what to do with it.
//populate deleted attachments array
$(document).ready(function() {
$('#post-editor').submit(function() {
var arrDeleted = [];
$('.deleted-att').each(function(){
arrDeleted.push({guid: $(this).attr("data-guid")});
});
//do something with array
});
});
JSON.stringify the arrDeleted and put them in a hidden field in the form, that will be submitted.
$('#post-editor').submit(function() {
var arrDeleted = [];
$('.deleted-att').each(function(){
arrDeleted.push({guid: $(this).attr("data-guid")});
});
$('#post-hidden').val(JSON.stringify(arrDeleted));
});
Somewhere in your html:
<form id="post-editor">
<input type="hidden" id="post-hidden" name="post-hidden" />
<!-- ... other fields ... -->
</form>
Then json_decode($_POST['post-hidden']) on the server to get the array.
create a hidden field in your form..put the arrDeleted value in your input through jquery
and post the form..use json_decode() to get the posted value...
<input type="hidden" id="hidden"/>
JQUERY
$(document).ready(function() {
$('#post-editor').submit(function() {
var arrDeleted = [];
$('.deleted-att').each(function(){
arrDeleted.push({guid: $(this).attr("data-guid")});
});
$('#hidden').val(JSON.stringify(arrDeleted));
});
});
The easiest to do what you want would be to add a hidden input field to your HTML form
Then in jQuery do something like this
$('form').submit(function() {
$('#hidden_id_field').val( arrDeleted.join(',') );
});
arrDeleted in this case being your array you've already setup. It would sent a comma separated list then in your PHP you split up the values and act as you want.
Usually I just do AJAX and send JSON to my app. But the above approach will work if you really want to go about it like that. And it has the advantage of not actually deleting anything on the server until you submit the form.
You may be looking to do this with a traditional form submit and refresh, but if you're willing to submit the request asynchronously, you can use jQuery to submit the form and serialize the array of deleted items:
var form = $('#post-editor');
form.submit(function() {
var arrDeleted = [];
$('.deleted-att').each(function(){
arrDeleted.push({ // The format $.serializeArray produces.
name: "deleted",
value: $(this).attr("data-guid")
});
});
var formData = form.serializeArray();
// Add values to existing form data
formData = formData.concat(arrDeleted);
$.ajax({
url: form.attr('action'),
data: formData
// Other ajax options
});
});
On the PHP side, referring to $_REQUEST['deleted'] will return an array of GUIDs.
I have 4 forms on a page. I know that forms cannot be nested.
<form id="form1"></form>
<form id="form2"></form>
<form id="form3"></form>
<form id="form4"></form>
presented in that order.
Form 1 and Form 4 post to same php page for processing.
Form 1 have 1 input field
Form 4 have multiple fields, checkboxes and selects.
What is the best approach for both form 1 or form 4 sending the combined fields of both forms?
I've tried jQuery, works great for text input and checkbox, but can't get it to work with Select.
Tried combining form 1 and form 4 and using css to repositioning form 1, but can't get the layout right.
Is there something simpler to do this?
It's not possible. You can either use serialize() or serializeArray() method for getting forms' data and post them to the server using Ajax:
Encode a set of form elements as a string for submission.
$('#send').click(function() {
var firstFormData = $('form:eq(0)').serializeArray();
var fourthFormData = $('form:eq(3)').serializeArray();
$.ajax({
url : '...',
type : 'post',
data : firstFormData.concat(fourthFormData)
}).done(function() {
// ...
});
});
Okay, I could not get .serialize() to work with checkbox array from form4 e.g.
<input type="checkbox" id="model[]">
I tried to grab checked values but could not get them to serialize together with other input :
var vals = []
$('input:checkbox[name="model[]"]').each(function() {
if (this.checked) {
vals.push(this.value);
}
});
So I went back and did the simpler thing :
Removed form1, move the text input and the submit button within a <div id="searchbox" style="position:abosulte;top:-100px;left:0px;">My original form1</div> inside form4.
Put a placeholder <div id="placeholder" style="position:relative;"></div> above form2 and 3 where form1 used to be.
Place a javascript above :
$(document).ready(function(){
$("#searchbox")
.appendTo("#placeholder");
});
to move the text input and submit button to position them absolute and relative to the placeholder div.
This way I reduced them to 1 form (which is what its intention anyways), does not rely on javascript to manipulate any data, and does not require me to do the tandem serialization on both forms.
I am trying to write a script that will submit all the individual forms on a single page.
I start by counting the amount of forms, then using that count I iterate through each form and submit it.
On the PHP page each form is written like so:
<form name="order_driver_'.$j.'" class="order_container" id="save_'.$j.'"method="post" action="../scripts/order_driver_save.php">
I then use JavaScript to count each one and submit them:
function count_form(){
//Count the amount of outputs
var count = $(".order_container").size();
//Run loop for reults
for(count=count;count>0;count--){
//var save='order_driver_'+count;
document.order_driver+count.submit();
}
}
The issue I have is in the submit part:
document.order_driver_ + count.submit();
I can't concatenate the var count to the .order_driver_.
I am wondering how to do this so I can specify each form name to be submitted in the loop.
You are going to have to submit them via AJAX if you want them to all submit, because as soon as one is submitted, the browser will follow the request, and refresh the page. So even if you got it to concatenate, it would only submit the first.
UPDATE
While I know i might get blasted by suggesting you use jquery, I think in this situation, it greatly simplifies what you need to do.
this code will accomplish your goal if you use jQuery.
// #submit-click being whatever you want to initiate the mass form submit
$('#submit-button').click(function() {
$('form').submit();
});
//form submit event handler
$('form').submit(function() {
//get the form and serialize it's data
var form = $(this);
var data = form.serialize();
//submit via AJAX
$.post(form.attr('action'), data);
//prevent the default action of submit
return false;
});
notice that you will receive no confirmation that they have been submitted.
Note: you're going to have to make the calls separate from each other or the page will move to the target of the submit. Either Ajax calls or make the target be in a new window.
Change it to get the element and submit that element:
function count_form(){
//Count the amount of outputs
var count = $(".order_container").size();
//Run loop for reults
for(count=count;count>0;count--){
//var save='order_driver_'+count;
document.getElementById("order_driver_" + count).submit();
}
}
I want to post the Form but don't want to use the Submit method. If I use JQuery, how to handle the Form input controls?
You can use the jQuery AJAX .post function functions. An example (untested, but should be working):
<script>
function postit(obj) {
var data = $(obj).serialize();
$.post($(obj).attr("action"), data, function() {
//Put callback functionality here, to be run when the form is submitted.
});
}
</script>
<form action="posthandler.php" onsubmit="postit(this); return false;">
<input type="text" name="field">
<input type="submit">
</form>
Also, read about serialize
(Of course you need to include the jQuery library in your code before using this code).
Just create a function that is triggered by whatever event you want, for example: (found this code in another question)
function example() {
// get all the inputs into an array.
var $inputs = $('#myForm :input');
// not sure if you wanted this, but I thought I'd add it.
// get an associative array of just the values.
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
}
After that you can do whatever you want with the input values. You might want to consider using more advanced processing though, there are plenty of plugins that can provide this kind of functionality.
I am not sure if I understood the question correctly.
If you don't want to use submit(), you can do the same thing via jQuery.post() using Ajax. The main difference is you have to construct the key value data from the input fields yourself rather than the browser doing it automatically and you won't get a page refresh.
Either Post function or Load function will work.
#PRK are you trying to post the Form when the page loads or when a user hit a button?
load(url, parameters, callback)
eg:
$("#loadItHere").load("some.php", {somedata: 1});
I'm trying to send a lot of data from a form using the $.post method in jQuery. I've used the serialize() function first to make all the form data into one long string which I will then explode serverside.
The weird thing is when I try and send it using $.post it appends the result of the serialize() to the URL as if I was sending it using GET.
Anyone have any ideas why this is happening?
Here's the jquery:
$("#addShowFormSubmit").click(function(){
var perfTimes = $("#addShowForm").serialize();
$.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes }, function(data) {
$("#addShowSuccess").empty().slideDown("slow").append(data);
});
});
here's the php:
$show = $_POST['name'];
$results = $_POST['results'];
$perfs = explode("&", $results);
foreach($perfs as $perf) {
$perf_key_values = explode("=", $perf);
$key = urldecode($perf_key_values[0]);
$values = urldecode($perf_key_values[1]);
}
echo $key, $values;
If you are using a <button> element to activate the serialize and ajax, and if that <button> element is within the form element, the button automatically acts as a form submission, no matter what other .click assignment you give it with jQuery.
type='submit'
<button></button> and <button type='submit'></button> are the same thing. They will submit a form if placed within the <form> element.
type='button'
<button type='button'></button> is different. It is just a normal button and will not submit the form (unless you purposely make it submit the form via JavaScript).
And in the case where a form element has no action attribute specified, this submission simply sends the data back onto the same page. So you will end up seeing a page refresh, along with the serialized data appearing in the URL as if you used GET in your ajax.
Possible solutions
1 - Make the <button> type button. As explained above, this will prevent the button from submitting the form.
Before:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
<button id='mySubmitButton'>Submit</button>
</form>
After:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
<button type='button' id='mySubmitButton'>Submit</button>
</form>
2 - Move the <button> element outside the <form> element. This will prevent the button from submitting the form.
Before:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
<button id='mySubmitButton'>Submit</button>
</form>
After:
<form id='myForm'>
<!--Some inputs, selects, textareas, etc here-->
</form>
<button id='mySubmitButton'>Submit</button>
3 - Add in the preventDefault() into the button click handler to prevent the form from being submitted (it's default action):
$("#addShowFormSubmit").click(function(event){
event.preventDefault();
var perfTimes = $("#addShowForm").serialize();
$.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes }, function(data) {
$("#addShowSuccess").empty().slideDown("slow").append(data);
});
});
Obviously without seeing all your code, I have no idea if this is the case for your issue, but the only reason I have ever seen behavior you are describing is because the submit button was a <button> without a type specified.
try using serializeArray() instead of serialize(). serialize() will produce an url-encoded query string, whereas serializeArray() produces a JSON data structure.
What leads you to believe that the data is appended to the URL?
Anyway, wouldn't it make more sense to pass the form values in the form data itself? It will allow you to skip the "explode" step:
$("#addShowFormSubmit")
.click(function() {
var perfTimes = $("#addShowForm").serialize();
$.post("includes/add_show.php",
$.param({name: $("#showTitle").val()}) + "&" + perfTimes,
function(data) {...});
});
So this is probably a bit obtuse, but I made a function to help me do this very thing since I got tired of making a bunch of fixes every time. serializeArray is kind of annoying because it provides a collection of objects, when all I wanted to have PhP reconstruct was an associative array. The function below will go through the serialized array and will build a new object with the appropriate properties only when a value exists.
Firstly, the function (it takes the ID of the form in question):
function wrapFormValues(form) {
form = "#" + form.attr("id") + " :input";
form = $(form).serializeArray();
var dataArray = new Object();
for( index in form)
{
if(form[index].value) {
dataArray[form[index].name] = form[index].value;
}
}
return dataArray;
}
When constructing my posts I also usually use an object since I usually tag on two or three other values before the form data and I think it looks cleaner than to define it inline, so the final step looks like this:
var payload = new Object();
//stringify requires json2.js from http://www.json.org/js.html
payload.data = JSON.stringify(data);
$.post("page.php", payload,
function(reply) {
//deal with reply.
});
Server-side all you have to do is $payload = json_decode($_POST['data'], true) and you have yourself an associative array where the keys are the names of your form fields.
Full disclaimer though, multiple-selects probably won't work here, you would probably only get whichever value was last on the list. This is also created very specifically to suit one of my projects, so you may want to tweak it to suit you. For instance, I use json for all of my replies from the server.
Try this syntax. I use this to serialize a form and POST via ajax call to WCF service. Also, you can send this back a single JSON object instead of building the object the way you are. Try this:
var serializedForm = serializedForm = $("#addShowForm").serializeArray();
$.post("includes/add_show.php",
{
"myObjectName": ("#showTitle").val(), results: perfTimes
}, function(data)
{
$("#addShowSuccess").empty()
.slideDown("slow")
.append(JSON.stringify(serializedForm));
});
On the php side, you may want to look into parse_str. It will parse that url string into variables, or into an array if you utilize the 2nd optional parameter.
One more possible reason for this issue: If you have a form without any sort of submission action assigned to it, whenever you press the "ENTER" key while filling out the form, the form will be submitted to the current URL, so you will see the serialized data appear in the URL as if you were using a GET ajax transaction. A simple solution to this problem, just prevent ENTER from submitting the form when its pressed:
//Prevent Form Submission when Pressing Enter
$("form").bind("keypress", function(e) {
if (e.keyCode == 13)
return false;
});