Develop Reference

Form doesn't submit without refresh (please Vanilla JS only)

I know this is a bit tricky because I can't actually post the JS or HTML code but I'll try my best to describe it.
So basically I created a table with JS on the HTML.
Then I use "submit" and "form" in the html to submit content onto the table. The content is retrieved with fetch and an API.
The issue I have is that while it all works well, the data doesn't appear on the table without me having to refresh the browser. I'd the data to appear as soon as I click the submit button.
Cheers and thanks in advance

Its obvious and correct to dont show new records because table just can show last result of request .
For your goal you can reload just table tag with ajax or other ways for example you can refresh table tag x second after click on submit button.(x should be enough big that new records has time to submit).

How to scrape data from website when the data is only accessible by pressing a button?

I want to scrape data from a website within my java-application. The data I want to collect is inside a html-table-element. I tried two different methods:
I tried to load the website with a BufferedReader into a String and collect the data from the String.
I tried to use Jsoup to get access to the exact html-element, but it's empty.
Turns out that the table exists, but it is empty as long as the user has not pressed a button (labled "load raw data"). I inspected the sourcecode of the webpage. When the user presses the button, a load_table()-function is called which loads the data into the table. Obviously, the URL remains the same, otherwise I could've just used the other URL where the data is already loaded into the table. Has anyone an idea on how to scrape data from a website although it's only on the website if the user presses a button after the website is loaded?
I'm not really a trained Javascript-coder, but I tried to look through the script which is executed after the user presses the button. It's kind of hard to understand for me but I made a pastebin of the script with a highlighting where I think the rows are added to the table if that helps. The code for the button is:
Load raw data
The code I use to access the html element with Jsoup would be (all the child(x) methods are called on different div-elements to go deeper into the html-document until I finally reach the table-element):
Jsoup.connect(url).get().body().children().get(5).child(0).child(4).child(1).child(1);
As I stated above, the element is empty. I hope the description of my problem is detailed enough and somebody has at least an idea of what I'm trying to say. Sorry for my clumsy expressions. Not a native speaker.

if you are familiar with selenim webdriving you could use selenium to load the page and then pass to source page into beautifulSoup argument.
html = pageSource()
you could parse the page by this method i guess

Saving the Dynamically Changed HTML

I have done some changes in HTML page dynamically by using jQuery. And if I reload the same HTML it will gets to its initial state. But i don't want that to happen. Is there any way to get it done or save the changes made using jQuery?
Thank you.

If you wish to make changes to a file using jQuery and load it back on the reload you need to use a database in order to save those changes. You can use AJAX or even pure JavaScript to transfer those changes from your form to the database.
And once the changes are saved you can use a combination of PHP, MySQL query and JavaScript or AJAX to dynamically load the changes from the database on to your HTML page or if you want to make it more simple then just use a JavaScript function on page reload to fire a PHP code which will check for changes and if there is any, those will be loaded on to your page.
HTML5 local storage is a temporary solution this will also get retested once you close your browser or clean the browsing data.

You would need to get the innerHTML string and save it to the database or via HTML5 localStorage.
Then onload, all you have to do is check for an existing page state and then insert that as an innerHTML to your parent container:
if(savedState){
myParentContainer.innerHTML = savedState;
}
Where savedState is the variable that holds your html code.
To save the state, you would need to design a save function that would fire every time changes are made or when the user clicks on a save button. As I have said, you can save via HTML5 LocalStorage or via a database. Be wary that HTML5 LocalStorage is very small and can only accommodate several megabytes.

You must need to save your HTML after made changes using Jquery. you could save it by ajax call and save into database. so when you reload page HTML fetches from database so it would work.

adding dynamic data to mysql with php j query

I am trying to add multileg travel information using PHP, jQuery and MySQL. I present to users with existing data and then they dynamically add travel leg information to their existing visit. What I have done so far is below.
Bind data (PHP -MySQL) to the HTML table. Show add new button the user.
When the user clicks on add new, I have used jQuery to clone the data and this has dynamic id.
On the form there is file upload as well which needs to upload the file and also save information in the database.
My problem is how can I rebind the data on the table without effecting any other thing. I have tried to use jQuery load but it tries to reload the entire page rather than just reloading the newly generated trs.
I am open to change my logic on the whole as to how I do this.
Appreciate any help on this.

Make edits on dynamically loaded data using jQuery and PHP

I have a dropdown, on its change I need to load the contents related to it on the same page. Which I did using jQuery. Now the question is how do I make edits on this data and store it on my database. If I am wrong in using jQuery for loading my data then what else should I use? I am using PHP as my server side scripting language.
More detail -
Simply taking there a list of details I need to display as per the country you select, which I am displaying currently in a nice grid(textboxes)!
Now the data from this grid should be copied to another textbox on "EDIT" button click from where I edit them and store it in my database. I am not able to make the values copy into a another textbox

You could do this:
Display the data in some form of editable div, textarea, or other element.
Make a hidden field somewhere and when you display the data
Set the row id from your database to the hidden field
On your change event, grab the id from the hidden field along with the edited data.
Using Jquery/ajax, send that data to a php page that will save thee data to your database using the passed in id.
You could do that.
However, if it were me (and if you're not married to your current databse / mySQL etc..), I would use parse.com. The service is free up to a significant amount of usage (which Ive never come close to) and it really simplifies everything. See the below post if you're interested in that approach:
Save and retrieve user input from database with javascript?