Is there a way to access the whole data array/object (which contains all the data form input fields etc) before sending it to the server with Form.Request? I know there is the extraData option which allows you to pass in other data, but I would like to access the actual form data and to some manipulation with it.
Before being sent to the server? I'm not entirely sure, the send method attached to Form.Request sends in the form itself, and the data, but this is probably after the request has already been fired off.
I tend not to use Form.Request, precisely because I have to do these form manipulations and such.
Instead of using a Form.Request Class, I simply iterate through the form's inputs as necessary.
e.g.
<form id="foobar">
<input type="text" id="lorem" />
<select id="ipsum">
<option>...
</select>
</form>
<script>
var formValues = document.id('foobar').getElements('input, select');
</script>
Related
In express app I have button which incrementing value, and that value should be multiple with price. That value is in a div, not in a form.
In JS I would do something like this:
document.getElementById('quantity').innerHTML;
But how to grab this value with express?
I was thinking with help of hidden form element, has anyone suggestion or better solution?
<td data-th="Quantity" id="quantity" class="text-right">5</td>
<form action="#" method="get">
<input type="hidden" name="quantityVal" value="{{ ?? }}">
</form>
img
You can't just "grab" a value from HTML with Express. The only way is to perform an AJAX request and send that value with your request to your Node server, where you can access it with req.body.
You can read more about AJAX here: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
The server can only reach what's in the request, it can never reach the web page itself. If you have 2 different pages that send exactly the same request, the server will treat them the same.
So you yes, hidden input is the way to go.
I am required to send data from an html page, via input elements to a php script and I cannot use ajax for some reason. How to accomplish this?
My code is something like this:
HTML:
First Name : <input type"text" name="first_name">
<br><br>
Last Name : <input type"text" name="last_name">
<br><br>
<button id="submit_btn">Submit</button>
Now, I want the javascript to be something like :
function redirect_from_here() {
close(); //close the current window
window.location='./phpfile.php'; //load the new page which will process the data sent to it.
}
My question is how do I send the value in the input elements in the HTML portion, as data to be processed, to the php script (phpfile.php in this case).
Please note that I prefer not to use html form for doing the job.
You are using HTML form as there are input fields in you code.
Inputs are part of a form and should be wrapped by a form element
Why using JS for submitting the form when you can use <form action='script.php'.. for that?
I suggest that you revise your requirements instead of trying to come up with a hackish way of how to send the data..
Just submit a form with action="phpfile.php"
if not interested with html,
then in the window location bind the values as a GET form method do
Well, I have a lot of input fields in a form, some of them are like this:
<input name="agents[]" type="file" />
Moreover suppose there is a plus button besides this field like this:
<img src="plus.jpg" id="some_id" />
A user can add more agents field in addition to the one field present already.
So I was wondering how would I handle these kind of input fields when submitting form data through Ajax? Using JavaScript objects perhaps?
What's the main problem?
For Ajax uploading i'm using https://github.com/blueimp/jQuery-File-Upload
For handling dinamic form contents i use jquery .serialize()
Like this
var info = $("#additem").serialize();
$.post('/url.php', info, function(data) {
// response
}, 'json');
"additem" is the id of the form
<form id="additem">
i have a textarea defined by an id
<textarea id='vegetable'> Tomato </textarea>
i have a button
<button type="button" onclick="MyFunction()">generate vegetable</button>
which trig a javascript in order to modify the content of the textarea
<script>
function MyFunction()
{
document.getElementById("vegetable").innerHTML = VegetableNameGenerator();
}
</script>
The problem is this php action :
<form action="{{ path('mypath', { 'myparam': ??? }) }}" method="post" >
<input type="submit" />
</form>
??? must be the content of the textarea (which is also known by the javascript code) but i don't know how to access it in twig.
I guess there are several way of doing that : jquery, dom, global variable twig... any syntax example would be great.
This is impossible in the way you're describing it.
When a request is made to the server, twig renders the page, then it is sent to the browser, and then javascript can run.
There are options for how to make this work:
Create a controller action which returns the rendered path when you call it using a GET request with the provided parameter. Then create an event listener on the submit button that blocks the submit process until it has retrieved the route via AJAX and modified the form's action attribute.
Redirect from your controller to the path you want displayed. myparam will be included in the post data, so you can redirect from your controller action after you've handled the form.
$this->redirect($this->get('router')
->generate('mypath',
array('myparam'=>
$this->getRequest()->get('myparam')
),
true);
I have a javascript form where I am using innerHTML to set some text.
When the form submits that information is lost.Is there anyway I can make it "sticky".I was thinking a cookie but that's about all I know.
Thanks
<form "action="" name="myform">
<input type="text" name='name">
<div id="theName"></div>
</form>
Quick example I am capturing the name and need the div to show the name after the form submits.
You will need to persist the data somehow. There are several options:
Store it on the server. When the form is submitted, your server-side script will receive the data; it can persist it in a database, session variable, or some other form of storage that's appropriate for your application. Whenever the client re-visits the page with the form, have the server generate the form's HTML with the persisted data.
Use HTML5's local storage. While not supported in legacy browsers, all modern ones provide the local storage API. When the user submits the form (attach an event listener to the form's "submit" event), you can store the form data by making calls to localStorage[key] = value and retrieving it with localStorage[key].
Store it in a cookie. Although I don't recommend this approach, you can create a cookie with the form data. The only restriction is that the data needs to be represented as a string, but I recommend JSON. However, you probably should not use this approach since cookies are sent to the server for each request; if the form fields contain a lot of data, then you're also unnecessarily sending a lot of data to the server.
Using HTML5's local storage gives you a self-encapsulated approach that requires no server-side configuration:
<form action="" name="myform">
<input type="text" name="name">
<div id="theName"></div>
</form>
<script type="text/javascript">
(function() {
var form = document.getElementsByName('myform')[0];
if (localStorage['name'] !== undefined) {
var displayArea = document.getElementById('theName');
displayArea.textContent = localStorage['name'];
}
form.addEventListener('submit', function() {
var nameField = document.getElementsByName('name')[0];
localStorage['name'] = nameField.value;
}, false);
})();
</script>
Are you setting the "value" attribute of the input tags to something or blank? you can just remove (remove the attribute itself) that so that the last value set will be used (true only for non-password type inputs. also, haven't tried it in all browsers.).
Or better yet, you can use serverside script like (PHP, ASP, RUBY, etc) to set the attribute value to the previously submitted.
<form method="post">
<input type="text" name="txtinput" id="txtinput" value="<?php echo $_POST['txtinput']?>"/>
<input type="submit" value="submit">
</form>
doing it in js only is much more complicated and unreliable since your going to use cookies.
PS: I'm assuming your not using XHR(AJAX) to submit your forms since XHR's don't refresh pages or re-initializes inputs unless you told them to.
This should be happening server-side. Javascript is for enhancing a page, it's not to be depended on for data manipulation.
Your script, converted to PHP, would look like
<form action="" method="post" name="myform">
<input type="text" name='name">
<div id="theName"><?php
if(isset($_POST['name'])) { echo $_POST['name']; }
?></div>
</form>
...and it would work every time, without having to call any JS.
You'll have to handle the form data somehow anyway - how were you intending to retrieve the data without a server-side script?