I have several hidden input fields used to hold coordinates calculated by javascript. The purpose of these fields is to pass the coordinates when the form is submitted. I am using an AJAX request through MooTools. Is there a simple way to eliminate the hidden input fields and append them to the $_POST data being sent through the form?
yes. if very much depends on the way your form data is defined / how it is sent. for example:
new Request({ data: $("formid") }).send(); will serialise the form and send all form fields through. what you can do is move the hidden fields into the form before submit so it will include them also (via $("formid").adopt(el1, el2, ... eln); where els are your hiddens - or a collection you have done like $$("input[type=hidden]").
if you compose the data object manually then just add them to it with a key, its just a hash table of key->value pairs.
I don't use MooTools, but my experience with Prototype, jQuery, and raw Javascript patterns is that Javascript-based POSTs are done with a <form> element created on the fly. Appending POST data is done by adding hidden input fields to that form element, and then the form is submitted.
What's the reason you don't want to use hidden input fields? Does the job for me...
Related
I have a Javascript calculator inside a form, that computes some simple Math formulas based on some values filled in the form and displays some results inside html tags with different IDs.
When clicking on SUBMIT button, an e-mail is sent with data that has been filled in the input fields and the computed results.
I have no problem regarding the standard form fields (input, select) but the computed values. Those values are in html tags with IDs, and I am trying to POST those IDs but I get nothing.
How can I read and send via POST to a mail function some texts and values that are modified on the fly by a javascript?
You have 3 options
1.Use JS for performing request. For example in jQuery you can do it like that:
$.post('/your-url', {some_value: $('#your-field-id').val()}, function (data) {
// some code after submitting
});
2.Add some hidden fields with proper names and fill them with JS.
The thing is that when you submitting form only inputs with name are sent.
$('#hidden_field_with_name').val($('#your-id').val());
3.If those values are filled by JS in fields like: input/textarea or another input fields you can just add name property to them and then you'll get it on server side.
You can read more about submitting forms here: https://www.w3schools.com/html/html_forms.asp
If you already know the id's of the elements you want, simply using getElementById you can get the content inside of it. eg:
var someText = document.getElementById('yourElementId').text
and depending on what do you want, you could use .text or .innerHTML
var someHtml = document.getElementById('yourElementId').innerHTML
I have an HTML page that contains an unknown amount of forms. These forms are populated from an SQL Query using PHP. Because of the unknown amount of forms I chose to set each line as its own form. For submission, I only want to submit the forms that have been changed.
My first thought went to using javascript with an "onChange" function paired to the form fields to determine the form ID. Then I would imput this form ID into an array to be leveraged for the submission at the end.
I tried to navigate through the parent nodes, but because of the way I crafted the forms (using a table) I can not get the form ID.
In other words each row of a table is a form. If a certain row is changed, how do I get the form ID? Below is the structure of my HTML with the form section repeating an unknown amount of times. I am not very competent in JQUERY so I would prefer to do this in JAVASCRIPT so I understand what is happening, does anyone have any ideas?
<table>
<form>
<tr>
<td>
<select>
</td>
</tr>
</form>
</table>
Try giving different IDs for each forms, then set arrays for each forms and add the childrens of the parent form in those arrays. It won't be a difficult task because you can use PHP echo code between each arrays. Then make another array, using onChange event attributes or directly by JavaScript, make a piece of JavaScript code that will add the parent form's ID in the previously created array, if any of it's childrens are changed.
You try on the code and we will give you ideas and laws for applying....
I have 2 forms, 1 in my content and one in the sidebar of my website. I submit them via $_GET, but I want to submit the form when any of the selects are changed. Since they're in 2 different locations and wrapped in 2 separate form tags I need to append #form1 to #form2 then submit #form2. I've looked through the SO questions and everything deals with :input and clone() but according to the documentation clone() does not work with select boxes. It reads: .clone() Documentation
Note: For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea and user selections made
to a select) is not copied to the cloned elements. When cloning input
elements, the dynamic state of the element (e.g., user data typed into
text inputs and user selections made to a checkbox) is retained in the
cloned elements.
So how do I append a form of select to a separate form?
Here's what I've tried so far:
jQuery('#form1 select, #form2 select').change(function(){
// Tried this
jQuery('#form1 select[name="select_name"]').append('#form2');
// Tried this before the research
jQuery('#form1 select').clone().hide().append('#form2');
// Form submission works without the above code
jQuery('#form2').submit();
});
Neither of the above worked, nor do I get any errors in my console. Worst comes to worst I can loop through and append the values as hidden inputs but I was hoping to avoid that.
In your first attempt
jQuery('#form1 select[name="select_name"]').append('#form2');
will attempt to append #form2 to #form1 select[name="select_name"]
Thinking about it... how can you append a form to a select element?
If your intention is to append the select options from form1 to form2 then you just have to switch around those statements.
jQuery('#form2').append('#form1 select[name="select_name"]'); This will append the select options from form1 to form2
You can serialize the forms, append the result and issue a POST:
$.post( url, $("#form1").serialize() + "&" + $("#form2").serialize() );
I'm using jquery Populate to dynamically populate a field with the previous Firstname and Surname fields. All fields are in the same form.
The problem is when I populate the field using Populate javascript:
$(formname).populate(newfieldvalue)
It clears all the other form fields. Is there a way I can keep the other fields intact. It's a large form so I would prefer not to pass all the values back through.
You need to set resetForm to be false (default is true) in the options hash which is passed to populate.
$(formname).populate(newfieldvalue, {resetForm: false});
For more information on populate options, check out the bottom of this page.
I have several dynamically created hidden input fields. Most of which have a name formatted as array[]
Question 1:
How can I use jQuery .ajax() or .post() to get the values from every field named array[] and pass them so they'll be retrievable as $_POST['array'] in my PHP page?
Question 2:
Hypothetically speaking. Let's say that I don't know the name of said field but only the name of the form. How can I still do the same thing as in Question 1?
I found .serializeArray() in the jQuery documentation, but I have no idea what I'm doing with that and I'm not even certain if that applies to my situation of not knowing the field names.
Thanks in advance.
You want to use .serialize() on the form. This will make a query string of all form elements (including 'name[]' ones).
$.post('/url/to/post', $('#form').serialize(), function(data){
alert('POSTed');
});
You'll want to use jQuery's .serialize() method.
Check it out