Input from Model not included in form POST data - javascript

I have a simple HTML POST form with a model contained within like so:
https://jsfiddle.net/pilotman/rn9gspz8/6/
note: the JS fiddle is basic and just for demo and is not perfect.
So when I submit the form and let the input inside the model has some text, my server script does not see 'input2'
$_POST['input2'];
Does the data inside the model get sent with the POST data from the form?
If not can it be done (I assume anything inside the form tag would be sent but I am clearly wrong)?
Thanks

Your code is correct. as per your jsfiddle
$_POST['input1']; is the normal input
$_POST['input2']; is the popup model input field;

Related

Get some content using $_POST and send it via e-mail

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

Print the HTML form with User Filled Information/Data

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.

AngularJs - show validation message for custom form control

I have a custom form control (a directive which is not an input element) which implements ng-model (as suggested here) and it works fine. Validation is triggered on the form submit and the directive is made valid/invalid correctly.
The problem is how to display an error message. I tried like for normal form input fields:
ng-show="form.fieldName.$error.required"
but I cannot access field through name. form.fieldName is undefined.
Please make sure that you defined your form name inside of form tag. After that try to print formname.fieldname
Actually the problem was with transclusion. Once I fixed it element was normally accessible through the name.

JQuery fill the form but failed to be recognized

I am using Flask as the backend. And I wrote a simple form with WTForm, say,
field = StringField('input:', validators=[Required()])
And I write a JQuery to fill it automatically
$('#theidofthefield').val('fillingin');
And I click the submit button in the form but it shows that the field is empty. And I check the request.form.field.data is also empty.
Hope to get a solution.
I have no idea about WTForm but you can check if your field element has got the name attribute, which is required to send back to the backend code.
Your field has to be something like this:
<input type="text" name="thenameofthefield" id="theidofthefield" />
//-----------------^^^^^^^^^^^^^^^^^^^^^^^---name attribute is required.
Another way to fill value is:
$('#theidofthefield').attr('value','filling');
Lets see if it works..
In case variable field is pointer to the object then..
$(field).val('dfsdf') or $(field).attr('value','filling') may work.

Eliminating the Need For Hidden Input Fields

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...

Categories

Resources