After submission comments, my comment form slides up and hides. I'm using this code, which works:
$("#pm-post-form").slideUp("normal", function(){
$("#mycommentspan").html(g.html).show();
if (g.preview == true) {
$("#be_the_first").hide();
$("#preview_comment").html(g.preview_html).fadeIn(700)
}
})
But I don't want hide it anymore, so users can place others comments.
I tried this code without success:
$("#pm-post-form").val("", function(){
$("#mycommentspan").html(g.html).show();
if (g.preview == true) {
$("#be_the_first").hide();
$("#preview_comment").html(g.preview_html).fadeIn(700)
}
})
I used val("") to clear form field content after comment submission, but it doesn't work.
I tryed this solution that works.
$("#mycommentspan").html(g.html).show();
if (g.preview == true) {
$("#be_the_first").hide();
$("#preview_comment").html(g.preview_html).fadeIn(700); // comment placed
$("#c_comment_txt").val("") // textarea where use place comment, that after submission is cleared
}
After submission, user can place new comment without refresh page.
Related
I searched this topic a lot and got a lot of different responses, however, none of them work for me.
I have a form that when it gets successfully submitted, reloads the page.
$('form').on('submit', function(event){
if($('#input').val() == 0){
alert("Please insert your name");
event.preventDefault();
}
}
Now, on each successful submit I want a success message to slide at the top, stay there for 2 sec and then fade out.
I tried this, however, it doesn't stay after the page was reloaded.
else{
$('.success_message').fadeIn(1500);
}
Is that possible in pure jQuery?
Also, I am not looking for a way to reload the page. The page gets reloaded automatically after submitting the form.
After submitting the form, set a value in localStorage indicating that the success message should fade in:
$('form').on('submit', function(event) {
if ($('#input').val() == 0){
alert("Please insert your name");
event.preventDefault();
}
localStorage.fadeInSuccessMessage = "1"
});
Then check if the value exists in localStorage. If yes, fade in the message and delete the value from localStorage:
if ("fadeInSuccessMessage" in localStorage) {
$('.success_message').fadeIn(1500);
delete localStorage.fadeInSuccessMessage;
}
I have a simple html contact form with validation check.
I would like to have some commands executed after a successful form submission. But the way I've set this whole thing up... I can't make it work.
HTML contact form:
<form id="mycontact_form" name="form_name" method="post" onsubmit="return validateForm();" action="https://domain.tld/cgi-bin/sendformmail.pl">
validateForm.js:
function validateForm() {
//validating input fields
if (!valid){
return false;
} else {
if(condition1 == true)
{
document.form_name.submit(); return;
}
else {
// doing stuff to form content
document.form_name.submit(); return;
}
}
}
When the submit button is pressed, the form is validated and will be submitted to the perl script sendformmail.pl which return a HTML Status 204 so the user stays on this page and is not redirected (that's the only way I got this part to work).
Now what I would like to have after a successful submission is:
clear/reset the form and
some minor UI stuff: change background of 2 elements + placeholder/inner text of 2 input fields for thank you message.
But for example if I put document.form_name.reset() after the document.form_name.submit(), it's too fast. It resets the form before submissions. I also tried to call another (independent) function after the validateForm() in the onsubmit but that seems to be wrong (well, at least it's not working).
So I guess I need to put these 2 things (reset + CSS changes) in a separate function and call it after a successful form submission.
But how, where and when?
I'm very interested to learn a simple yet effective solution. (but jQuery is also available)
Thank you for your help.
If your email script is on the same domain as your contact form, try submitting it via ajax. Here's a simple jQuery example, which would be in your onsubmit handler:
if (valid) {
$.ajax({
url: "/cgi-bin/sendformmail.pl",
method: "POST",
data: $("#mycontact_form").serialize()
})
.done(function() { // this happens after the form submit
$("#mycontact_form")[0].reset();
});
}
return false; // don't submit the form again non-ajax!
Otherwise, if on different domains, try setting the target of your form to the id of a hidden iframe on your page. Since this is cross-domain, you have no real way of knowing the result of the form submit due to the same origin policy. You can simply hope for the best and reset the form after X number of seconds:
if (valid) {
$("#mycontact_form").submit();
// clear form 3 seconds after submit
window.setTimeout(function() {
$("#mycontact_form")[0].reset();
}, 3000);
}
Both of these approaches keep the user on the same page without a refresh.
I ended up using beforeSend with ajax instead of done. And instead of resetting the form I chose to clear the value of the input fields/textarea (there are only 3). I also included the preferred 'post-submission' style of the input fields/textarea in beforeSend to leave nothing to chance.
Anyway, thank you for helping me & pointing me in the ajax direction.
$.ajax({
url: "/cgi-bin/sendformmail.pl",
method: "POST",
data: $("#mycontact_form").serialize()
beforeSend : function (){
// clear value of input fields/textarea & disable them
// use placeholders for "Thank you." etc.
}
});
I've just wrote some validation code so as to check if either of my radio buttons from my web form have been selected before they are submitted. I've just starting learning php as I want to be able to store the value of each radio button in a .csv file.
Because I have my action attribute set to trigger a php script, I get my alert box, but as soon as I click OK after pressing submit the browser goes straight to the php script (inevitably).
Is there a way I can return to my initial index.html after the alert message?
I have not actually written any php as yet, so would this go in the php script or the javascript?
Heres my code so far:
$("#submit").on("click", function() {
var radio = $("input[type=radio][name=emotion]")[0].checked;
var radio2 = $("input[type=radio][name=emotion]")[1].checked;
var radio3 = $("input[type=radio][name=emotion]")[2].checked;
if(!radio && !radio2 && !radio3) {
alert("You must select at least one word!");
}
else {
alert("Please rate the next item!")
}
});
In Jquery you should use .submit() function to validate a form.
Then to avoid to submit the form you can use the function event.preventDefault()
And if you want to go to the index you can use window.location = "yourURL"
You must use form.onsubmit().
For example, if your form's name is myForm:
document.forms['myForm'].onsubmit = function()
{
if (this.elements['emotion'].value)
{
alert("Please rate the next item!");
}
else
{
alert("You must enter at least one word!");
return false;
}
}
And after alert "Please rate the next item!" form will be send.
Actually you can use jquery $.post() , an easy solution is just to post your php page without leaving index page.
http://api.jquery.com/jquery.post/
$.post( "yourpage.php" );
You probably have the input type of the submit button as submit? Set this to button, so the action doesn't take place and only jQuery is executed.
But then you have to submit the form by jQuery when validation was successful:
document.myFormId.submit();
I've been battling with this issue all day. I am hoping someone has an answer for me. I did a bunch of searching and can't seem to find an answer.
I have a page that has 3 forms on it. I am working within the 2nd form. None of the forms are embedded within another form.
I have a hidden div that contains two form elements, a drop down list and a text box, and a submit button that I anticipated it posting to the form it is enclosed in. On another button within the form itself (not submit button), I have javascript that launches jquery.Dialog, that code looks like this:
function showReleaseDiv() {
var div = $("#ReleaseHoldsDiv");
var f = div.closest("form");
div.dialog({ width: 270, height: 187, modal: true, title: 'Bulk Hold Resolution' });
div.parent().appendTo(f);
}
This part does function correctly. I've overcome the typical jquery issue where it pulls the contents of the dialog out of the form, so I put it back in the form, but wonder if this is causing my real issues which are:
The drop down list and text box are both required before I post, so I default the submit button to disabled, then I have an onchange event on the drop downlist, and the onkeyup on the text box call the following javascript:
function enablePopupRelease() {
var button = $("PopupReleaseButton");
if (button && button != null) {
button.attr("disabled", "disabled");
if ($("#ResolutionTypeCode").val() != "" && $("#ResolutionComments").val() != "") {
button.removeAttr("disabled");
}
}
return true;
}
Both events fire correctly and I step through the code; all seems fine, but the button disable state does not change.
Please help.
I believe you are missing a hash on this line:
Change:
var button = $("PopupReleaseButton");
to
var button = $("#PopupReleaseButton");
firstly I would clean some code as follows:
function enablePopupRelease() { var button = $("PopupReleaseButton"); if (button) { button.attr("disabled", "disabled"); if ($("#ResolutionTypeCode").val() && $("#ResolutionComments").val()) { button.removeAttr("disabled"); } } return true; }
Let me know if makes any difference please?
if you break through the code ... does it stop at button.removeAttr("disabled"); please?
Are you using the jQuery UI button widget for the form's submit button? If so, you will need to call
$("#PopupReleaseButton").button({disabled: true});
to disable the button.
disabled isn't an attribute, it's a property -- try using button.prop('disabled',true) and button.prop('disabled',false) instead.
http://api.jquery.com/prop/
I am using jQuery 1.4.3 and have a newbie question.
In the following .submit function, I grab the value of the selected option in the facilityCodes dropdown list after I click the submit button and then during the submit function, select the facilityCode again in the dropdown list and then disable the list so that the user cannot change it. However, the situation is when I reload the page after the submit button is clicked the dropdown defaults to the first option and the list is enabled. I apparently am not understanding how .submit works so that I'm selecting the option I'm defining in my code and then disabling the list AFTER the page reloads. My question is what am I doing wrong? Am I using the wrong event?
Any help/direction would be greatly appreciated. Thank you.
Here is my code:
$(function() {
$("#ARTransferForm").submit(function() {
var msgsCount = 0;
var facilityCodeValue = $("#ARTransferForm\\:facilityCodes option:selected").val();
alert("facilityCodeValue = " + facilityCodeValue);
if (facilityCodeValue == 0) {
alert("To Facility Code must be selected");
msgsCount++;
} else {
$('select[id$=facilityCodes]').val(facilityCodeValue);
$("#ARTransferForm\\:facilityCodes").attr("disabled", "disabled");
}
});
});
Refreshing the page will erase everything you've done with JavaScript prior to the page refresh. If you're looking to preserve states through page reloads, you'll need to use server side code, or set a cookie.
The submit event is called on the current page when the form is about to post. You'll need to pass along a value (hidden field) that is checked on form load that you can check to determine if the list should be disabled.
Update:
On page load, you'll want to check to see if this is a repost where the hidden field id="disable_select" was set set during the post. If so, then you'll disable the form.
$(function(){
if ($('#disable_select').val() == '1') {
$("#ARTransferForm\\:facilityCodes").attr("disabled", "disabled");
}
});