I want to delay the post of the below form by 3 seconds and have an image pop up.
<form id="test" name="test" method="post" action="">
<input type="hidden" name="inp1" method="post" value="<?php echo $var1 - $var2; ?>">
<input type="hidden" name="inp2" method="post" value="<?php echo $var3 - $var4; ?>">
<input type="hidden" name="inp3" method="post" value="">
<input type="submit" name="inp4" value="Test" />
</form>
I am trying to get the delay part working first and have tried using Javascript in the HTML head part of my php file:
$('test').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 30000); // in milliseconds
});
This currently isn't giving any delay. Any ideas?
you forgot to add # with $("#test")
$('#test').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 3000); // in milliseconds
});
Demo
I would switch things up a bit, rather than using a submit button I would change it to a regular button and pass the form in the button. You don't need the submit button at all.
<input type="button" name="inp4" value="Test" onclick="myfunction(form)" />
Then the function
function myfunction(form) {
setTimeout(function() {
form.submit();
},30000);
}
that should do the trick. No jQuery needed
Related
I'm trying to build a form with time constraints. The form would display remaining time, and would auto-submit it after 2 minutes.
I wrote this in the HTML:
<form action="<?= $_SERVER["PHP_SELF"] ?>" method="POST" id="form_id">
And this in javascript:
if(time < 0)
{
document.forms["form_id"].submit();// Form submission
}
However, I'm not getting the desired results.
I think this may be due to my php form validation. I've used the condition:
if(isset($_POST["submit"]))
Where 'submit' is the name of a button element. I think this button doesn't get set and that prohibits the after-steps to be performed.
How do I solve this problem?
Give your button an id submit-btn as:
<button type="submit" name="submit" id="submit-btn">Submit</button>
And in JavaScript put this:
setTimeout(function() {
document.getElementById('submit-btn').click();
}, 120000);
You can use jQuery for this form submit after 2 minutes.
setTimeout(function(){
$('#form_id').submit();
}, 120000);
If you are using button i.e. <button name="submit">Submit</button>
try to change it with this
<input type="submit" name="submit" value="submit" />
OR do following
<input type="hidden" name="submit" value="submit"/>
<button >Submit</button>
Example:
<script type="text/javascript">
setTimeout(function() {
document.getElementById("submit").click();
}, 10000);
</script>
<form action="<?= $_SERVER["PHP_SELF"] ?>" method="POST" id="form_id">
<!-- Your fileds -->
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<?php
if(isset($_POST["submit"]))
{
echo "sumbit";
}
?>
Form Submit without Click Submit Button
<form id="formId" action="<?php echo Mage::getUrl('module/index/method') ?>" method="post"
enctype="multipart/form-data">
<input type="hidden" name="form_key" value="<?php echo Mage::getSingleton('core/session')->getFormKey() ?>">
<div id="upload-file-container">
<input id="img" type="file" name="img" onchange="this.form.submit()">
</div>
<input id="button" type="submit" value="Submit" name="submit" class="submit">
</form>
Use
document.getElementById("formId").submit();
Solution one:
You can call your form's submit method in the onchange event of your file input like this:
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
Here's a jsfiddle demo.
Solution Two:
You can also define the .submit with an onchange event inline:
<form action="http://your-url.com">
<input type="file" id="img" onChange="form.submit()" />
</form>
Here's a fiddle demo.
Solution Three:
The jQuery way of doing it:
$(function(){
$("#img").change(function(){
$("#form").submit();
});
});
document.getElementById("img").onchange = function() {
document.getElementById("formId").submit();
};
You can auto submit using this:
$(document).ready(function(){
setTimeout(function(){ $("#formId").submit(); }, 3000); });
Or specify exactly when you want to submit the form.
How can I change this function so when I submit form the button disables and page refreshes ?
function thanks() {
setTimeout(function () {
document.location.pathname = "index.php";
}, 3000);
}
Page refresh function is working btw. I just need to disable button.
This is my form
<form method="post" action="<?=htmlspecialchars($_SERVER["PHP_SELF"], ENT_QUOTES, "utf-8");?>?id={{$theme->id}}" id="myForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="price" value="{{$theme->price}}">
<input type="hidden" name="id" value="{{$theme->id}}">
<button type="submit" class="btn btn-success" onclick="thanks()"><span class="glyphicon glyphicon-shopping-cart"></span>Buy theme</button>
</form>
EDIT
Problem is that whenever I disable the button the file doesn't start downloading.. why ?
Try making it into an unobtrusive script:
<form method="post" action="<?=htmlspecialchars($_SERVER["PHP_SELF"], ENT_QUOTES, "utf-8");?>?id={{$theme->id}}" id="myForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="price" value="{{$theme->price}}">
<input type="hidden" name="id" value="{{$theme->id}}">
<button type="submit" class="btn btn-success" onclick="thanks()"><span class="glyphicon glyphicon-shopping-cart"></span>Buy theme</button>
</form>
And in jQuery:
$("#myForm").submit(function (e) {
// do not allow to submit form
e.preventDefault();
// disable the submit button
$(".btn.btn-success").prop("disabled", true);
// do the set time out
setTimeout(function () {
document.location.pathname = "index.php";
}, 3000);
});
Use the disabled property like this:
document.getElementById("<button id>").disabled = true;
On button click, set the disabled property of this button to true
HTML
<button type="submit" class="btn btn-success" onclick="thanks(this)">
jQuery
function thanks(elem) {
$(elem).prop('disabled', 'disabled');
setTimeout(function () {
document.location.pathname = "index.php";
}, 3000);
}
I have a form that once the user clicks the Submit button - it runs 2 functions - (1) it pops up with a div that says 'Item added successfully to basket' then (2) a prefill function that sends the selected options to a Mals-E cart.
It works, but what i need to do is not let the form submit until the popup has shown for around 5 seconds - currently it flashes for a split second as the form is submitted immediately with the prefill function.
Can anyone help with this please?
Script Below:
function showDiv(f) {
document.getElementById('basket-center').style.display='block';
}
function prefill(f) {
var val = document.forms["basket"].elements["product[2]"].value;
val = val + gettext(document.forms["form"].elements['users']);
document.forms["basket"].elements["product[2]"].value = val;
document.forms["basket"].elements["price"].value = document.forms["form"].elements['sum'].value;
return false;
}
Form Script Here:
<form id="basket" name="basket" action="http://ww8.aitsafe.com/cf/add.cfm" method="post" onsubmit="showDiv(); prefill();">
<input name="userid" type="hidden" value="A1251773"/>
<input type="hidden" name="nocart"/>
<input name="product[]" type="hidden" value="{b}Sage 50 Accounts (The VAT Edition) 2014{/b}"/>
<input name="product[2]" type="hidden" value="{br}"/>
<input name="product[3]" type="hidden" value="{br}FREE Installation onto 1 Server/PC & Same Day Download when ordered before 3pm"/>
<input name="price" type="hidden" value=""/>
<input name="noqty" type="hidden" value="1"/>
<input name="thumb" type="hidden" value="sage50-thumb.png"/>
<input name="return" type="hidden" value="http://10.10.0.195/reality-solutions-development/sage-50-accounts.php"/>
<input type="image" src="img/buynow-button-green.jpg" border="0" alt="Buy Now" style="float:right; margin-top:-24px"/>
</form>
Try this:
//html
<form id="my_form">
<button id="my_button">submit</button>
</form>
//javascript
var my_form = document.getElementById("my_form"), button = document.getElementById("my_button");
my_form.onsubmit = function() {
return false;
}
button.onclick = function() {
setTimeout(function() {
my_form.submit();
}, 5000);
return false;
}
Working jsfiddle: http://jsfiddle.net/njoqnwwf/
You could use Jquery for that
$(function() {
$('#form').delay(milliseconds).submit();
});
Well im new to jquery and ajax and the code below doesnt work after 2nd attemp of submit form... heres the javascript code:
$(document).ready(function() {
var options = {
target: '#output2', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
};
$('#myForm2').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
$('#me').submit(function() {
$("#div2").load("main.php");
return false;
});
});
function showRequest(formData, jqForm, options) {
return true;
}
function showResponse(responseText, statusText, xhr, $form) {}
by the way im using jquery form plugin.....
and for the index.php
<form id="me" action="" method="post">
Message: <input type="text" name="mess">
<input type="submit" value="submit">
lastly for the main.php
<form id="myForm2" action="index.php" method="post"><div>
Name:</td><td><input name="Name" type="text" />
<input type="reset" name="resetButton " value="Reset" />
<input type="submit" name="submitButton" value="Submit1" />
</div></form>
<h1>Output Div (#output2):</h1>
<div id="output2">AJAX response will replace this content.</div>
</div>
You downloading your form after page load ( *$("#div2").load("main.php")) and your events are already binded. So when your second form loaded, it's Submit button click event doesn't triger nothing. You have to read about .live() in jQuery here
Here is my solution (that is just simpl example):
$('#myForm2').live("click",function() {
$(this).ajaxSubmit(options);
return false;
});
Maybe this will work for you.
UPD
Also you can try this:
1) replace
$('#myForm2').live("click",function() {
$(this).ajaxSubmit(options);
return false;
});
with
function MyFormSubmit(form) {
$(form).ajaxSubmit(options);
return false;
})
2) Add JS code to you myForm2 Submit button onClick event
<form id="myForm2" action="index.php" method="post"><div>
Name:</td><td><input name="Name" type="text" />
<input type="reset" name="resetButton " value="Reset" />
<input type="submit" name="submitButton" value="Submit1"
onClick="javascript:MyFormSubmit(this);return false;"/>
</div></form>
<h1>Output Div (#output2):</h1>
<div id="output2">AJAX response will replace this content.</div>
</div>
You have to remove action="index.php" method="post" from your form. Then should it work.
because now it is still making the php post to index.php