Develop Reference

Send value of form to a function that is already running?

I'm trying to figure out a login to a website. I've stopped the loading animation of a codrops template half way through and I've been successful to have the login work as a prompt, but I can't figure out how to send the value from the form field to work the same way. The function is already running...
Here is the link that works with the prompt
http://nmbdes.com/test/r2/
Here is the link that I am trying to have work with the form field.
http://nmbdes.com/test/r1/
password is "bianca"
Here is the relevant code-
HTML
<div id="iWrap">
<form>
<label>Please Enter the Password</label><br />
<input name="pw" id="pw" type="password" required><br />
<input name="submit" id="submit" type="button" value="submit" onClick="epw();"/>
</form>
</div>
JS
function startLoading() {
// simulate loading something..
var simulationFn = function(instance) {
var progress = 0,
interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance.setProgress( progress );
// reached the end
if ( progress === 1) {
var apw = "bianca";
var epw = document.getElementById("pw").value;
if (ipw != epw) {
alert("Sorry, wrong password!");
window.location.reload();
} else if (ipw == epw) {
classie.remove( container, 'loading' );
classie.add( container, 'loaded' );
clearInterval( interval );
var onEndHeaderAnimation = function(ev) {
if( support.animations ) {
if( ev.target !== header ) return;
this.removeEventListener( animEndEventName, onEndHeaderAnimation );
}
classie.add( document.body, 'layout-switch' );
window.removeEventListener( 'scroll', noscroll );
}
if( support.animations ) {
header.addEventListener( animEndEventName, onEndHeaderAnimation );
} else {
onEndHeaderAnimation();
}
}
}
}, 80);
};
Is this possible or do I need to stick with the prompt?
thanks in advance for any help!
xx

I think I'm overthinking your question, but it seems it's some basic html and javascript.
If I understand, you want to submit the password from the form, and carry on with your logic.
You know,
Writing event handlers in vanilla javascript can be annoying to make
work across browsers, so I'd recommend using a library like jquery to
make it robust (and also easier to write).
So the solution would be as simple as :
function startLoading() {
// simulate loading something..
var simulationFn = function(instance) {
var progress = 0,
interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance.setProgress( progress );
// reached the end
if ( progress === 1) {
$(form).submit(function(){
var apw = "bianca";
var epw = document.getElementById("pw").value;
if (ipw != epw) {
alert("Sorry, wrong password!");
window.location.reload();
} else if (ipw == epw) {
classie.remove( container, 'loading' );
classie.add( container, 'loaded' );
clearInterval( interval );
var onEndHeaderAnimation = function(ev) {
if( support.animations ) {
if( ev.target !== header ) return;
this.removeEventListener( animEndEventName, onEndHeaderAnimation );
}
classie.add( document.body, 'layout-switch' );
window.removeEventListener( 'scroll', noscroll );
}
if( support.animations ) {
header.addEventListener( animEndEventName, onEndHeaderAnimation );
} else {
onEndHeaderAnimation();
}
}
}
});
}
}, 80);
};
Important
You also need to include jquery.

JQuery blur and hide causing over-firing

I'm using jQuery v1.11.2 and have created a basic JSFiddle here (http://jsfiddle.net/k1g3upbv/). It does not show up very well in JSFiddle because my project also uses twitter Bootstrap. I also rushed through the JSFiddle a bit because I had to remove code to simplify (e.g. removing my AJAX calls)... so please just use the JSFiddle code as a guide.
What should happen :
User enters ID to check
AJAX call is made when focus && ID > 10 or blur && id>10
The AJAX call ends by hiding the input field and displaying a clear button
Upon clicking the clear button, the field re-appears and result and input boxes silently cleared
What does happen :
User enters ID to check
AJAX call is made when focus && ID > 10 or blur && id>10
The AJAX call ends by hiding the input field and displaying a clear button
Upon clicking the clear button, the blur function is called again and a fresh result pulled by AJAX flashes up again a second time.
How can I avoid a conflict between the clear button and blur function ?
<div id="CheckerDiv">ID:
<input type="text" id="CheckerID" />
</div>
<div id="CheckerClearDiv" style="display:none">
</div>
<div id="CheckerResult"></div>
(function (checkweb, $, undefined) {
checkweb.Checker = function (vNumber) {
console.log('ajax fired');
var msgBox = $("#CheckerResult");
var checkerDiv = $("#CheckerDiv");
var checkerClearDiv = $("#CheckerClearDiv");
// do stuff here that returns an ajax
msgBox.html('AJAX RETURN !');
checkerDiv.hide();
checkerClearDiv.show();
setTimeout(function () {
msgBox.text('');
}, 15000);
};
}(window.checkweb = window.checkweb || {}, jQuery));
$(document).ready(function () {
// ID checker
$('#CheckerDiv').on("blur", '#CheckerID', function (e) {
var n = $('#CheckerID').val();
if (n.length > 10) {
console.log('blur fired');
checkweb.Checker(n);
}
$('#CheckerID').val('');
setTimeout(function () {
$("#CheckerResult").text('');
}, 5000);
});
$('#CheckerDiv').on("keyup change", '#CheckerID', function (e) {
var n = $(this).val();
if (n.length > 10) {
console.log('change fired');
checkweb.Checker(n);
}
});
$('#CheckerClearDivButton').on("click", function () {
console.log('button fired');
$('#CheckerID').val('');
$("#CheckerResult").text('');
$("#CheckerClearDiv").hide();
$("#CheckerDiv").show();
});
//
});

