Javascript pressing the button in an interval - javascript

I have a submit button, which sends the value with POST method to the same page.
<button id="log" class="btn bg-purple" formmethod=post value="2" name="start" formaction=start_server.php>Get Log</button>
When I press that button, I get the log from the file in a list using PHP.
What I want to do now is to make a script with javascript to automatically press the "Get Log" button to reload the log file every 2 seconds so I can have an interactive log, without pressing the button myself.
I have tried this script, but only the alert is working I guess, since it doesn't reload the log file at all.
<script type="text/javascript">
window.onload=function(){
var auto = setTimeout(function(){ autoRefresh(); }, 100);
function submitform(){
alert('test');
document.button["log"].submit();
}
function autoRefresh(){
clearTimeout(auto);
auto = setTimeout(function(){ submitform(); autoRefresh(); }, 2000);
}
}
</script>

Replace your script with this:
$(document).ready(function(){
// this handles the click on yout "Get log" button
$("#log").click(function(){
//alert('test');
console.log("Click function");
$("#log").submit();
});
// This sets an interval to simulate a click every 2 seconds.
auto = setInterval(function(){
console.log("Interval iteration");
$("#log").click();
}, 2000);
});

Give an ID to your form and replace this line -
document.button["log"].submit();
With this -
document.getElementById('formID').submit();

Related

How to trigger alert function on button press?

I have a function that triggers an alert at a given time:
function breakTime() { // <<< do not edit or remove this line!
/* Set Break Hour in 24hr Notation */
var breakHour = 11
/* Set Break Minute */
var breakMinute = 47
/* Set Break Message */
var breakMessage = "Reports! Take Your Break!"
///////////////////No Need to Edit//////////////
var theDate = new Date()
if (Math.abs(theDate.getHours()) == breakHour && Math.abs(theDate.getMinutes()) == breakMinute) {
this.focus();
clearInterval(breakInt)
alert(breakMessage)
}
}
var breakInt = setInterval("breakTime()", 1000)
I want to assign this function to a button, so when the button is pressed, at an interval of 10 seconds after button press, the alert shows up to everyone that has access to the page. Is there any way to do it?
Note: the pop up alert is triggered without the button, but every one of my attempts to make a button that triggers the function doesn't trigger the pop up on every one's PC.
using just javascript:
<button id='buttonID'>Click Me</button>
function test() {
alert('break time!');
}
document.getElementById('buttonID').onclick = test;
// no () on test, otherwise it runs immediately.
https://jsfiddle.net/axq0ks6b/
HOWEVER this will only work locally on your page. If you want to press a button and send a prompt to everyone who has the page open, then you will need to set up server side scripts.
You can assign function on button click like
<input id='btn' type='button' onclick='breakTime();' >Click</input>
OR You can fire event on click
<input id='btn' type='button' >Click</input>
<script>
$(document).ready(function(){
$('#btn').onclick(funcion(){
breakTime();
});
})
</script>

how to submit a form multi times with one button and open them in many tabs?

I wonder how to submit multi times my form to open many tabs with one button.
my code here :
<form action="?" id="form1" target="_blank">
<a class="btn" href="javascript:;" onclick="submit_form();return false;">Submit</a>
</form>
<script>
function submit_form() {
for (i=1;i<5;i++) {
document.form1.id.value = i; // id is field to send data to server
document.form1.submit();
}
}
</script>
I want to click a.btn then submit one by one and open multi tabs.
But, form just submit the last id and just open one tab.
The problem is that you do it synchronously. You can try to use setTimeout() to put each submission into it's own "thread":
for (i=1;i<5;i++) {
setTimeout(function() {
document.form1.id.value = i; // id is field to send data to server
document.form1.submit();
}, 0);
}
Maybe, if doesn't work, you can play with delay based on the i, e.g.
for (i=1;i<5;i++) {
setTimeout(function() {
document.form1.id.value = i; // id is field to send data to server
document.form1.submit();
}, i * 100);
}
where every submission will be delayed by 100ms after the previous one

How to detect button value change in JQuery?

