We Keep Coding

How can ı see text after submit form

I have a form and validation. I need form is full and after submitting just Successfull text. ı wrote that code but text is coming even if the form is not full
$(function() {
$('form').on("submit",function(e) {
$("#_supportFormContainer").removeClass("col");
$("#_supportFormContainer").css("display", "none");
setTimeout(function(){
$('#contact-text-div').show();// or fade, css display however you'd like.
}, 3000);
});});

In order to hide a form when it is submitted I would append a listener to the submit event of the form
$("form").submit(function(event) {
$(this).hide()
});
Then, in order to show the div, I would also add $("#myElem").show();.
If you also want to block the page reload you can add event.preventDefault(), in order to avoid the use of onsubmit="return false;" on the form itself.
But maybe you also want to hide $("#myElem") on document ready, so you can add $("#myElem").hide()
Putting all together, the script become
$(function() {
$("#myElem").hide()
$("form").submit(function(event) {
event.preventDefault()
$(this).hide();
$("#myElem").show();
});
});

Text from user input variable not staying in div element

I am taking a variable from an HTML form element and trying to put it into a div to be displayed on the website whenever I click a button. However it shows up for a second then pops away.
I tried taking it out of the document.ready() block but that didn't work. When I put a string literal in the $(".output").html the same problem occurs as well. Similar questions like mine seem to be a syntax error, but I don't seem to have any I can find.
$(document).ready(function(){
$(".sub").on("click",function(){
var searchstring = $("#searchfield");
$(".output").html(searchstring.val());
});
});
Here is my site on codepen: http://codepen.io/arcjackson06/pen/NNeQvJ

