I’ve been trying to find a “proper” way to do this for a few days now. Most things I find involve using AJAX and calling a PHP script. This is not really what I want to do.
Basically, I have a form with a submit button that sends the form data via POST. I just want to take a JS variable and add it to the POST data that goes with this submit function. This is what I’ve tried:
$('.js_submit').submit(function()
{ // Class for submitting JS variable to PHP POST.
$('<input />').attr('type', 'hidden') // Finds hidden input field.
.attr('calculated_words_per_minute', param.name) // sets param name to value
.attr(wpm, param.value) // sets the parameter value to wpm.
.appendTo('.js_submit'); // appends attributes to js_submit class element.
return true; // Unsure if this is necessary?
});
My understanding of the above code is that the input with class js_submit, when submitted, will find a hidden input field within the form and add the JS variable value to the field and append that to the submission.
For one, is that the best way to do this? And for two, that has yet to work for me. Also, I’m unsure if the hidden input field is even necessary.
Ideally it’d be as simple as “find this array index and assign this value to it in the POST array”.
Without seeing more context it is hard to tell what is going on.
Are you trying to alter data being sent in a form? Or are you trying to post data independent of a form?
If you do not need to submit an entire form, but only need a little bit of data, jQuery has a nifty $.post function.
$.post('/path/to/your/script.php', {
fields: 'to',
send: 'to the server'
}
Without using ajax, you do need to add an input to the form, with the name and value you want to send. (This assumes, as you implied, the form has method="POST".)
var form = document.querySelector('form');
form.addEventListener(
'submit',
function (e) {
var input = document.createElement('input');
input.setAttribute('hidden', true);
input.setAttribute('name', 'name-you-want');
input.setAttribute('value', 'value you want');
form.appendChild(input);
}
);
jquery would be mostly similar to what you’re doing now, just need name and value attributes.
because ajax is awesome.
this implies a misunderstanding of how javascript and php “interact.” to clarify, they DON’T.
javascript happens in the user’s browser, php happens on your server. php does not know javascript exists; javascript does not know php exists. they communicate only by sending http messages (ajax, or regular form submission).
The situation is that I have a large form I’m submitting. I want to add one variable of JS to the PHP POST array that the form produces when the user hits the Submit button.
Specifically, I have a JS script calculating the user’s typing speed (approximately). I want that submitted with the data they actually enter.
Every example of using .post I’ve found involves calling another php script.
param is the parameter that is being added to the PHP POST array. wpm is Words Per Minute which is the actual JS variable that is being added.
For example, in the PHP Array, there is a parameter called calculated_words_per_minute. That JS is going to the hidden field, which is named the same thing as that’s the value’s source, and making it equal to the variable wpm. At least that’s what I expected that bit of script to do. After changing those attributes, it appends them to the submit input.
Here is where I found that section:
It’s the answer on that page.
I’ve found that is true. Every example I’ve found involves using .post and calling a separate php script. I’d rather it just go with the rest of the data that’s being submitted at the same time.
Yes, I’ve got that. That’s why I mentioned adding it to the POST array. Which is the way that the form submission is getting from the user’s client to the server.
In you form, you can have an input field of type hidden, this would not be visible on the page but would function as a normal text field, and you can use jquery to update its value, which is the thing that would be submitted to php, right before submitting the form.
Modifying form submissions as they happen can be a bit of a pain. I might suggest converting your submit button to a regular HTML button and hooking onto that. Something like this:
$('#button').on('click', function() {
// change the hidden input value, then
$('form').submit();
});
The reason being that depending on your browser, it might not see the value has changed before it sends the data off.
This means you either need to explicitly tell jQuery what data to send, or you could just use a different handler and call the submit function after you are done changing values.
That works. The hidden input field is now updating with the value of wpm.
Can I ask why using text here is better than html?
This is working well.
In this situation, the hidden input field and the display showing calculated WPM are updated every time a key is pressed, and don’t need to be updated when a key is not being pressed.
So I think there’s no real way of having that issue. However, for other things that makes a lot of sense. I would assume it just all depends what triggers the field to update.
Your help has been invaluable. I wonder why the Web Development section lacks a “Solved” button…?
If you need to dump raw HTML onto a page, then using the html() function is fine. In most cases though, especially when you are just updating text, it can be a bit cumbersome.
For example, say you have the following:
<div id="containerForSomething">
<p class="someClass" style="someStyle" id="someText">Foo Bar Baz</p>
</div>
If you wanted to update the text displayed to “I like toast” and keep all formatting, either of these two do the same thing:
$('#containerForSomething').html('<p class="someClass" style="someStyle" id="someText">I like toast</p>');
...
$('#someText').text('I like toast');
That is just a simple example, but an arguably more important reason is because it forms a bad habit. The text() function will escape HTML characters, while the html() function will put the raw text on the page.
This can be a security issue depending on your setup. Lets say you had a forum-like system where users submit content that is displayed on the site. If you use html() someone could submit something like this as the title of a new forum post:
<script>
function stealAllYoData() {
// ...
}
</script>
which would not only be injected invisibly on your visitors web pages, but would actually be ran. If you used text() instead the people visiting your site would see that script printed out on the page, but their browsers would not attempt to run the script.
–edit–
Quick TL;DR
It does not really matter functionality wise. The two functions are used for different things, but they are nearly the same. The reason to use the right function in the right place is it forms good habits, preventing a possible security issue down the road.
like what 