I've a sign up form which has submit button with value "GET INSTANT ACCESS!" :
<input type="submit" class="wf-button" name="submit" value="GET INSTANT ACCESS!">
After submit, the value gets change to 'Thank You!':
<input type="button" class="wf-button" value="Thank You!">
I need to detect the button value. If it becomes "Thanks You!" then I have to show a popup. And this value gets change by some Ajax (GetResponse form). There is no page refresh.
I've tried below code but it is only working in FireFox & not working in Chrome.
<script>
$(function() {
$(".modalbox").fancybox();
});
$(function() {
$('.wf-button').bind("DOMSubtreeModified",function(){
//if btn valu is 'Thank You! trigger popup'
$(".modalbox").trigger('click');
});
});
</script>
Live URL: http://www.idynbiz.com/web/html/gold_ira_vf/? (just to show how the button changes its value)
Can some one help how can I detect the button value and show my popup? The button change its value in real time (Ajax). There is not page refresh.
Is there any JQuery approach with bind() Or on() function to detect the value?
$(function() {
$('.btn1').on('change', function() {
alert('Do stuff...');
});
$('.lnk1').on('click', function() {
$('.btn1').val('Thank you!');
$('.btn1').trigger('change');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" class="btn1" value="SUBSCRIBE" />
Change button value
OK ,
when button is clicked and form is submitted for saving. just write these code
$(document).ready(function ()
{
$('.wf-button').click(function ()
{
var valueofbutton = $(this).attr('value');
if(valueofbutton == 'Thank You!')
{
window.open(); //// whatever you want to open in popup
}
});
});
i m sure that this will work
You can use the following function in javascript which gets called after any > kind of postback, i.e. synchronous or asynchronous.
function pageLoad()
{
if($(".wf-button").val()=="Thank You!")
{
// show your popup
}
}
Hope it works....

Jquery show div after hiding it onclick after 5 seconds

Hey so I have a div that I want to replaceWith some text after clicking on the button and then re-show the same hidden text after 5 seconds. I am stuck on the part where I need to re-show it. I hid the div with the onclick function and appended some text but after a couple seconds I would like to re-show the original text.
here is the link that I need to change text onclick and then after 5 seconds show the ORIGINAL text...
originally the text says "add to calendar", upon clicking it, it should change to "calendar updated" and then after 5 seconds change back to "add to calendar".
<div class="resSubmitAction download resDetailsButton">
<a href="javascript:void(0);">
</div>
<div class="calText"><p>add to calendar</p></div></a>
</div>
Jquery:
$(document).ready(function () {
$(".resSubmitAction").click(function () {
$(".calText > p").replaceWith("Calendar Updated");
});
});
Make use of the setTimeout function. Fiddle
$("#clickme").click(function(){
var elem = $(this);
setTimeout(function(){
elem.hide();
}, 5000);
});
In the code that you provided, the click event is not attached correctly, if you click 'add to calendar' it doesn't trigger the event.
You can use the setTimeout function to call any function after certain time delay, this is your code with the setTimeout implemented.
Fiddle
$(".calText").click(function () {
var originalText = $(".calText > p").text();
$(".calText > p").text("Calendar Updated");
setTimeout(function(){
$(".calText > p").text(originalText)
}, delayTime);
//Just a little timer I added
triggerTimer();
});

disable button with timeout

I have this form with conditions that alert validation errors before posting data. the problem is if someone double clicks (by mistake perhaps), the form is submitted, then the form is cleared on the first click then the second click will alert 'form empty', which could be confusing as it all happens in a split second. so what I want is to temporarily disable the button when clicked for 3 seconds. but what I have now just times out the whole function for 3 seconds not just disabling the button. how should I be doing this? here is a simplified version of the form. Thanks
$('#send').click(function(){
var self = $('#send');
setTimeout(function() {
self.disabled = false;
if(!$('#text').val()){
alert('field empty');
}else{
$('#message').html('done');
$('#text').val('');
}
}, 3000);
});
I've written a small example for you, of disabling a button on click. The timeout will enable the button after 3000 miliseconds.
Working demo
html:
<input id="text">
<input id="send" type="button" value="send"/>
<div id="message"></div>
Javascript:
$('#send').click(function(){
var button = $(this);
button.attr('disabled', 'disabled');
setTimeout(function() {
button.removeAttr('disabled');
},3000);
if(!$('#text').val()){
alert('field empty');
button.removeAttr('disabled');
}else{
$('#message').html('done');
$('#text').val('');
}
});
You could use jQuery's one() instead of click(). Once the function is run it will be unbound.
If you want to re-enable it you could put the timeout to re-bind it at the end of the function.
Using your method, it looks like you're never actually disabling the button:
this.disabled = 'disabled';
You are not correctly disabling the button. You are setting the .disabled property on a jQuery object, not the wrapped DOM element.
Try:
self.prop('disabled', false);
Instead of:
self.disabled = false;
EDIT:
Actually the code above was attempting to re-ebable the button. There was no code to disable the button.
I also think you want to perform the validation right away. The call to setTimeout() should just be for re-enabling the button, like this:
$('#send').click(function() {
var self = $(this);
// Disable the button.
self.prop('disabled', true);
// Process click.
if (!$('#text').val()) {
alert('field empty');
} else {
$('#message').html('done');
$('#text').val('');
}
// Cause the button to re-enable after 3 seconds.
setTimeout(function() {
self.prop('disabled', false);
}, 3000);
});

Categories

Resources