can anyone please help. i have this login form:
<form id="myform" form action="login.php" method="post" class="loginform">
Email
<input type="text" name="email" maxlength="30" />
Password
<input type="password" name="password" maxlength="30" />
<input type="image" src="../PTB1/assets/img/icons/loginarrow1.png" name="submit" class="loginbutton" value="Login" />
</form>
i also have this script which brings up the form action page "login.php" in a popup window when my form is submitted.
at the moment it brings up a basic pop up window but i want to know if i can tweak the jquery code to implement a jquery lightbox window which opens up instead.
heres the jquery code that launches the pop up window when my login form is submitted.
<script>
$(document).ready(function() {
$('#myform').submit(function() {
window.open('', 'formpopup', 'width=400,height=400');
this.target = 'formpopup';
});
});
</script>
but now i want to have this pop up window open using my jquery lightbox window which is called "shadowbox" (available to download on the net) which you would normally open your links with like so.
<a href="link" rel="shadowbox;height=300;width=500" >link</a>
so just to be clear, i am asking if there is a way to launch my jquery lightbox "shadowbox" in place of the normal pop up window which is being launched when the user clicks the submit button on the login form.
Please can someone show me a way of doing this. thank you.
I would add e.preventDefault() to the previous statement
$(function() {
$('#myform').submit(function(e) {
e.preventDefault();
this.target = 'formpopup';
Shadowbox.open({
content: 'link',
height: 300,
width: 500
});
});
});
$(function() {
$('#myform').submit(function() {
this.target = 'formpopup';
Shadowbox.open({
content: 'link',
height: 300,
width: 500
});
});
});
Related
I understand how easy it is to hide/remove/disable a button after clicking client-sided. However, I would like to hide/disable a button permanently after it's been clicked once.
<form action="" method="post" class="delivery-confirm-frm">
<input type="hidden" name="order_id" value="<?php echo $_order->getIncrementId(); ?>" />
<input type="button" value="CONFIRM" class="delivery-confirm" id="confirmbutton"/>
</form>
<script type="text/javascript">
var $jj = jQuery.noConflict();
$jj(document).ready(function () {
$jj('.delivery-confirm').on('click', function () {
var _this = $jj(this);
$jj.confirm({
title: 'Confirm!',
content: 'Are you sure? Once confirmed, you cannot dispute this transaction.',
buttons: {
confirm: function () {
_this.closest('form').submit();
},
cancel: function () {
}
}
});
});
});
</script>
Basically, I have a button a person will click to confirm that an order has been delivered to them. An alert confirmation pops up after clicking. I would like to remove the button after the person has confirmed via the alert pop up.
Is there a simple way to do this via PHP? Or is it a little more complicated?
First of all you need to implement both client side and server side. Client side is for once the user clicks on submit for the first time so using javascript you can call the following after the form submit:
$("#confirmbutton").prop("disabled",true);
after that you need to handle the case that a user reloads the page. So the button should be disabled when the page loads. So assuming that there is a function is_confirmed() that returns true or false, you can add the following in your button
<input type="button" value="CONFIRM" class="delivery-confirm" id="confirmbutton" <?php echo $_order->is_confirmed() ? 'disabled' : ''; ?>/>
This is a bit difficult to explain but I will try my best.
I have a <form> that has an action. in the form action I have a .php file that executes a few PHP functions once the form is submit. this works fine.
I also have a div with a display:none; in the page with the form.
now, what I want to do is to display the DIV that is hidden for a few seconds once the form is submitted and then go to the form action which is the .php page so it can execute the PHP functions.
I did try the following code however, it will display the hidden div and will not execute the PHP page nor dose it go to the .php page in the form action!
I thought about using AJAX but AJAX executes the PHP code/page behind the scene so it won't direct the users to the .php page in the form action. I need the users to go to the .php page so using AJAX is out of question.
Here is the code for form:
<form action="execute.php" method="post" name="orderform" class="register">
<input name="firstname" type="text" class="long" id="firstname" />
<input name="lastname" type="text" id="lastname" />
</form>
and here is the code to display the hidden div:
<script type="text/javascript">
$("#submit").click(function(){
$( "#div" ).show('slow');
});
</script>
could someone please help me out with this?
Thanks in advance
Use the complete callback that is part of the show function
<form action="execute.php" method="post" name="orderform" class="register" id="myform">
<input name="firstname" type="text" class="long" id="firstname" />
<input name="lastname" type="text" id="lastname" />
</form>
<script type="text/javascript">
$("#submit").click(function(){
$( "#div" ).show('slow', function(){$("#myform").submit()});
});
</script>
$("#submit").click(function(){
$( "#div" ).show('slow');
setTimeout(function(){$('form[name=orderform]').submit();},5000);
e.preventDefault();
});
You could call an ajax function and when it "finishes the work" you redirect the user like:
<script type="text/javascript">
$("#submit").click(function(){
$( "#div" ).show('slow');
$.ajax("page.php", {
data: $('form[name=orderform]').serialize()
}).done(function(returnedData){
location.href = 'theUrlYouWant.php?stuff=' + returnedData;
});
});
</script>
Hope it helps
I have the following code working with a simple datepicker;
when I click on the button the picker displayed.
I need this to be work with a multidatespicker:
Simple datepicker JS script.
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker();
$('#btnRepercute').click(function() {
$('#date').datepicker('show');
});
});
</script>
HTML input fields.
<input type="button" value="Répercuter" class="button" id="btnRepercute"/>
<input type="text" id="date" class="hidden" />
Attempts so far with multidatespicker
$('#date').multiDatesPicker();
$('#btnRepercute').click(function() {
$('#date').multiDatesPicker();
});
Nothing happens, no errors in the console.
Thanks in advance for your help!
First you need to unregister the datepicker event and then attach the multiDatesPicker event , after that focus the element
$('#btnRepercute').click(function() {
$("#date").datepicker( "destroy" );
$('#date').multiDatesPicker();
$('#date').focus();
});
Hope it works fine
Once again a question...it's almost driving me crazy for hrs :-/
My problem:
I have an upload form on my website and the upload works fine. But I want to give the user a feedback while uploading, cuz it can take a few seconds depending on the file size.
I thought about showing a gif animated progress bar in a div and show it with javascript. I tried it, but it just won't show up when I'm hitting the submit button...and when I'm adding onSubmit=".... return false;" the upload won't work anymore...
here is my code:
in the head:
<script type="text/javascript">
function showHide() {
var div = document.getElementById('progressBar');
if (div.style.display == 'none') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
}
</script>
body:
<div id="progressBar" style="display:none;height:40px;width:250px;margin:0px auto;">
<img src="img/progressbar.gif" alt="Progress Bar">
</div>
<form name="photo" id="upload_big" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post" onsubmit="showHide();">
<input class="linkinput" type="file" name="image" size="20"/>
<input type="submit" name="upload" id="uploadbutton" value="Upload image"/>
I would appreciate any help...and since I'm a rookie -> please help me to get better instead of judging ;-)
Thanks out there!
It's because when the submit event has triggered, the browser already sent the form and will go to another page.
Use jQuery:
$(function() {
$('#upload_big').submit(function() {
showHide();
});
});
Sometimes, the form submission prohibits you from casting anymore JavaScript functionality on the page. To be on the safe side, you should also base functionality not on the form submission event, but on the <input type="submit"> click:
$(function() {
$('input#uploadbutton').click(function(e) {
showHide();
e.preventDefault();
});
});
I have a form, which take name from form and it sends to javascript codes and show in php by Ajax. these actions are done with clicking by submit button, I need to have another button, as review in my main page. how can I address to ajax that in process.php page have "if isset(submit)" or "if isset(review)"?
I need to do different sql action when each of buttons are clicked.
how can I add another button and be able to do different action on php part in process.php page?
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
submitHandler: function(form) {
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
<body>
<form name="myform" id="myform" action="" method="POST">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<input type="submit" name="submit" value="Submit">
</form>
<div id="results"><div>
</body>
process.php:
<?php
print "<br>Your name is <b>".$_POST['name']."</b> ";
?>
You just need to add a button and an onclick handler for it.
Html:
<input type="button" id="review" value="Review"/>
Js:
$("#review").click(function(){
var myData = $("#myform").serialize() + "&review=review";
$.post('process.php', myData , function(data) {
$('#results').html(data);
});
}
);
Since you have set a variable review here, you can use it to know that is call has come by clicking the review button.
Bind the event handlers to the buttons' click events instead of the form's submit event.
Use the different event handler functions to add different pieces of extra data to the data object you pass to the ajax method.