So I have this chat,
http://codepen.io/anon/pen/Frmez
$(function() {
$('.textarea-chat').on('keyup', function(e) {
if (e.which == 13 && ! e.shiftKey) {
$(this.form).submit()
return false;
}
});
});
Updated code ^
But one problem with it is that if you input a text to send away to the chat and press enter, the chat window closes, it should stay open but I can't figure out how
$(this.form).submit()
This actually submits the <form>. You're probably getting the error "Please use POST request" because by default it uses GET. It doesn't like being sent a query string, so it gives that error. You can POST stuff to it, but nothing will happen.
In order to POST stuff to it, you need to use Ajax. See docs.
For example:
$("#myForm").submit(function () {
var url = "path/to/your/script.php"; //handle form input by your script
$.ajax({
type: "POST",
url: url,
data: $("#myForm").serialize(), //serializes the forms elements
success: function (data) {
alert(data); //show response
}
});
return false; //avoid executing actual submit of the form
});
Related
I am building a web app, I am submitting a form with jquery, if I should click on the submit button the first time, it will sub!it once, if I should click it the second time after the first form is submitted, it will submit twice, if I could click it the third time, it will submit 3 times and so on, pls how will I prevent it. Am not talking of disabling the submit button, and I also if I should reload the page if it reset the submission
$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });
This is a classic example. Basically, what you want to do, in your submit method, you want to disable the submit button before you call your ajax. Once the ajax is completed, you will have 2 outcomes, success, or error. In both cases, you want to enable your submit button.
function buttonSubmit() {
let buttonSelector = event.srcElement;
buttonSelector.disabled = true;
$.post({
url: "your-api",
data: {
someData: "kjfgkdjfglkdf"
},
success: function (result) {
// handle your success, do stuff
buttonSelector.disabled = false;
},
error: function (response) {
// handle your error, do stuff
buttonSelector.disabled = false;
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="buttonSubmit()">Click Me!</button>
Lets say I have one page "page1" which consist of some info and a button named "Add".
When I click on this button, it opens a popup modal window that consists of a form with around 10 fields and submit button. Once I click on this button, I used ajax post to submit the form and at the server side it does insert and update operation and return success or failure result.
During this ajax process, I am displaying a loading image. What I am trying is just after this loading image it should redirect to new page. Lets say "page2". But in my code, i see after this loading stops , I see the modal window and "page1" for about 2-3 seconds and then only it redirects to "page2".
I am not sure if my question is logical or not but still if there is any method to stop it.
Below I have ajax processing code.
Thank you.
$.ajax({
type: 'POST',
url: 'page2.php',
data: {
'data': form_data
},
success: function(response)
{
var arr = JSON.parse(response);
if(arr.success == true) {
window.location.href = 'page3.php';
}
else {
alert('There are some error while saving record.');
}
},
beforeSend: function()
{
$('.loader').show().delay(9000);
},
complete: function(){
$.fancybox.close();
$('.loader').hide();
}
});
$.ajax({
success: function(response)
{
...
if(arr.success == true) {
...
}
else {
...
$('.loader').hide();
}
},
...
complete: function(){
$.fancybox.close();
}
});
Don't hide the loader after ajax request is done.
Am using Ajax to send a request to a web server, but will like to show user with a GIF image indicating them to wait till the request is completed.
Can you please help me modify this code to load GIF image on sending the request.
jQuery(document).submit(function(e){
var create_acct_form = jQuery(e.target);
if(create_acct_form .is("#createacctform")){ // check if this is the form that you want (delete this check to apply this to all forms)
e.preventDefault();
jQuery.ajax({
type: "POST",
url: create_acct_form .attr("action"),
data: create_acct_form .serialize(), // serializes the form's elements.
success: function(data) {
console.log(data);
if( data.status == 'error' ) {
// error handling, show data.message or what you want.
} else {
// same as above but with success
$("#createacctform")[0].reset();
$("#create_acct-info").html(data)
}
}
});
}
});
You can add ajaxStart and ajaxEnd handlers and can show your loading image like this:
$(document)
.ajaxStart(function() {
$(Some Image).show();
})
.ajaxStop(function() {
$(Some Image).hide();
});
I had this JavaScript running on a testing host page(http://www.000webhost.com/), then I moved the form/site to another hosting page(https://www.one.com/). Suddenly the form is posted twice! I have been trying to add the following line e.stopPropagation(); to the code, right after e.preventDefault();, then noting is posted. If I only use e.stopPropagation(); - nothing is posted either.
$(document).ready(function() {
$('form').on('success.form.bv', function(e) {
var thisForm = $(this);
//Prevent the default form action
e.preventDefault();
//Hide the form
$(this).fadeOut(function() {
//Display the "loading" message
$(".loading").fadeIn(function() {
//Post the form to the send script
$.ajax({
type: 'POST',
url: thisForm.attr("action"),
data: thisForm.serialize(),
//Wait for a successful response
success: function(data) {
//Hide the "loading" message
$(".loading").fadeOut(function() {
//Display the "success" message
$(".success").text(data).fadeIn();
});
}
});
});
});
});
});
I am using 'success.form.bv', because I am using bootstrapvalidator in order to validate the form. I have not been able to combine the "Form is submitted twice" example code on the bootstrapvalidator with my code in order to only submit the form once.
What should I do in order to submit the form only once?
I'm checking my form with RSV validator. Want to get work following: Let's say user opened page for the first time. After filling all text input boxes, when user clicks #submit_btn FOR THE FIRST TIME, the form submit function fires RSV (validator), validator checks if there is any error. If all right, posts data via ajax, else RSV shows error messages array with the help of alert(). THIS PROCEDURE ONLY FOR THE FIRST TIME
BTW: RSV - validator. If no error occured during validation process the myoncomplete() function returns 1.. If something went wrong it alerts. Got from here
I can't get it work. Please help me to fix logic/code mistakes. Thx in advance
My JS
var int=null;
var counter=0;
function myOnComplete() {
return 1;
}
$(document).ready(function () {
$("#add_form").RSV({
onCompleteHandler: myOnComplete,
rules: [
"required,name,Page name required",
"required,title,Page title required.",
]
});
$("#add_form").submit(function (e) {
e.preventDefault();
dataString = $("#add_form").serialize();
$.ajax({
type: "POST",
url: "processor/dbadd.php",
data: dataString,
dataType: "json",
success: function (result, status, xResponse) {
//do something if ajax call is success
int = setInterval(call, 3000);
var message = result.msg;
var err = result.err;
if (message != null) {
$.notifyBar({
cls: "success",
html: message
});
}
if (err != null) {
$.notifyBar({
cls: "error",
html: err
});
}
},
error: function (e) {
//ajax call failed
alert(e);
}
});
});
$("#submit_btn").click(function () {
if(counter===0){
if(myOnComplete()===1) $('#add_form').submit();
else return false;
}
else $('#add_form').submit();
counter++;
});
$('#autosave').click(function(){
if($(this).is(':checked')){
int = setInterval(call, 3000);
$('#submit_btn').attr({'value':'Save&Exit'});
}
else{
$('#submit_btn').attr({'value':'Save'});
clearInterval(int);
}
});
});
function call() {
$('#add_form').submit();
}
Looking through the RSV code it looks like whatever you attach RSV to has its submit rebound to validate the data using .RSV.validate()
As seen here:
$(this).bind('submit', {currForm: this, options: options}, $(this).RSV.validate);
});
Which means that if you use .submit() you are calling .RSV.validate also.
So once you validate the info try binding your submit to the standard submit function.
Edit: To help explain
When you use
$("#add_form").RSV({...});
The RSV javascript code is binding .RSV.validate() to the submit event of your add_form element. Meaning when you submit your add_form form .RSV.validate() is being called before the submit.
Try running the script code below with and without the .RSV() call
This script will log ALL handlers for ALL events on the add_form element. You notice that calling $element.RSV({...}) attaches a second event handler to the submit event of the add_form element. I am unsure of the best way to access this event handler to .unbind() it. Good luck :)
jQuery.each($('#add_form').data('events'), function(i, event){
jQuery.each(event, function(i, handler){
console.log(handler);
});
});
OK, to my understanding now you only want to validate the first set of data and if that validates correctly trust the user, i got this working on jsFiddle with an easy example, i guess you can make use of that
http://jsfiddle.net/WqnYa/9/
Basically what i do is that i catch the submit button click and not the forms submit function, maybe it can be done that way, too. I assign a class "needsvalidation" and when ever the first validation passes, i simply remove that class. And if that class is not present, the validation will not be initialized due to $(this).hasClass('needval')
If that's not what you're looking for then your question needs way more clarity :( hope this helps though!