So this is as should be on jsfiddle.
But when I put it within a .ascx page. Which loads within an .aspx page. The <form> decides to make itself null.
Anyone know why it is doing this?
More specifically:
document.getElementById('emvForm').submit();
The above line is returning null.
Okay so looking at the code I noticed I am getting:
<form id="1" runat="server">
<form id="emvForm">
</form>
</form>
Firefox ignores the second form because it is a nested form. The id remains the same it hasn't changed because runat not being defined on it.
Anyway of bypassing this?
Looking at your code you can better do this:
instead of calling:
document.getElementById('emvForm').submit();
Return true:
return true;
Then modify your input button to this:
<input type="submit" value="Submit Form" id="SubmitButton" class="contactFormButton submit emailValid" onClick="return validForm();">
Now when you return true the form will be submitted and where your return false in the validForm function the forms stops the submit.
Related
I have a simple form which has nothing other than a submit button. All I want to do is prevent submission of the form (I know it doesn't make any sense but this is only for illustration). So I'm making use of the form's onsubmit event and this event returns false. This does work but this is where the 'incomprehensible behavior' arises.
I can associate the return false; statement with the onsubmit event of the form either by using inline JavaScript or keep it in a different place.
<form onsubmit="return false;" id="form1" method="post">
<input type="submit" id="btnButton" value="Submit" />
</form>
Now, the aforementioned code works just fine. See => http://jsfiddle.net/MccK5/
I can even modify the above code as follows in order to make the JavaScript separate (unobtrusive).
--some html markup initially
<form onsubmit="return falsifier()" id="form1" method="post">
<input type="submit" id="btnButton" value="Submit" />
</form>
<script>
function falsifier() {
return false;
}
</script>
--other html markup follows
Here, the script tag is placed right after form in the HTML markup.
This works too. See => http://jsfiddle.net/AfdQ5/
But when I shift the JavaScript to an different place (ex: external file), this doesn't seem to work.
By taking a look into the console in inspect element, I noted the error falsifier is not defined.
See this here => http://jsfiddle.net/5cR5R/2/
Could someone elaborate on why this is so?
You're encountering a design feature (or flaw) in JSFiddle:
In JSFiddle, the "JavaScript" pane is not the direct source code of a referenced JavaScript file, instead JSFiddle wraps that code as below and inserts it into <head>. Just go View Source to see what it does:
<script type='text/javascript'>
//<![CDATA[
window.onload=function(){
function falsifier() {
return false;
}
}
//]]>
</script>
Your <form> elements can't find falsifier because falsifier only exists within the scope of this anonymous function.
I'm a newbie to scripting. I want to update HTML content with JavaScript, but as you can see
the web page keeps refreshing.
How can I prevent the page from refreshing?
Javascript:
function showResult(form) {
var coba=form.willbeshown.value;
var coba2=coba+2;
document.getElementById("showresulthere").innerHTML=coba2;
}
HTML
<form>
<input type="text" name="willbeshown" value="">
<button onclick="showResult(this.form)">Ganti1</button>
</form>
<p id="showresulthere">Result will be shown here</p>
</body>
Don’t use a form at all. You are not submitting any form data to a server. To process data in the browser, you don’t need a form. Using a form just complicates things (though such issues could be fixed by using type=button in the button element, to prevent it from acting as a submit button).
<input type="text" id="willbeshown" value="">
<button onclick=
"showResult(document.getElementById('willbeshown'))">Ganti1</button>
<p id="showresulthere">Result will be shown here</p>
<script>
function showResult(elem) {
document.getElementById("showresulthere").innerHTML = Number(elem.value) + 2;
}
</script>
I have used conversion to numeric, Number(), as I suppose you want to add 2 to the field value numerically, e.g. 42 + 2 making 44 and not as a string, 42 + 2 making 422 (which is what happens by default if you just use an input element’s value and add something to it.
Your button should be
<button onclick="showResult(this.form); return false;">Ganti1</button>
Javascript
function showResult(form) {
var coba=form.willbeshown.value;
var coba2=coba+2;
document.getElementById("showresulthere").innerHTML=coba2;
return false; // prevent form submission with page load
}
DEMO
The others will explain how you should use jQuery, but this would explain why it didn't work in your original code.
The <button> tag submits the form, so you have to add this inside your form tag to prevent form submission:
<form onsubmit="return false">
Btw, even without giving your form an explicit action, it uses the current page to submit; it's easy to think that it will not do anything without an action.
If you define a <button /> without defining its type it will work like a submit button. Just add type="button" to your button markup and the form won't be submitted.
<button type="button" onclick="showResult(this.form)">Ganti1</button>
With this change you won't need any return false or .preventDefault() "workarounds"
Following is my code in which i am trying to accomplish, when user clicks on the submit button then my javascript function sets all the value to null in the textfields of the form whose id='contact_form' without loading the page . Kindly let me know how can i modify the following code to accomplish the functionality i've been trying to do.
Thanks!!
<script type='text/javascript'>
$(document).ready(function(){
$('#love').click(function(e) {
document.contact_form.name.value = '';
alert('aloha!!');
//stop the form from being submitted (not working fine)
e.preventDefault();
}
}
</script>
<form name='abc' action='' id='abc' >
<input type="submit" id='love' />
</form>
I have also tried the following function it worked fine but its not preventing from the page load
<script type='text/javascript'>
function js(){
document.contact_form.name.value = '';
//stop the form from being submitted (NOT WORKING!!)
preventDefault();
}
}
</script>
If you try onsubmit="return false;" in the form tag your form will not be submitted. Unfortunately it will NEVER be submit. Unless you are not planning to submit it via AJAX you have to modify your onsubmit event like this:
<form onsubmit="return callFunction()">
function callFunction() {
if(condition)
return true;
else
return false;
}
$("#abc").submit( function() {
// do everything you want.
return false; //will prevent the reload.
});
To have a function execute when the form submits you have to do something like this;
<form onsubmit="return validate();">
your form here
</form>
Then you can have your check in a function called 'validate()' (or whatever you want to call it)
Make sure the validate() function returns true is the form is allowed to submit, or returns false if the page is not allowed to submit.
Also put id's and names on your input elements, that way you can access them much easier.
Assuming you have an HTML like this :
<form>
<input type="text" id="text" />
<input type="submit" id='submit' value="clear above field without reloading" />
</form>
And you want the text field value to clear when a user submits without reloading using jQuery, then following script will be your remedy :
$(function(){
$('#submit').click(function(){
$('#text').value('');
})
});
A form can be submitted in many ways, not only by clicking on a submit buttons. You should really watch for submit events, and cancel them with preventDefault (instead of click events that might trigger the submit). See #user1359163's answer.
But you problem seem to be document.contact_form.name.value. There is no property contact_form on the document object, so this will raise an error. The preventDefault is not executed, your form gets submitted and you never see the error. Set your debugger to "Stop on errors"!
You might want something like document.forms["contact"], but I don't know your HTML. An id selector for the input element would be the better choice.
I've got a button that calls a javascript function named "submit()". In that function I simply write document.getElementById('try').innerHTML="it worked"; to test out whether or not my button is passing data to the function or not.
The problem is "it worked" gets printed for about a half second before disappearing.
I made an entire form that printed processed data to the webpage perfectly using the same html page. The only difference is that I changed the structure of my form and moved my functions to a .js file.
Although now, even if I comment out the submit() function in the .js file and paste the function within the core html file the same thing happens. I can paste is above or below the form and the same thing results.
Here is my HTML:
<div class="formsection">
<button type="Submit" onclick="Submit()">Submit</button>
</div>
</form>
</div>
<div id="output">
<p> Try this: <span id="try"></span></p>
</div>
Here is my javascript function:
<script type="text/javascript">
function Submit(){
document.getElementById("try").innerHTML="It worked";
}
</script>
you are using submit button to test your code, it executes the JS code and submitted the form.
If you don't want the form to be submit use return false in submit()
<script type="text/javascript">
function Submit(){
document.getElementById("try").innerHTML="It worked";
return false;
}
</script>
and in html again use return
<button type="Submit" onclick="return Submit()">Submit</button>
In javascript when any event handler returns false that halts the event execution.
The issue you're experiencing is due to your markup, mainly this piece:
<button type="Submit" onclick="Submit()">Submit</button>
You've specified that the button should perform a form submission when clicked, hence the javascript fires, changes the text and the page is reloaded (post back occured).
To get around that, you implement one of the following changes:
Change your markup to just be a button that fires javascript:
<input type="button" onclick="Submit()">Submit</input>
Add a statement in your javascript that cancels the default action for your submit button:
event.preventDefault(); MDN Link
Your form is submitted, that's why you see "It worked" only for a second (if at all).
Your function isn't prevents form submission.
You can use onsubmit attribute of form to specify function which will be called before form is submitted and can decide whenever it allowed or not by returning Boolean value
Your form actually gets submitted:)
Use this:
<button type="Submit" onclick="Submit(); return false;">Submit</button>
I don't see the FORM tag but if you do something like:
<form action="javascript:" onsubmit="Submit()">
Your function Submit will be called, and nothing more.
The nice thing about using a input type="submit" is your user can submit a form by hitting Enter and don't have to manage it yourself.
I have written following function which checks whether start_date field is not empty and displays proper message when submit button is clicked. But then it takes the control to the previous page. So user has to write again all other fields on that form.
Is there any way to stay on that page even after prompting the error message, with all other fields value.
//JavaScript
function checkform() {
if(document.frmMr.start_date.value == "") {
alert("please enter start_date");
return false;
} else {
document.frmMr.submit();
}
}
// HTML
<html>
<form name=frmMr action="page1.jsp">
Enter Start date:
<input type="text" size="15" name="start_date" id="start_date">
<input type="submit" name="continue" value="submit" onClick="checkform();">
</form>
</html>
Thanks in advance
While you have a return value in checkform, it isn't being used anywhere - try using onclick="return checkform()" instead.
You may want to considering replacing this method with onsubmit="return checkform()" in the form tag instead, though both will work for clicking the button.
You can simply make the start_date required using
<input type="submit" value="Submit" required />
You don't even need the checkform() then.
Thanks
use return before calling the function, while you click the submit button, two events(form posting as you used submit button and function call for onclick) will happen, to prevent form posting you have to return false, you have did it, also you have to specify the return i.e, to expect a value from the function,
this is a code:
input type="submit" name="continue" value="submit" onClick="**return** checkform();"
Don't know for sure, but it sounds like it is still submitting. I quick solution would be to change your (guessing at your code here):
<input type="submit" value="Submit" onclick="checkform()">
to a button:
<input type="button" value="Submit" onclick="checkform()">
That way your form still gets submitted (from the else part of your checkform()) and it shouldn't be reloading the page.
There are other, perhaps better, ways of handling it but this works in the mean time.