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
Related
I have HTML form and I would like to print the HTML form, with the User Filled Information/Content.
Is there exist any way in jQuery or JavaScript to get a HTML Form with user filled values and print it?
This is what I have tried
$(form).html() but it returns only empty form
$(document).find("form").html() which also returned html with empty form.
NOTE: I am not talking about serialize function here. I don't want to submit a form but want to convert form to a printable version by setting input, select background transparent.
You can use
$('form').find('input').each(function( key, value ) {
console.log(value);
});
And to get the data ready for POST or something like it use this
$('form').serialize();
I think I got your issue. What you are actually want is, to print the HTML form, but it should contain the User Input.
First and foremost, you can use the 'window.print()' method. If you want to print only the Form, then you should use some CSS tricks.
I guess, what you are looking is answered in the following SO Questions. Please check out.
Javascript print web form with user input included
How to print only a selected HTML element?
If you are still not able to get your solution done, then let me know. Let me see how I can help you. Good Luck.
A client needs a system in which their customers will be able to check the photos (displayed on a grid) and send an e-mail (via a form placed below the photo grid) with the photos' IDs.
The first alternative that came in mind was apply the onclick to get the photos' ID, but I have no idea how to send them to the form.
Quite easily, just run the onclick event to get the id which you store in variable and then replace the form input tag value with this value:
var id; // contains image id
$("input").val(id);
or if you have more input tags then add id attribute to them and change corespondingly the selector. And then you can fire the submit button to post the form data.
Or more advanced yet in this case more appropriate way is to send data with ajax without the need of any form.
There are multiple form on one html page which is created dynamically using ckeditor.
The requirement is to get total number of form and its name and also, in each form all the element name.
using that data, i have to call some API call with that name.
all using jquery or javascript.
USING JQUERY
$("form").each(function() {
// apply logic here to find name etc
}
Number of iterations here means number of forms in your page
USING JAVASCRIPT ONLY
var list=document.getElementsByTagName("form")
for(i=0;i<list.length;i++){
//logic here
}
You could use document.getElementsByTagName("form"); to get all forms. With each form you could then just get the name attribute.
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';