Your <button> will submit the surrounding form. You need to use:
<button class="..." type="button"></button>
Which will prevent the form from submitting when clicked.
Alternative you can prevent the default click event, with:
$('.sub').on('click', function(event) {
event.preventDefault();
// ...

This should do the trick:
$(".sub").on("click",function(e)
{
e.preventDefault();
var searchstring = $("#searchfield").val();
$(".output").html(searchstring);
}

No need for any extra JavaScript.
Just give your button an attribute type="button" and that should take care of it.
The problem is a button's default type is submit so you are refreshing the page.

The issue is that the form on your page is submitting every time someone clicks that search button. To prevent that you need to use event.preventDefault:
$(".sub").on("click",function(event){
event.preventDefault();
var searchstring = $("#searchfield");
$(".output").html(searchstring.val());

When someone is clicking on , Its submitting the form and your page is getting reloaded. If you donot want to submit the form
You can try this.
$(document).ready(function(){
$(".sub").on("click",function( event ){
var searchstring = $("#searchfield");
$(".output").html(searchstring.val());
event.preventDefault(); // This will prevent the form submission
});
});

It's refreshing the form. That's why you don't see value. See updated codepen : http://codepen.io/anon/pen/vGwNJP
I added return false as follows:
$(document).ready(function(){
$(".sub").on("click",function(e){
var searchstring = $("#searchfield");
$("#output").html(searchstring.val());
return false;
// Or e.preventDefault();
});
});
Alternatively, you can add e.preventDefault(); as well.

As you are using form it would try to do forms default action i.e. submit.
Here you need to do event.preventDefault in onclick handler.

Why does the text change back without 'return false'

I have a simple HTML button on my form, with script as follows:
$(document).ready(function () {
$("#btn1").click(function () {
$("#btn1").text("Button clicked");
return false;
});
});
With the return false, it works as I expect - I click the button, and its text changes to 'Button clicked'. Without the 'return false', it changes, but then changes back.
Complete JQuery noob here, why do I need the 'return false'?

A <button> in a form submits the form, which is why it turns back, the page reloads resetting everything javascript changed, so you see the change, and it immediately reloads the page when the form submits.
The return false prevents the form from submitting when clicking the button.
Note: the <button> element has a default type of submit, so it will always submit the form it's nested inside.

Like #adeneo said, your form is being sent out so the page will reload. Additionally, if you don't want to use return false; you can use preventDefault() by passing an event parameter to your function as such:
$(document).ready(function () {
$("#btn1").click(function (ev) {
ev.preventDefault();
$("#btn1").text("Button clicked");
});
});
Hope this helps,

If the <button> was not intended to submit the form, then instead of using return false; or other workarounds make the button the proper type.
<button id="btn1" type="button">
And it will stop submitting when clicked. The reason it does now is because the button's default type is submit (it has 3 possible types: submit, button, and reset).

:visible doesn't work after submit event

Code http://jsfiddle.net/Z9qP5/1/
I want to fadeOut my form after the user submitted their email. There is the next problem. I just can't catch the submit event, so what I want, if the success message appears, then the form should be hidden. I use :visible like this:
$('#mc-embedded-subscribe-form').submit(function (e) {
if($('#mce-success-response').is(':visible')){
$("#mc_embed_signup").hide();
}
});
#mce-success-response is the success dialog.
I also tried:
if( $("#mce-success-response").css('display') == 'block') {
}
but it doesn't work. What's wrong?

yes, I think the submit event is just a one way, you just submit, and you don't want to get response when you do like that way. maybe you can use ajax that can handle the result. actually, you just submit your form, then fade out your form I think.

This is more of a workaround, and not an effective solution.
But it works!
function checkSuccess() {
if ($('#mce-success-response').is(':visible')) {
$("#mc_embed_signup").hide();
}
}
window.setInterval(checkSuccess, 100);
You could also use the code below to add a delay to the hideing:
function checkSuccess() {
function successAction(){
$("#mc_embed_signup").hide();
}
if ($('#mce-success-response').is(':visible')) {
setTimeout(successAction, 2500);
}
}
window.setInterval(checkSuccess, 100);

One possible solution is to use a custom event in this case(because as I explained in the comment the success-respone element is displayed in an ajax success handler).
So in your mce_success_cb method
if (resp.result == "success") {
$('#mce-' + resp.result + '-response').show();
$('#mce-' + resp.result + '-response').html(resp.msg);
$('#mc-embedded-subscribe-form').each(function () {
this.reset();
});
$("#mc-embedded-subscribe-form").trigger('submitsuccess');
// If the form has errors, display them, inline if possible, or appended to #mce-error-response
} else {
//rest of your code
}
then
$(document).ready(function () {
$('#mc-embedded-subscribe-form').on('submitsuccess', function (e) {
$("#mc_embed_signup").hide();
});
});

Are you getting the success response from AJAX after the submit? As per your code snippet, I am assuming that to be the case and that the success boz appears once your Ajax request is completed. Since its going to be for a short while, you can try the following piece of code.
function waitForIt(){
if(!$('#mce-success-response').is(':visible')){
setTimeout(waitForIt(),500);
} else{
$("#mc_embed_signup").hide();
}
$('#mc-embedded-subscribe-form').submit(function (e) {
setTimeout(waitForIt(),500);
}
});
Alternatively, if its not the AJAX response that pops up the success message, you can try putting an interface between your form submit and the user action. Change your input type from submit to button or use a plain image as a button, i.e <img>. Use a click() instead of submit(), check if the container is visible, if yes, then hide the required container and trigger submit.
Hope it helps!

Submit a form using onclick event, but only allow once

I am both setting a form's action and submitting the form via the onclick event of a div:
<div class="action_button" onclick="document.forms['test'].action='url/to/action';document.forms['test'].submit()">
<span class="action_button_label">Save</span>
</div>
This works fine, but I'm wanting to use some code that conditionally checks for the 'Save' in the action_label_button, and only lets the submit() fire once. I'm trying to prevent multiple saves (which is yielding duplicate data in my app) from occurring.
// disable save buttons onclick (prevent multiple clicks of save buttons)
$('.action_button_label').one('click', function() {
// if the button is a save button
if($(this).html().indexOf('Save') != -1) {
// submit the parent form
$(this).html('<span class="action_button_label" style="color:gray;">Saving...</span>');
$(this).parents('form').submit();
}
});
$('form').bind('submit', function() {
$(this).find('action_button').attr('onclick', '');
});
This code doesn't seem to work as I expected. I'm afraid I'm a bit out of my depth here, any pointers would be great.

Try replacing
$(this).find('action_button').attr('onclick', '');
with
$(this).find('.action_button').attr('onclick', '');

You should always handle multiple submits server side to ENSURE you don't get them. However you can hide the button-label to assist with this client side.
$('.action_button_label').one('click', function() {
// if the button is a save button
if($(this).html().indexOf('Save') != -1) {
// submit the parent form
$('.action_button_label').hide(); //ADD THIS
$(this).html('<span class="action_button_label" style="color:gray;">Saving...</span>');
$(this).parents('form').submit();
}
});
$('form').bind('submit', function() {
$(this).find('action_button').attr('onclick', '');
});