I want to disable register button and change text to "Please wait..." after user click register button. I tried using javascript like,
HTML,
<button id="disable-submit" type="submit" class="g-recaptcha btn btn-light rounded-pill" data-sitekey="{{ config('services.recaptcha.sitekey') }}" data-callback='onSubmit' data-action='submit'>
{{ __('Register') }}
</button>
js,
<script type="text/javascript">
// $(document).ready(function()
(function(){
$('#disable-submit').on('submit', function(){
var btnd = $('#disable-submit');
btnd.prop('disabled', true);
setTimeout(function(){
btnd.prop('disabled', false);
}, 5000);
})
})();
</script>
Now it disables for a second and gets re-enable. I think it re-enables because of validation checks. I need to disable the button for 4-5 seconds, my registration process needs that much time.
Related
I have a modal that is triggered when the button is clicked in the main page. It works and the success modal is displayed and the url modal is closed. But my problem is that if I click the button again, url modal cannot be displayed. Here's my code.
<button class="btn pink apply_btn" type="submit" name="button">Apply</button> //my apply button in the page
<form class="search_form" action="" method="">
#csrf
<label>
<input type="url" required id="instagramLink" value="" placeholder="Instagram Post URL (Paste Here)">
<p>
<span class="alert"></span>
</p>
</label>
<div class="flex_box">
<button class="btn pink" type="button" id="save">Apply</button>
</div>
</form>
<script src="{{ url('/assets/js/modal.js') }}"></script>
And this is my ajax code in closing the url modal.
success: function(store) {
$(".apply_modal").hide();
$(".applyfnsh_modal").toggleClass("open");
$('.alert').html('');
},
error: function() {
$('.alert').html('Error occured while applying. Please try again.');
}
In my modal.js
//apply pop up
$(".apply_btn").on("click", function(){
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
});
$(".modal_close").on("click", function(){
var modal = $(this).parent("div").parent("div");
modal.toggleClass("open");
$("body").toggleClass("open");
});
$(".apply_modal").on('click touchend', function(event) {
if (!$(event.target).closest('.apply_box').length) {
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
}
});
So when the url is valid, save to db and display the success modal, which works, but clicking again the apply button in the page, is not displaying the url modal again. I have tried the answers here but nothing is working.
Ok, so here's what I'm thinking is happening... $(".apply_modal").hide(); is setting your modal's style to "display: none;" directly onto the DOM element. In order to display your modal, your code is simply applying a class of "open" to the modal. Any local styles to a DOM element override any styles from CSS. What this means is that the CSS styles applied to the class "open" don't matter because the div itself has a style attribute in it, and that style attribute contains "display: none". To fix this, wherever there is an instance of .toggleClass("open");, add a "show" declaration (.toggleClass("open").show();). You should do some serious refactoring if this works, but it'll at least let you know if we're on the right track.
My kendo template is as follows:
<div id="file-err-msg" > Please remove files with errors</div>
<input name="files" id="files" type="file" />
<script id="fileTemplate" type="text/x-kendo-template">
<span class='k-progress'>
</span>
<strong class='k-upload-status'>
<button type='button' class='btn-remove k-button k-button-bare k-upload-action'>
<span class='k-icon k-i-close k-delete' title='Remove'></span>
</button>
</strong>
</script>
<script>
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html())
});
</script>
I need to hide the div with id - file-err-msg, when the remove button is clicked. the Remove action is happening when the span with css class "k-delete" is clicked. I need to add the below event handler in addition, and it is never being called.
$(".k-delete").click(function () {
alert("Remove button clicked");
});
since these controls are rendered dynamically, i tried to bind them to the event handler as below, but nothing works.
$("body").on("click", ".btn-remove", function () {
alert("dynamic control event handler");
});
Any help is appreciated!
According to Kendo Upload API documentation, you can bind a function to the remove event.
So this is where you could hide your file-err-msg div :
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html()),
remove: function(e) {
$('#file-err-msg').hide();
}
});
I tried to solve the problem but I can't.
When upload a file in to FireFox I can not uploaded,
but file will uploading in to Opera okay.
Along Dropzone.js I used bootstrap and jquery as library.
In my opinion the problem is addEventListener?
Example video with a firebug: enter link description here
Snippet:
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
parallelUploads: 10,
thumbnailWidth: 120,
thumbnailHeight: 120,
init: function() {
var submitButton = document.querySelector("#submit-all");
var myDropzone = this;
submitButton.addEventListener("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
this.on("addedfile", function(file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class='btn btn-xs btn-warning'>Remove file</button>");
// Listen to the click event
removeButton.addEventListener("click", function(e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
myDropzone.removeFile(file);
// // If you want to the delete the file on the server as well,
// // you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
} //dropzone init
}; //dropzone options
<script src="https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js"></script>
<form action="upload/do_upload" class="dropzone" id="my-dropzone"></form>
<button type="button" class="btn btn-primary"><span id="submit-all">Submit all files</span></button>
<button type="button" class="btn btn-default">Reset</button>
Here you have a SPAN id="submit-all"
<button type="button" class="btn btn-primary"><span id="submit-all">Submit all files</span></button>
Then you have a querySelector for it:
var submitButton = document.querySelector("#submit-all");
Buttons have a click event, not spans. Maybe if you change the first line to this it should work:
<button type="button" id="submit-all" class="btn btn-primary"><span>Submit all files</span></button>
Give it a try and let us know.
I have a page which uses ajax to submit a comment form, add it to a db, then redisplay the page, hopefully without reloading the page its on.
If I access the script on it's own it works great, yet when I load it into another page it doesn't add the data and also refreshes the page on submit, which I want to avoid, which is the whole point of doing things this way.
Anyway, here's how I load the page:
<div id="wall_comments" class="msgs_holder"></div>
<script type="text/javascript">
$('#wall_comments').load('/pages/comment.php', { wl_id:"<?=$wl_id?>" });
</script>
and then the page itself with jquery code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<div style="width:100%; overflow:auto;">
<form method=post>
<input type="text" class="inp" name="comment" id="comment">
<input type=submit value="do it" name="action" onclick="update()">
<input type=hidden name="wl_id" value="<?=$_REQUEST[wl_id]?>" id="wl_id">
<input type=hidden name="user_id" value="<?=$userfromcookie?>" id="user_id">
</form>
</div>
<script type="text/javascript">
function update(){
var wl_idVal = $("#wl_id").val();
var commentVal = $("#comment").val();
var user_idVal = $("#user_id").val();
$.ajax({
type: "POST",
url: "/pages/comment.php",
cache: false,
data: { submit: "", wl_id: wi_idVal, comment: commentVal, user_id: user_idVal }
});
}
</script>
And finally enter info into db (I know this should be mysqli and it will be)
if(isset($_POST['action'])){
$wl_id = mysql_real_escape_string($_POST['wl_id']);
$comment = mysql_real_escape_string($_POST['comment']);
$user_id = mysql_real_escape_string($_POST['user_id']);
$addcomment = mysql_query("insert into list_wall (
event_id,
user_id,
comment
) VALUES (
'$wl_id',
'$user_id',
'$comment'
) ",$db);
if(!$addcomment) { echo 'result error add comment'; echo mysql_error(); exit; } // debug
}
The problem is when you click the submit button, the page is submitted and the function update couldn't work. You have to cancel the default submit mechanism by using return false;
<input type=submit value="do it" name="action" onclick="update() return false;">
Another thing.
The onclick on the submitbutton will not work as excpected if the submit is caused without clicking the button.
For example mobile safari on iPhone can submit forms directly without triggering the button.
If you add UmairP's version of the onclick to the form element as an onsubmit method you should get the same result on every platform as far as I know.
You can see more details on iPhone forms in my own question on another issue.
How can I prevent the Go button on iPad/iPhone from posting the form
:D
I am currently having much trouble with a jQuery animation. Basically, a button click will quickly start a short animation and collapse a sidebar, widening the main content box to full width (and back again if wanted). The issue is that with quick consecutive clicks, the layout goes all crazy. I have tried this condition:
if (!$(this).is(":animated"))
{
// Code
}
But it doesn't work. So I have tried .off(), and it shuts off, but I cannot find out how to turn it back .on(). Can someone help me please? Here is what I have:
<script type="text/javascript">
$(document).ready(function(){
var $button = $("a#toggle");
var $content = $("div#index_main-content");
var $sidebar = $("div#sidebar");
// Disable quicky clicky
$button.click(function() {
$button.off().delay(1000).on();
});
// Hide sidebar
$button.toggle(function sidebarToggle() {
$sidebar.fadeOut(500, function() {
$content.animate({width: '100%'}, 500, function() {
$button.attr("title", "Click to show the sidebar!").addClass("hiding").removeClass("showing");
});
});
},
// Show sidebar
function sidebarToggle() {
$content.animate({width: '69.5%'}, 500, function() {
$sidebar.fadeIn(500, function() {
$button.attr("title", "Click to hide the sidebar!").addClass("showing").removeClass("hiding");
});
});
});
});
</script>
<div id="index_content">
<a title="Click to hide the sidebar" class="showing" id="toggle"></a>
<div id="sidebar">
<!-- Sidebar: float-right/width-28.5% -->
</div>
<div id="index_main-content">
<!-- Content: float-left/width-69.5% -->
</div>
</div>
Also, there is a live demo here. Like I said before, for some reason, the .on() does not happen. :(
Thank you. :)
$content.stop(true,true).animate({ //code });
Try using stop before issuing the animation the second time, for example:
$content.stop().animate(
This will stop and previous animations before starting the new one.
Also use true in the stop statement to cancel other animation and complete the animations.
$content.stop(true,true).animate(
See:
http://api.jquery.com/stop/
stop() to stop the current animation,
clear the animation queue and go to the end of the animation .stop(true,true)
or
turn the button to OFF before you start the animation
turn the button to ON within the animation callback function, so that
is turned on again after the animation finished
OR more easy
<div id="index_content">
<a title="Click to hide the sidebar" class="showing" id="toggle">Click me</a>
<div id="sidebar">sidebar
<!-- Sidebar: float-right/width-28.5% -->
</div>
<div id="index_main-content">content
<!-- Content: float-left/width-69.5% -->
</div>
</div>
$(document).ready(function(){
$('#toggle').click(function(){
$('#sidebar:visible').fadeOut('slow')
$('#sidebar:hidden').fadeIn('slow')
})
})
take a look#
http://jsfiddle.net/jdFrR/