add "return false"; as last statement in your clear function.
$('#CheckerClearDivButton').on("click", function () {
console.log('button fired');
$('#CheckerID').val('');
$("#CheckerResult").text('');
$("#CheckerClearDiv").hide();
$("#CheckerDiv").show();
return false; //<----
});

Override a submit type button to call custom javascript method instead

I cannot alter the following code, but instead must override the default functionality of the button so that when clicked, a custom javascript method is called instead of the form being submitted.
And to accomplish this I must use javascript via injection.(Its a AIR desktop app using the twitter api)
Can anyone help?
<body>
<form><fieldset class="buttons">
<input class="submit button" id="cancel" name="cancel" type="submit" value="Cancel" />
</fieldset>
</form>
<body>

If you want to prevent form from submitting overiding click wont be enough. One can submit you form by Ctrl+Enter.
You can do the following http://jsfiddle.net/tarabyte/R5yQq/.
Find the form assuming you know button id.
function getForm(id) {
var button = document.getElementById(id);
while(button &&
(button = button.parentNode) &&
(button.nodeName !== 'FORM')){}
return button;
}
Add 'submit' event listener.
var form = getForm('cancel'),
handler = function(ev){
ev = ev || window.event;
if(ev.preventDefault) { //w3c browsers
ev.preventDefault();
}
else { //IE old
ev.returnValue = false;
}
alert('Custom logic goes here!');
};
if(form) {
if(form.addEventListener) {
form.addEventListener('submit', handler, false)
}
else if(form.attachEvent) {
form.attachEvent('onsubmit', handler);
}
}

Replace it via JS with a button that calls your function
document.getElementById('cancel').parentNode.innerHTML = '<input type="button" onClick="myFunc()" value="replaced">';
window.myFunc = function() { alert('clicked'); return false; }
http://jsfiddle.net/e37nd/

How to click on one button and if form is save to click on other

I have 3 buttons and 1 form.
1st button is new button. Button that i want to add. When i click on this new button i want jQuery to click on next button:
2nd button: Save - when this button is clicked need to add function like:
if($("#email").val().trim().length>0 && $("#customer_firstname").val().trim().length>0 && $("#customer_lastname").val().trim().length>0 ) {
if this is valid - form is saved successfully jQuery need to click on third button (when this is invalid stop to here. Other js will show errors in form):
3rd button: Send order - after clicked on it do not need nothing. Other js will do the rest.
Other way will be to use "save" button and if is valid to click on "send button" - may be is more is solution?
<p class="orderbutton">
<input type="submit" class="order-button-opc" id="order-button" value="Order Button">
</p>
<p class="submit">
<input type="submit" class="exclusive button" name="submitAccount" id="submitAccount" value="{l s='Save'}" />
</p>
<p class="cart_navigation" id="cart_navigation">
<input type="submit" value="I confirm my order" class="extraorderbutton">
</p>
I try this:
<script>
$(document).ready(function () {
var firstFormValid = false;
var isFormValid = false;
$('#order-button').click(function(){
if(anycondition)
firstFormValid = true;
});
$("#submitGuestAccount").click(function () {
if(firstFormValid ) {
if($("#email").val().trim().length>0 &&$("#customer_firstname").val().trim().length>0 && $("#customer_lastname").val().trim().length>0 ) {
isFormValid = true;
} else isFormValid = false;
} else firstFormValid =false;
});
$("#order-button").click(function () {
if(isValid && firstFormValid)
$('#order-button').submit()
});
});
</script>
But i get error:

Use this hope will help.
$(document).ready(function () {
var firstFormValid = false;
var isFormValid = false;
$('#newbutton').click(function(){
if(anycondition)
firstFormValid = true;
});
$("#savebutton").click(function () {
if(firstFormValid ) {
if($("#email").val().trim().length>0 &&$("#customer_firstname").val().trim().length>0 && $("#customer_lastname").val().trim().length>0 ) {
isFormValid = true;
} else isFormValid = false;
} else firstFormValid =false;
});
$("#sendbutton").click(function () {
if(isValid && firstFormValid)
$('#FORMID').submit()
});
});

Rather than just debug/throw some code at you, you could approach this better by working on each of the areas separately, likely help for this and the future ?
Declare elements/selectors
Validate Function
Form 'check' function
Form 'save' function
Event Handlers.
Say,
1) Declare elements/selectors
var _inputemail = $("#email"),
_inputfirstname =$("#customer_firstname"),
_inputlastname = $("#customer_lastname"),
_button_check = $("#checkbutton"),
_button_send = $("#sendbutton"); /* hidden initially in css */
2) Create a Validate function
function isValid() {
var is=false;
/* add in the checks */
if(_inputemail.val().length>0) { is=true; }
/* return true or false */
return is;
}
3) form 'check' function
function checkForm() {
/* use the validate function */
if(isValid()) {
/* show the 'save' button */
_button_send.show();
}
}
4) form 'send' function
function sendForm() {
/* sendform here */
if(isValid()) {
/* we could run the validate again if we like */
}
}
5) Event Handlers
_button_check.on("click", checkForm);
_button_send.on("click", sendForm);
/* now we have separate functions we can check/send
the form from other events too
eg. Checking as we type */
_inputlastname.on("keyup",checkForm);
Got some reusable / easy to manage 'components' now
will be some things to sort in this code, but hope helps in someway! ( ? )

