How do I submit get request from JavaScript to server without using a form

Question

This a local webserver app

I have a form representing progress with a single submit button, this submits to my server and then the server will construct a new page with updated progress bars, so the users see the progress bars updated every time they click on the 'Check Progress' button.

But what I wanted it to do is automatically check every 5 seconds without needing the user to press button. So I have a javasscript that submits the form after 5 seconds, so every 5 seconds the page is replaced with a new page with updated progress bars.

This works great, so now I dont need the form button. But If i remove the form then my javascript wont work because I no longer have a form to submit.

I read I can use Ajax to talk to server, receive updated data and update existing page. But I dont want to do this i want to keep javascript to a minimum as I find it very difficult to get it working.

I just want the javascript to make request to server that will then replace existing page with new updated page, but how do I make a simple getrequest to server using javascript.

This is what I currently have

....

<tr>
    <td>
        <label for="pb12">
            Errors
        </label>
    </td>
    <td>
        <progress id="pb12" value="0" max="100">
        </progress>
    </td>
</tr>
</table>
<form action="/check_progress" id="check_progress">
    <p>
        <input type="submit" value="Check Progress">
    </p>
</form>
<script>function checkprogress() { document.getElementById('check_progress').submit(); }; setTimeout(checkprogress, 5000)</script></body>
</html>

Well good luck doing it without JavaScript. It would be a lot more efficient than reloading the page over and over again. Why remove the form if it is working? Only other choice is to just reload the page with JavaScript or meta tags.... — epascarello, Dec 11 '17 at 15:21
"I just want the javascript to make request to server" That's exactly what ajax _is_ — Patrick Q, Dec 11 '17 at 15:22
your current solution is already one with minimal javascript required ... — KarelG, Dec 11 '17 at 15:23
Writing Ajax in plain JS? Hell no! Don't. Use already written ajax lib or use another lib's that already have those and more. — DanteTheSmith, Dec 11 '17 at 15:23
*"I dont want to do this i want to keep javascript to a minimum"* - So you don't want to use JavaScript/AJAX for this? *"I just want the javascript to make request to server"* - So you **do** want to use JavaScript/AJAX for this? It's really one or the other. You can't use JavaScript without using JavaScript. As for "making a GET request" you have the same two choices one always has here. Either use AJAX to make the request in the background in code *or* redirect the user to a given URL. — David, Dec 11 '17 at 15:24
@PatrickQ no its asynchronous requests, i,e doesnt replace the page which is not what i need/want. — Paul Taylor, Dec 11 '17 at 15:27
@PaulTaylor So you write a few lines of code that replace the body.... It is really not that complicated. — epascarello, Dec 11 '17 at 15:29
@David I said I wanted to keep Javascript to minimum rather than not use it at all. So with AJAX i would then need to write more javascript to parse the response form server I'm simply saying i will create the new page on server rather than doing with Javascript, that is much easier for me. All I want is the same flow yo would get with submitting a form without submitting a form — Paul Taylor, Dec 11 '17 at 15:30
@PaulTaylor There can be minimal code to parse the response if you write the backend properly. Backend just returns what you need and bam, you set the innerHTML with it... — epascarello, Dec 11 '17 at 15:31
@espacarello i want to remove form because its displying a submit button to user, if I can hide form I could do that I suppose but cant see a way to hide foirm and seems rather hacky — Paul Taylor, Dec 11 '17 at 15:32
So hide the submit button and submit the form.... or do what I said in the answer — epascarello, Dec 11 '17 at 15:32
@PaulTaylor: Are you looking for this? https://stackoverflow.com/questions/3715047/how-to-reload-a-page-using-javascript This? https://stackoverflow.com/questions/503093/how-to-redirect-to-another-webpage Both of those will issue a GET request to the server and replace the whole page with the result. — David, Dec 11 '17 at 15:32

epascarello · Accepted Answer · 2017-12-11T15:35:29.853

1

So how can you reload the page without a form? Meta refresh tag

<meta http-equiv="refresh" content="5">

Just make sure you have the proper no cache headers.

Or use JavaScript to reload the page

window.location.reload(true);

Or just submit the form

document.getElementById("yourForm").submit()

or change the backend to return just the updated content and spit that out with an Ajax call.

edited Dec 11 '17 at 15:35

answered Dec 11 '17 at 15:26

epascarello

204,599
20
195
236

thanks , actually reload doesnt work(), firstly for some reason it is jerky whereas for submit is not, secondly a detail I missed is that when the form checks if it finds the task has completed the server then redirects to a different results page, of course with reload the redirect doesnt work. So is there way I can simply hide the form, I may come back to the ajax way at a later date if I need to. – Paul Taylor Dec 11 '17 at 15:46
I dont understand, the form has to be there for the javascript to work, so how can i have the form html in the html page without it being visible ? – Paul Taylor Dec 11 '17 at 15:49
If the PHP knows it is done that it should know not to put the form on the page... You want less JavaScript right? So do the logic in the serverside which means, no need for JavaScript to determine if it should run or not. – epascarello Dec 11 '17 at 15:50
Which solution are you referring to , the form has to stay on this page because it is going to continually going to check progress, show page with updated progress and repeat UNTIL it has finished at which point server redirects. So its a really simple question I ask if i have a form on a webpage can i make it not visible ? – Paul Taylor Dec 11 '17 at 15:56
As I said before, hide the button.... You do not need a button, just submit the form. – epascarello Dec 11 '17 at 15:59
ah, okay i have removed the submit button but kept the form, that solution is okay for me. – Paul Taylor Dec 11 '17 at 16:25

How do I submit get request from JavaScript to server without using a form

1 Answers1