There are lots of inputs in a single page... These inputs are need to be posted to server to generate custom documents. In other words, every each element will be used on serverside.
Traditionally
Every input can have a name. So, at server-side php can get all these inputs by
$_POST[nameOfInput]
Or
Every input tag can be listened by jquery and on change, values can be saved to an array and post to server by ajax later ... so php can get these values as in javascript ... by
$.ajax({
url: baseUrl+"chat.php",
data: a,
type: 'post',
success: function(data) {
alert(data);
}
})
But in this project i got little bit confused about these method because;
On this page, number of the inputs and number of input types are dynamic. While user fills the input. According to values typed by user,simultaneously, new input elements are generated. So i am able to post these values to server but i dont have any idea about how to use these in a php page.
Related
I'm working on an embedded device (ESP32) serving static pages from the internal flash (SPIFFS). I'm looking for a simple way to populate the form values with the actual values since with this approach they are loaded with the default values.
I have a working XMLHttpRequest communication channel. For example I'm able to POST the form values retrieving them with:
document.getElementById("form-controls").onsubmit = function (event) {
event.preventDefault();
fetch("/controls", {
method: 'post',
body: new FormData(document.getElementById("form-controls"))
}).then(function(response) {
});
}
I wondering if there's the opposite function. Using a GET method on the same url I would answer from my MCU with the actual values to be written in the form fields.
I'm able to do this manually using JSON and updating each input tag via javascript.
My question is if there is an equivalent of FormData that given an input data can fill automatically the related form fields.
I have an ajax call to a PHP module which returns some HTML. I want to examine this HTML and extract the data from some custom attributes before considering whether to upload the HTML into the DOM.
I can see the data from the network activity as well as via console.log. I want to extract the values for the data-pk attribute and test them before deciding whether to upload the HTML or just bypass it.
$.ajax({
url: "./modules/get_recent.php",
method: "POST",
data: {chat_id:chat_id, chat_name:chat_name, host_id:host_id, host_name:host_name}, // received as a $_POST array
success: function(data)
{
console.log(data);
},
})
and some of the console log data are:
class="the_pks" data-pk="11"
class="the_pks" data-pk="10"
etc.
In the above data I want to extract and 'have a look at' the numbers 11 and 10.
I just do not know how to extract these data-pk values from the returned data from the ajax call. Doing an each on class 'the_pks' does not work as at the time I am looking at the data they have not been loaded into the DOM.
I have searched SO for this but have not come up with an answer.
Any advice will be most appreciated.
I hope I understand your question.
If you get a HTML as a response, you can always create an element and insert that html inside it, without adding it to the DOM. And after that you can search it as you do with a DOM element.
const node = document.createElement("div");
//then you can do
node.appendChild(data);
// or
node.innerHTML = data;
And after that you can search inside the node:
node.querySelectorAll("[data-pk]")
I will re-engineer this - it was probably a clumsy way to try and achieve what I wanted anyway. Thanks to those who tried to help.
In my project I have javascript iterating through a set of radio buttons. First it checks to see if the selected button in the nameset has been changed, then if it has been, it records the value of the newly selected button for that row, appending it to a variable dataString, before moving on to the next buttonset. This is all well and good, it collects all the data perfectly. I run into issues when I try to send that data through AJAX, however.
For each row that is changed, I append a rowName variable and a deviceName variable do dataString. Ideally I want to send these such that when I get the data to Python, I end up with a rowName list and a deviceName list, as happens when you send multiple variables of the same name.
My AJAX call is as follows:
var call= $.ajax({
type: "POST",
url: "http://localhost/cgi-bin/savestate.py",
data: dataString
}).done(function() {
document.getElementById("upper").innerHTML+=(call.responseText);
});
As I said, the data I need to send gets collected well enough. Right now, dataString is formatted so that it looks like this:
"{rowName: 'firstRowName', deviceName: 'firstDeviceName', rowName: 'secondRowName', deviceName: 'secondDeviceName'}"
I have also tried changing the AJAX call so that the data: call looks like:
data: {dataString}
And formatted dataString to look like:
"rowName: 'firstRowName', deviceName: 'firstDeviceName', rowName: 'secondRowName', deviceName: 'secondDeviceName'"
Either way I try to send it, the data does not get to the python script. When I return the data from Python, it comes out as
FieldStorage(None, None, [])
Now since the format of the data: attribute in the AJAX call is {keyname: value, etc}, is it possible to send the data in a premade list in that format, or do I have to change the way I've formatted dataString and send it some other way?
I ended up achieving the desired effect two ways.
First Method: Thinking back to how I performed AJAX requests prior to implementing JQuery, I formatted dataString to
rowName=firstRowName&deviceName=firstDeviceName&rowName=secondRowName&deviceName=secondDeviceName
and so on. Then I simply appended that to my url in the AJAX call, so that it looked like:
url:"http://localhost/cgi-bin/saveState.py"+dataString
Second Method: The other way that I got it to work was to format the dataString the same way as in the First Method, but then simply use that as my data attribute.
data: dataString
I found it strange that this worked, since it doesn't at all follow the usual format for the data: call. But alas, it did indeed work.
In your initial attempt, you are sending POST data to your Ajax method in JSON format. However, FieldStorage is expecting it in form format (application/x-www-form-urlencoded). The two methods you mention in your answer give it to the Ajax method in form format.
Besides your solutions, another approach is to use a JSON parsing library instead of FieldStorage. Exactly how you do this depends on the framework you are using - is it Django, Pyramid, etc?
I have an HTML form to update the address in the account that submits to a Java servlet.
The problem is that, the form should not accept free flowing address text. Instead the user should enter the zip code/house number/street name, and hit a search button.
This search needs to go to a webservice, perform authentication and get a list of valid addresses that match the search criteria.
This list of addresses should be displayed to the user in the same form (either unhide a hidden element or use a modal dialog), so the user can pick his address.
Only after the valid address is picked, the user should be able to hit the form submit button which sends the data back to the servlet.
I am not sure how to have these 2 buttons do different actions in the form. I am very new to JavaScript and any pointers or examples are much appreciated.
For your webservice build an output of the values based on a search result (a basic string). Put this data in a JSON statement or just a javascript array.
Return something that looks like this.
['SearchResult1', 'SearchResult2', 'SearchREsult3']
On your search box. Bind a function on change or blur.
$('#SearchBox').bind('change', function(){
var val = $(this).val();
//Please reference the Jquery Ajax function as im typing this from memory and i always mix one or two things up :).
$.ajax({
"type" : "post",
"url" : "yoururlhere",
"data" : { "search":val },
success : function(dataset){
//When it comes back here check to see if its valid data etc etc
//After you validate you can populate a picklist on the page with the values. Or do anything you want with the values like this
for(x in dataset){
$('#DocumentElement').append('<p>'+ dataset[x] +'</p>');
}
}
});
});
This should start you out. After that you can just do more things on the callback, or modify the dom in a way which suits you better :).
I've got a form where there's 2 select boxes. The second one changes everytime the user selects a different value in the first select box. The first time I load the form and populate with data everything is fine. But then when the user changes the first select box and I repopulate the second select box with an ajax function the text doesn't show special characters. I've been debuging and the data from the database it's ok, so I guess it's in the javascript part that's failing. Here's the ajax code:
function alter_data() {
$.ajax({
url: 'ajax_data.php',
type: 'POST',
data:jQuery('#Form1').serializeArray(),
success: function(data) {
jQuery('#2selectbox').html(data);
}
});
}
So I printed the data in the php file before I send it and it's fine. Here in the ajax function I already tried to change html() function to text() function and also tried text(data).html().
The files are encoded in ANSI and the database in Latin1_General_CI_AI.
Thank you :)
EDIT:
A print of the problem I have:
https://gyazo.com/3f1cafda66da88e3929399bb04160e23
Well, it was a dumb thing. This is a big project that was already made when I start working on it and this error was hapenning because the php configuration file didn't have a default_charset. All I had to do is add this parameter and then things start to work propely.
Thank you for your help :)