I'm using javascript for storing cookies in my login form(Remember Me checkbox) and I would want that if user checks the box = cookies saved, and if he unchecks it = cookies deleted(that's ofc if they are saved). That should all happen when the user submits the form(login). It works when for example I put some button so when I click it, cookies are deleted.
This is my form:
<form name="login-form" class="login-form" action="login_exec.php" onSubmit="if(this.checker.checked) toMem(this)" method="post">
These are my js functions:
function toMem(a) {
newCookie('theUsername', document.forms["login-form"]["username"].value);
newCookie('thePassword', document.forms["login-form"]["password"].value);
}
function delMem(a) {
eraseCookie('theUsername');
eraseCookie('thePassword');
document.forms["login-form"]["username"].value = '';
document.forms["login-form"]["password"].value = '';
}
Ok so, I tried to make it like this:
<form name="login-form" class="login-form" action="login_exec.php" onSubmit="if(this.checker.checked) {toMem(this)} else setTimeout(delMem(this), 3000)" method="post">
It didn't work... It deleted the input before the form was submitted. So anyone got an idea?
function toMem(a) {
newCookie('theUsername', document.forms["login-form"]["username"].value);
newCookie('thePassword', document.forms["login-form"]["password"].value);
}
function delMem(a) {
eraseCookie('theUsername');
eraseCookie('thePassword');
//document.forms["login-form"]["username"].value = ''; i commented this out because
//document.forms["login-form"]["password"].value = ''; you dont want to delete the values if a user unchecks remember me
}
"this", inside of setTimeout refers to the window object. Also, setTimeout expects to be passed a function, not an invocation.
better to use a listener here, but I think this should work...
onSubmit="var that = this;if(this.checker.checked) {toMem(this)} else setTimeout(function(){delMem(that)}, 3000)"
Related
I have a form with a text input:
<form name="form1">
<cfinput type="text" name="text1" id="text1" onChange="someFunc();">
</form>
I only want it to submit in certain cases. (I run some error-checking first)
<script>
function someFunc() {
if (1==2) {
document.form1.submit();
} else {
alert("Not submitting");
}
</script>
The problem is: even though the alert is triggering fine, somehow, the form is still submitting (There are no other submit statements aside from the one!).
Many thanks if anyone can shed some light on this . . .
There's a fundamental flaw with this approach. You are currently telling the form that when text1 changes, then call someFunc(). If true, use JavaScript to submit the form. If false, go on about your business. If you hit enter in the text input, the form still submits. If there is a submit button that gets clicked, the form still submits.
The basic way to approach this is like so:
<form name="form1" onsubmit="return someFunc()">
<input type="text" name="text1" id="text1">
</form>
When the from is submitted, call someFunc(). This function must return either true or false. If it returns true, the form submits. If false, the form does nothing.
Now your JavaScript needs a slight alteration:
<script>
function someFunc() {
if (1==2) {
return true;
} else {
alert("Not submitting");
return false;
}
}
</script>
You can still have other functions called when a field is changed, but they still won't manage the form's final submission. In fact, someFunc() could call the other functions to do a final check before returning true or false to the onsubmit event.
EDIT: Documentation on implicit form submission.
EDIT 2:
This code:
$(document).ready(function(){
$("#text1").on('change', function(event){
event.preventDefault();
});
});
is stopping the default processing for the change event associated with that element. If you want to affect the submit event, then you'd do this:
$(document).ready(function(){
$("#form1").submit(function(event){
event.preventDefault();
});
});
Which would allow you to do something like this:
$(document).ready(function(){
$("#form1").submit(function(event){
if ( $('#text1').val() !== "foo" ) {
alert("Error");
event.preventDefault();
}
});
});
var form = document.getElementById("Your Form ID");
form.addEventListener("submit", function (e) {
if ("Your Desired Conditions.") {
e.preventDefault();
}
});
use the following code it will work perfectly fine
<form onsubmit="return false;" >
this is my form name
<form name="form" id="form" method="post">
this my onclick
<input type="submit"
name="submit"
value="Register"
onclick="return validate()" />
this is my validate()
function validate()
{
var f = document.forms['form'];
var ary=[checkfname,checklname,checkEmail,checkAge,checkAdd,validtp,validhp,checkName,validpass];
var rtn=true;
var z0=0;
for (var z0=0;z0<ary.length;z0++)
{
if (!ary[z0](f))
{
rtn=false;
}
}
return rtn;
}
i think is my validate return there cannot return to post
hope someone can help me to solve the problem,thx...
Looks like you are storing an array of functions that make different validations:
var ary=[checkfname,checklname,checkEmail,checkAge,checkAdd,validtp,validhp,checkName,validpass];
Then you iterate that array and each function is executed receiving the form as parameter.
!ary[z0](f)
If you return false, the default action will be prevented, in this case the form won't be submitted.
So I'm pretty sure one of your validations is returning false. You should check each one of those functions and see wich one is returning false - you could debug using tools such as chrome dev tools or firebug.
I have used javascript to add this when a particular page get loaded.
document.getElementById('commit').addEventListener("click", validateSubmit,
false);
this validateSubmit method have some code which will validate form data and
it will do this
function validateSubmit(){
//some code
window.addEventListener('submit', newsubmit, true);
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = newsubmit;
}
function newsubmit(event) {
var target = event ? event.target : this;
event.preventDefault();
return false;
}
so for the first time while submitting form by clicking its coming in this method and it is preventing form values to submit and after fixing al those values when i am again trying to click on submit button then its not working,in console i am getting this error-
"Uncaught TypeError: Cannot call method 'preventDefault' of undefined"
Please help me...
Thanks in advance..
Try changing your function declaration from
function newsubmit(event) {
to
var newsubmit = function(event) {
the function has to be declared as a variable if you want to use it as a parameter of an event listener.
I don't think you need to go through such pains to prevent user from submitting incomplete form. Try this:
<form name="form1" id="form1" onsubmit="return validateForm()" ....>
<input type="text" id="txtName" />
</form>
function validateForm()
{
//CHECK IF FORM FIELDS CONTAIN VALID VALUES?
var formValid=....;//validation logic
return formValid;
}
Now if during validation you find any error you will set formValid variable to false otherwise if all input is correct set formValid to true. When form will getfalseas return value fromvalidateForm` function it will not submit.
Try this:
function validateSubmit(){
window.addEventListener('submit', newsubmit, true);
HTMLFormElement.prototype.submit = newsubmit;
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
}
function newsubmit(event) {
var target = event ? event.target : this;
event.preventDefault();
return false;
}
I have a form thats displayed in a modal box now I want to be able to use the same modal box for 2 different pages where they do slightly different things. Is there a way I can set an event or something for the forms submit button to set which javascript function it calls.
I want to do this from within javascript without changing my form code.
Whats the best way to do this?
Can I set a function to a variable and have it called by my button code?
ie:
var buttonFunction;
//Set the button function on load
function MyButtonFuntion() {
buttonFunction();
}
you could do it like this:
var buttonFunction;
if(someCondition){
buttonFunction = function(){
alert("some action");
};
}else{
buttonFunction = function(){
alert("other action");
};
}
function MyButtonFuntion() {
buttonFunction();
}
You may declare a variable with the function name to be called on submit. The following code is an example. Declaring the function to call in a variable functionToCall inside the form will always work here.
<script type="text/javascript">
function callMyFunction(formName) {
var formObj = eval("document." + formName);
if(formObj != null) {
var functionToCall = eval(formObj.functionToCall.value);
if(functionToCall) {
functionToCall();
}
}
}
</script>
<form method="post" name="form1">
<input type="hidden" name="functionToCall" value="form1Function"/>
<input type="button" onclick="callMyFunction('form1')"/>
</form>
In the window.onbeforeunload event is there a way to detect if the new request is a POST (on the same page) or a GET (going to a page)? It would also be great to see the new document.location.
window.onbeforeunload = winClose;
function winClose() {
//Need a way to detect if it is a POST or GET
if (needToConfirm) {
return "You have made changes. Are you sure you want?";
}
}
This is how I just did it:
$(document).ready(function(){
var action_is_post = false;
$("form").submit(function () {
action_is_post = true;
});
window.onbeforeunload = confirmExit;
function confirmExit()
{
if (!action_is_post)
return 'You are trying to leave this page without saving the data back to the server.';
}
});
Sounds like something you'd need to attach to a form, or specific links. If the event is raised by a link, and there is a request string full of variables, it will act as a GET. If it's a form, you'll have to check the METHOD, and then figure the URL based on the data being submitted in the form itself.
No method
GET method
<form method="GET" action="thisPage.php">
<!-- This is a GET, according to the method -->
<input type="text" name="usrName" value="jonathan" />
</form>
<form method="POST" action="thisPage.php">
<!-- This is a POST, according to the method -->
<input type="text" name="usrName" value="jonathan" />
</form>
So the detection would take place not in the window method, but in the click method of your links, and form submissions.
/* Check method of form */
$("form").submit(function(){
var method = $(this).attr("method");
alert(method);
});
/* Check method of links...UNTESTED */
$("a.checkMethod").click(function(){
var isGet = $(this).attr("href").get(0).indexOf("?");
alert(isGet);
});