We Keep Coding

how to bind bootstrap loading button success / error on form submit

I'm trying to bind a bootstrap button with loading state to a form.
I would like the button to keep the data-loading state until the form is submitted. If the form errors out the data-loading should ideally stop or display a different message.
How can I achieve this?
My code for the button:
http://www.bootply.com/128762
what would be the best approach for a form that is not ajax?

Are You looking Something Like this Below
$('#loading-example-btn').click(function () {
if($("#txt").val().length > 0)
{
var btn = $(this)
$(this).attr('value','Loading');
}
else
{
$(this).attr('value','error On Submit');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="test" id="txt">
<input type="submit" id="loading-example-btn" value="Submit" data-loading-text="Loading...">
</form>

Form still submit when return false (Can't see the error)

I searched on stackoverflow and find some answers, but I tried everything.
Maybe it is just a small, or a few small mistakes, but I can't find them.
I also tried on jsFiddle!
<form class="search" onsubmit="return false;" method="get" action="index.html">
<input class="text" type="text" onblur="if(this.value == ''){this.value = this.defaultValue;}" onfocus="if(this.value == this.defaultValue){this.value = '';}" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }" value="Nachname" name="inputNachname" />
<input class="text" type="text" onblur="if(this.value == ''){this.value = this.defaultValue;}" onfocus="if(this.value == this.defaultValue){this.value = '';}" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }" value="Vorname" name="inputVorname" />
<input type="hidden" value="search" name="query" />
<button id="searchButton2" onmouseover="this.style.cursor = 'pointer';" onclick="form.submit();" value="Go" type="button">SUCHE</button>
</form>
I want to have a function, which returns false:
<form class="search" onsubmit="return go_search();" method="get" action="index.html">
and this is the function:
function go_search(){
alert('abort');
return false;
}
jsFiddle
Maybe anyone can find some mistakes or find a better way to do this?

There are two problems with your fiddle.
Your JavaScript function was wrapped in a window.load handler putting it in the wrong scope. Just putting it in the head will suffice.
Your button had the type button, not submit. The onclick="form.submit();" in your button was running and submitting the form since it was triggering the submission, instead of triggering the form's submit handler (onsubmit="return go_search();"). Changing the button's type from button to submit will fix that.
jsFiddle example

You need to lose the onSubmit tag. Just returning it FALSE won't exactly acheive what you are going for. It seems you want to call a function that MAY return "false" if validation fails. Here is a good method for handling that.
You need to attach the function call to your submit button
onclick="go_search()"
And inside your function, make the form submit if you'd like (after validation).
function go_search(){
alert('abort');
if (youWantToSubmit==true) {
form.submit();
}
}
Even this won't work 100% because your form has no name or ID. You need to add those, and use a more correct call like:
document.getElementByID("[formID]").submit();

you can do this with jquery
$("#searchButton2").click(function(e){
e.preventDefault();
alert('abort');
});
JSFIDDLE

Use jquery.
$(function(){
$('form.search').submit(function(){
return false;
});
});
See here: http://jsfiddle.net/U6UC3/

Cant post from input form into javascript array?

Hi i'm having a problem with posting from the input "searchtag" into "hash:'searchTag'" inside the javascript array. Please help me out! I'm very new to Javascript.
<form action="" method="post">
<input type="text" name="searchTag" placeholder="Search">
<input class="submit" name="Search" type="submit">
<div class="instagram"></div>
<script type="text/javascript">
$(".instagram").instagram({
hash:'searchTag',
clientId: 'My-clientId',
image_size:'tumbnail'
});
</script>

You need to collect the value from searchTag, which I assume you'll want to do when clicking the search button. For example:
$(document).ready(function() {
$('#SearchButton').click(function () {
var searchTag = $('#SearchTagInput').val();
$(".instagram").instagram({
hash: searchTag,
clientId: 'My-clientId',
image_size:'tumbnail'
});
});
});
The above example requires that you add the corresponding ids, SearchButton and SearchTagInput, to the input fields.
See this fiddle for an example.

Form submit through AJAX not working

My form will not submit through AJAX to show the return of the PHP page, 'myscript.php'.
This is the HTML I'm using:
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
<ul>
<li>
<label>Destination:</label>
<select name="city" id="city">
<option class="level-0" value="atlanta">Atlanta</option>
<option class="level-0" value="miami">Miami</option>
</select>
</li>
</ul>
<input class="srch_btn" type="button" value="{{submit-text}}" />
</form>
Here is the javascript earlier in the page:
jQuery(document).ready(function($) {
$('#city').change(function() {
$(this).parents("form").submit();
});
$('#myform').submit(function() {
$.post(
'myscript.php',
$(this).serialize(),
function(data){
$("#mydiv").html(data)
}
);
return false;
});
});
Here is the myscript.php:
<?php
if ($_POST['city'] == "atlanta") {
echo "Div contents 1";
}
if ($_POST['city'] == "miami") {
echo "Div contents 2";
}
?>
The submit button won't respond at this point or make an attempt to access the 'myscript.php' file. Help is appreciated. Thanks in advance!

It is better to use .closest() rather than .parents() in this case.. As parents selector gets all the ancestors that match the selector.
$('#city').change(function() {
$(this).closest("form").submit();
});
And to stop the Default action use e.preventDefault instead of return false
$('#myform').submit(function(e) {
e.preventDefault();
// Your code here
});

In you HTML code, I think you should change input type=button to input type=submit
<input class="srch_btn" type="submit" value="{{submit-text}}" />
Then when you click that button, the form will be submitted to your php page.
Also, about select change event in your jQuery code, I think you can just try following selector, as you have the name/id attribute available in your HTML.
$('#city').change(function() {
$('#myform').submit();
});

One issue with your code is that it does not actually stop the form from being submitted. return false; does not exactly work in jQuery in the way that you think it does. Instead, to stop the default action, you would have to do something like this.
$('#myform').submit(function(event) {
event.preventDefault();
http://api.jquery.com/event.preventDefault/
On top of that, if you don't want the form submit to take place, and you want to replace it with your own AJAX submition, why are you calling form submit at all in this code? Why not just put the AJAX directly into your change code?

dqhendricks was right - why use form submit when you can just access ajax directly? In the below example, I added a div (#responder) below the form to show the output. Try it -- you'll see that it works perfectly.
You really don't need the button, although I left it there, because the data is sent/received the moment the drop-down is changed. You will see your messages appear in the div I included below the form.
REVISED HTML:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
<ul>
<li>
<label>Destination:</label>
<select name="city" id="city">
<option class="level-0" value="atlanta">Atlanta</option>
<option class="level-0" value="miami">Miami</option>
</select>
</li>
</ul>
<input class="srch_btn" type="button" value="Go" />
</form>
<div id="responder"></div>
REVISED JAVASCRIPT/JQUERY:
$(document).ready(function() {
$('#city').change(function() {
//var cty = $('#city').val();
$.ajax({
type: "POST",
url: "myscript.php",
data: "city=" + $(this).val(),
success:function(data){
$('#responder').html(data);
}
});
});
});

How to simulate the action in a form when submit?

first: always is the same action.
two: the form has multiple "CSS SUBMITS" like
<form action="/myaction" method="POST">
<a id="foo1" name="foo1" href="#" role="form_button">submit1!</a>
<a id="foo2" name="foo2" href="#" role="form_button">submit2!</a>
<a id="foo3" name="foo3" href="#" role="form_button">submit3!</a>
<input type="submit" id="canfoo" name="canfoo" value="I can process this"/>
</form>
<script>
$('a[role=form_button], div[role=form_button], span[role=form_button]').bind( 'click', function(){ $('form').submit(); } );
</script>
how can I do in /myaction this:
if ($_POST['foo1']) { action; return; } // :(
if ($_POST['foo2']) { action; return; } // :(
if ($_POST['foo3']) { action; return; } // :(
if ($_POST['canfoo']) { action; return; } // THIS WORKKKKKSS!!
How can I do to foo1, foo2, foo3 to work?
(I use jQuery like:
$('a[role=form_button], div[role=form_button], span[role=form_button]').bind( 'click', function(){ $('#actiontodo').val(this.id); $('form').submit(); } );
), then, in the other side (action),
I do:
IF ($_POST['ACTIONTODO'] == "foo") { action; return; }
BUT, I DON'T LIKE THIS SOLUTION! I WANT THE <A behave as well as <input type="submit"
Thank you very much for your help!

You shouldn't give priority to visual over usability, that's a huge mistake. Anyway, you can stylize any button/input to suit your needs without any problem, just grab a good CSS tutorial.
Don't reinvent the wheel.

You can use any element you want to trigger a .submit() event.
http://api.jquery.com/submit/
For example, this form:
<form id="targetForm" action="/myaction">
<input type="text" value="Oh hai!"/>
</form>
Can be submitted by the following jQuery:
$('#targetForm').submit();
However, you can style buttons and input fields without too much trouble in CSS.
Update:
I'd agree with Ben that you should reconsider doing form submissions this way.
For multiple submission triggers..
So if you have multiple triggers you need a hidden field to record this information for POST.
Something like this will do the trick...
<form id="targetForm" action="/myaction">
<input type="text" name="myText" value="Oh hai!"/>
<input type="hidden" name="whichTrigger" value="default" />
</form>
And then each trigger would do ...
$('#whichTrigger').val("myTriggerName"); // A different value for each one of course.
$('#targetForm').submit();

I solved this problem as is:
<form action="/myaction" method="POST">
<div id="foo1" name="foo1" href="#" role="form_button"><button type="submit">submit1!</button></div>
<div id="foo2" name="foo2" href="#" role="form_button"><button type="submit">submit2!</button></div>
<div id="foo3" name="foo3" href="#" role="form_button"><button type="submit">submit3!</button></div>
<input type="submit" id="canfoo" name="canfoo" value="I can process this"/>
</form>
!!!!!!!!!!!!!!!!!!! THANKS!