I'm have a simple form, when clicking the submit button the backend php file gets executed by my JavaScript file, results are returned via ajax, everything works great when manually clicking the button. However, when trying to use javascript to automatically submit the form every 120 seconds it is not working. The javascript never get's called which in turn causes the php to not execute...
html
<form id="send-with-ajax" name="ping">
<input type="submit" value="Execute Ping" />
<div class="ajax-response"></div>
</form>
<script type="text/javascript">
// refresh ping results every 120 seconds
var pingRefreshInterval = setInterval(function () {
console.log(
'submitting ping.php request after 120 second wait - time now:'+new Date());
document.getElementById("send-with-ajax").submit();
},120000);
</script>
<script src="js/portal.js"></script>
Again, there are not issues with my portal.js file or my php file -- The main thing to note here is that the document.getElementById("send-with-ajax").submit(); does not do anything... Any ideas?
Assuming that js\portal.js just executes a function when a POST event occurs, you could simply call that function from inside your interval.
If that won't work for some reason (maybe there's a lot of other stuff happening on your page that you didn't show us), and your call to submit() isn't working properly, you could also trigger a button click with $('input[type=submit]').click(); (assuming you only have one submit button on the page - otherwise add a class or an id and trigger on that instead).
Try using the submit() method. Or use AJAX.
If you are doing things on onsubmit event, document.getElementById("send-with-ajax").submit() doesn't trigger this event.
Related
I've seen many similar questions to mine, but have spent a few hours browsing and can't find the answer to my situation.
I have a Go based web-server. I have an HTML template page that lets me update the hardware clock and system clock on a 'nix system with the current browser time:
The update button is of type submit and calls the Go code which makes some system calls which take a few seconds, and I can't have this server code being called twice whilst it's still processing the first request.
So I want to disable the update button and then re-enable it once the server has responded.
I have jQuery, so I know I can have a function that is called via `onclick' and make these calls:
$("#updateButton").prop("disabled", true);
$("#updateButton").prop("disabled", false);
I have the form being submitted via the button (and not a jQuery call for instance - although I'm all ears) because I want the form to refresh when the server responds. So I have this:
<form action="/clock" method="POST">
...
</form>
This is so some values on the page get updated. Such as the status message at the top and the values in the various fields (updated to the values actually set).
The first problem I have is that if I call a JS function on the button click, and it disables the button as per above, then my server code doesn't get called! I have no idea why - could this be stopping the post request somehow?
<script>
function getTime() {
// Disable update button while waiting for response
$("#updateButton").prop("disabled", true); // Stops post request???
// How to re-enable update button?
}
</script>
And secondly, how do I re-enable the button? I don't know how to tell when the server has responded.
Since you're saying you want to disable the submit button once the button is clicked. And you're also saying you want the page to refresh while the form is being submitted.
<form action="" method="post" onsubmit="subBtn.disabled = true; return true;">
<input type="submit" name="subBtn" value="submit"/>
</form>
In the code above, when <form> is submitted, <input> field named subBtn is disabled and true is returned for <form> to continue the submission process. Once the page is reloaded, the button goes to its original state, which is enabled.
I am not sure whats going on the code down there or how/when is getTime() function executed, but return true; might just submit the form.
<script>
function getTime() {
$("#updateButton").prop("disabled", true);
return true; // this to continue with the original <form> process
}
</script>
This might be very basic but I couldnt really find a solution to this. I am creating my own website. I have written a javascript file, simply called "main.js".
I can call my entire script in my HTML file like so:
<script src="main.js">
</script>
And I see in the console that everything works as it should. However, this is not what I want. What I want is the code in the JS script to be fired upon a click on my button. This is what I tried:
<input class="button" onclick="main()" type="submit"
value="Submit" name="">
</div>
So I want the script that I have referenced somewhere else in the HTML file to fire the "main" function when my button is clicked. But what happens currently is that the click onto the button simply reloads the page.
So, to get this all into one question:
I want to click my html button and then fire a single function from another script that is called "main.js".
How can I achieve that?
Thank you
I think this might be because of your type: submit.
Try changing it to type="button".
Hope this helps!
You are trying to call a function called main, but you need to run a script that creates a function. The browser won't go looking in a JS file with the same name as the function automatically.
Edit main.js so the code appears inside a function.
function main () {
// Your code here
}
If you don't want the form to be submitted after the JS function is called, then don't use a submit button to trigger it. Use a type="button".
A submit button triggers a reload as it submits the formto the server, unless your main function returns false.
Adding
return false;
at the end of main should do the trick.
I've got a form that is submitted via ajax and is then updated by the response.
Before the submit takes place I execute the following code which works the first time but after that on the second submit, the code does not execute.
$(document).ready(function(){
$('.edit_customer').submit(function(event) {
console.log("test");
if(document.getElementById("sameAsBilling").checked == true){
$("#customer_addresses_attributes_1_line_1").val($("#customer_addresses_attributes_0_line_1").val());
$("#customer_addresses_attributes_1_line_2").val($("#customer_addresses_attributes_0_line_2").val());
$("#customer_addresses_attributes_1_city").val($("#customer_addresses_attributes_0_city").val());
$("#customer_addresses_attributes_1_state").val($("#customer_addresses_attributes_0_state").val());
$("#customer_addresses_attributes_1_zip_code").val($("#customer_addresses_attributes_0_zip_code").val());
}
});
});
I've also tried changing the listener to this:
$(document).on("submit", ".edit_customer", function(){ console.log("test");});
This code doesn't execute at all.
One thing to note is I am using Ruby on Rails which uses Rails UJS. I'm not sure why the second line of code isn't solving the issue. Any help is appreciated.
Thanks in advance.
UPDATE:
I have another element in my form that I use to fire JS using the same type of code and it works fine everytime. Here is the code:
$(document).on('click', '#qb-customers-btn', function(){
//code here makes an ajax call and loads in data
});
<span class="input-group-text bg-success text-light" id="qb-customers-btn">Load</span>
Update:
I ended up abandoning this and just used a button click listener, but now I am back with the same exact problem on a different form on a different page. I've tried everything I can think of. The only thing that works at the moment is wrapping the listener in an init function, calling init on document.load and then calling init again after the ajax has erased and reloaded the form on the page.
I feel like I've looked around for the answer for this question, but most of the responses are very hacky: involving javascript that pops in via AJAX, redirects and other ways of modifying the DOM on the fly.
What I want to do is make the submit button disappear when a user submits a document (javascript) and submit the message via mail (php). The code I have is the following:
<form action="" method="post">
...
<input onclick="removeElements()" id="subButton" class="submit" name="submit" type="submit" value="submit">
The php mail function is in the same document.
Here is the removeElements() function:
var el = document.getElementById("subButton");
el.remove();
document.getElementById("thankYouMessage").setAttribute("style", "display:block");
The submit function works without the javascript call, but when I add the onclick="removeElements()" part, then the javascript part starts working, but the php is no longer executed.
I know that there are other methods for doing this, but in this case, I'm actually curious about why this doesn't function as I had planned. By removing the submit button, am I in effect killing the child PHP process mid(or pre)-execution?
Thanks!
If you add onclick you will have to fire the submit manually.
The other option is add your javascript call code in onsubmit="removeElements()" on the form tag. This way, it will execute your code after executing submit
Related question here
Don't remove the button, rather set visible: hidden or display: none for its style. This way it will still be in the document and will work, it just won't be shown.
When you send the form reloads your page so I suggest:
Using Ajax and only delete button on the response, or
Not generate the button when reloads your page.
Jquery Ajax examples: You can see them here api.jquery.com/jquery.ajax/
Regards.
You could simple use the .hide functionality which JQuery gives you. It's very simple to use and very clean.
Example1 using JQuery:
$("#FormID").submit(function(e)
{
e.preventDefault();
// Hide button
$("#subButton").hide();
// Display thank-you message
$("#thankYouMessage").css("display", "block");
});
Example2 using JQuery:
$(document).ready(function() {
$(".submit").click(function() {
$("#subButton").hide();
$("#thankYouMessage").css("display", "block");
return false;
});
});
I have a javascript method that creates a bunch of elements on click. When I call it from a button, it only stays on the screen for the duration of that click. when I enter the exact same code into the console, however, it stays on the page until I reload or navigate away (which is exactly what I want).
JavaScript code: (it's the only method in the js file)
function post() {
var postTitle = document.createElement('h3');
var nodeTitle = document.createTextNode('Immigration is good.');
postTitle.appendChild(nodeTitle);
etc....
Where I'm calling it in the html:
<input type="submit" id="post-button" value="Post" onclick="post()">
The script tag is in the header of the html page.
How do I get it to stay on the page past the duration of the click? Any ideas why it's being immediately obliterated?
You still need to cancel the form's submission. A return false; from post, if it exists, won't work because the onclick attribute is calling post() but not returning anything.
You could change it to onclick="return post();", but it would be better to attach the handler directly, and to the submit event of the form and not the click event of the button (people do use Enter sometimes!):
document.getElementById('some-form').onclick = post;
Look at what the button does. It is posting!
When you click the button it is redirecting you back to the page you are currently on! It seems like it is showing up and disappearing what is actually happening though is that the page is refreshing.
There are a couple of options to do what you want. Submitting via Ajax or having your server respond with a hashbang/cookie set to direct the page to do as you wish.