jQuery - How to delay form submit until animation is finished?

I have this page animation which when the user leaves the page the document slides to the left. However, I also have this form which the user fills in then hits the "Next" button, and I want the submission of the form to wait until the animation is finished (animation e3ms?)
With my mediocre knowledge of JavaScript (especially forms and parsing) I wrote a script which to my knowledge should work, but it's not. Any ideas? Any help would be much appreciated.
JavaScript:
function ValidateForm() {
var x = document.forms["myForm"]["myInput"].value;
if(x == null || x == "") {
$(".error-msg").animate({
opacity: "1"
});
return false;
} else {
$("body").animate({
"margin-left": "-200px",
opacity: "0"
});
}
}
HTML:
<form name="myForm" action="next.html" onsubmit="return ValidateForm();">
<input type="text" name="myInput" placeholder="Example: johnnyappleseed#me.com">
<span class="error-msg">You must fill out required elements!</span>
<input type="submit" value="Next">
</form>
CSS code just styles form and sets the .error-msg with an opacity of "0".
P.S.: I know JavaScript form validation is dangerous, but once I publish my site I will back it up with PHP or ASP validation on my server, alongside JavaScript validation.

I would probably move your ValidateForm callback onto the onclick of the submit button. Then in your callback call e.preventDefault() to stop the form submitting from the click bubbling through. After that, submit the form manually in the callback of the animation (http://api.jquery.com/animate/)
HTML
<form name="myForm" action="next.html">
<input type="text" name="myInput" placeholder="Example: johnnyappleseed#me.com">
<span class="error-msg">You must fill out required elements!</span>
<input type="submit" value="Next" onclick="ValidateForm();">
</form>
Javascript
function ValidateForm() {
// stop the form auto submitting
e.preventDefault();
var x = document.forms["myForm"]["myInput"].value;
if(x == null || x == "") {
$(".error-msg").animate({
opacity: "1"
});
return false;
} else {
$("body").animate({
"margin-left": "-200px",
opacity: "0"
},
{
complete: function() { $("form[name='myForm']").submit(); }
});
}
}

You need to use a callback function at the end of the animation to submit the form. Try the following.
function ValidateForm() {
var x = document.forms["myForm"]["myInput"].value;
if(x == null || x == "") {
$(".error-msg").animate({
opacity: "1"
});
} else {
if ($('form').css('opacity') == 0) {
return true;
}
$("body").animate(
{margin-left: "-200px",opacity: "0"},
function() {
$('form').submit();
}
);
}
return false;
}

This is the documentation concerning jQ animate Here
The last argument in your .animate parameters is the callback function which is executed when your animation is over, so yours would look like:
$("body").animate({
"margin-left": "-200px",
opacity: "0"
}, 200, function() {
$('form').submit();
});
P.S. the 200 represents the time it takes to accomplish the animation....the default is 400.