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....
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'm working on dynamically changing a the textfields based on radiobutton selection.
If I select single, then it should display different kinds of fields in the form and when I select multi it has different.
To achieve this,
I created two div's to fit the elements which gets changed on radiobutton selection.
I put the textfields in first div(id="single") and repeated the same fields in second field in another div(id="multi").
Based on radio button selection this works, but when I submit the form the values I have the below problem:
When I select single, the form displays all fields required, but the submitted values are sent twice, i.e. in console I see two entries sent,
I guess it is taking the fields of multi as well.
But when I select multi it works fine, still I see two entries in POST of console.
How can I avoid this. Is it the right way of handling such situations or is there anything other than this.
Fiddle
Console:
Ivrmapping[WelcomeNotes]
Ivrmapping[audioWelcomeUr...
Ivrmapping[audioWelcomeUr...
Ivrmapping[groupZCode] Ba
Ivrmapping[groupzName]
Ivrmapping[groupzName]
Ivrmapping[ivrnumber] 123467901
Ivrmapping[language]
Ivrmapping[language] 0
Ivrmapping[selectionList]
Ivrmapping[selectionList]
Do something like:
$("#multi_language > input").attr('disabled', true);
$("#single_language > input").attr('disabled', false);
Disabling inputs remove them from request.
The name attribute of your fields need to be different in a form control in order to differentiate the values in the request. This does not help you NOT send values across that aren't being used, but it lets you distinguish on the server side which values are for which radio button selection.
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 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...
My goal untill now is to fill a form with values from a table (html table).
it is a kind of refreshing the form.
so the user who wants to modify the html table through the form must prefill the form with values wich he already selected.
I used the DOM to acces to each row and cell in the table and i used ajax to pass parameter to other jsp.
but Iam confused what shall be the next step to fill the form.
Just get the input element from DOM and set its value attribute.
document.getElementById('inputId').value = 'newValue';