I have form and the form submission can be done by either clicking on a hyper link or on a submit button. However I want my server to realize what has been used for form submission.
Current code snippet looks like this:
<a href=javascript:{} onclick="formSubmit()";>Next</a>
<input type="button" name="search" value="Get Result" onclick = "formSubmit();">
And my formSubmit() looks like this
<script type="text/javascript">
function formSubmit()
{
document.getElementById('form1').submit();
return false;
}
Any pointers as to how to go about it.
Thanks
Use a hidden parameter in your form.
< input type="hidden" value="0" name="flag"/>
When the form is submitted using javascript change flag value to '1' in the script.
function formSubmit()
{
document.form1.flag.value="1";
document.getElementById('form1').submit();
return false;
}
in case submit button is pressed the flag = '0'.
you can get this parameter on the server to determine how the form is submitted
edit : change your button type to 'submit' or call different scripts for both actions.
Pass a value (say an int or boolean) into the function. The value passed can be used to determine the source.
you invoke the same function to submit the form,so if you want your server to realize what has been used for form submission,i think you must pass a parameter to your server
You can use event.target to get the source that triggered the event and then set a flag to pass to server. See the example below:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e)
{
alert(e.target);
}
</script>
</head>
<p>
Click on a paragraph. An alert box will alert the element that triggered the event.</p>
<p>
<strong>Note:</strong> The target property returns the element that triggered the event, and not necessarily the eventlistener's element.</p>
This Link Click will return "javascript:{}"
<a href=javascript:{} onclick="myFunction(event)";>Next</a>
<p>
This Button Click will return "[objectHTMLInputElement]"
<input type="button" name="search" value="Get Result" onclick = "myFunction(event);">
</p>
</body>
</html>
Related
I am trying to submit a form which is in bootstrap. Once submission is done (on-click function) I want an alert message which is working fine. But I am unable to go to home page after that.
Following file opens after that.
file:///action_page.php?FName=&LName=&email=&pwd=
I am okay to display massage using innerHTML. After that also page is switching to same php file.
<script>
function myFunction() {
document.getElementById("submission").innerHTML = alert("successfully submitted");
window.location.href = ".....";
}
}
</script>
<body>
<button id="submit" onclick="myFunction()"class="text-light"
type="submit">Submit</button>
</body>
Since you want to make an alert, instead of using:
document.getElementById("submission").innerHTML = alert("successfully submitted");
just use alert('successfully submitted');. Alerts aren't shown inside of an HTML, they show on top of your page.
This fixes your problem:
function func() {
alert("success!");
window.location = "https://google.com";
}
<button onclick="func()">Click me</button>
If you're using this button in your form, you will have to override action attribute of the form by doing this. Also, if you're using this button to submit a form, use <input type="submit"> instead.
To override action of your form, use formaction
W3schools quote:
The input formaction attribute specifies the URL of the file that will
process the input when the form is submitted.
Note: This attribute overrides the action attribute of the
element.
You can combine this with alert so you don't need a separate function:
<input type="submit" onclick="alert('success!')" formaction="home.html" value="Click me">
<!-- if you really want, you can also use a button -->
<button type="submit" onclick="alert('success!')" formaction="home.html">Click me</button>
Formaction reference
I have the following script, it's just an example of my actual code, but it's behave the same as the actual one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="http://google.com/">
<input type="text" name="item_name" />
<input type="hidden" name="submit" value="save" />
Submit
</form>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
jQuery(function($){
$('#save').on('click', function(e){
e.preventDefault();
$('form').submit();
});
});
</script>
</body>
</html>
You can see, there is a tag with id save, which is when this link is clicked, the form should submit, but it doesnt. this is caused by a hidden input with its name submit, if I change the name it just works well.
tried this on both chrome and firefox on linux. anyone can explain this?
here is the fiddle
-- EDIT --
I tried using native click event:
document.getElementById('save').onclick = function(e){
e.preventDefault();
document.getElementsByTagName('form')[0].submit();
}
form cannot be submited too.
I think this is the same issue as this:
TypeError: e[h] is not a function
Having an input named submit adds a "submit" property to the form, meaning you can't call .submit() as a function.
You should name your hidden input something else.
Your HTML should look like this.
<form action="index.php">
<input type="text" name="item_name" />
Submit
</form>
You can fix it by using the trigger('submit')
jQuery(function($){
$('#save').on('click', function(e){
e.preventDefault();
$('form').trigger('submit');
});
JsFiddle
You need to change the name of the input button from "submit" to something else. Having an element named "submit" causes the form's submit method to no longer work, which means the form cannot be submitted via JavaScript (at least, not easily).
The reason for this is because an input element named "submit" can be referenced by its name like this: form1.submit. That is, the input element is added as a property of the form object, with the property name being the name of the input element. That basically hides the submit function that is on the form's prototype.
This is jQuery Naming ambiguity problem. you should not declare any
form element name id submit when invoke it conflict duplicate reference.
The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements. Forms can be submitted either by clicking an explicit <input type="submit">, <input type="image">, or <button type="submit">, or by pressing Enter when certain form elements have focus.
Depending on the browser, the Enter key may only cause a form
submission if the form has exactly one text field, or only when there
is a submit button present. The interface should not rely on a
particular behavior for this key unless the issue is forced by
observing the keypress event for presses of the Enter key.
As the .submit() method is just a shorthand for .on( "submit", handler ), detaching is possible using .off( "submit" )
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.
I have two submit buttons in a form that Lets user Update/ Delete content. I want a confirm pop only if the user clicks Delete button.
<html>
<head>
<script type="text/javascript">
function confirmation() {
// I need to know which submit button was pressed.
if (value==Delete){
var answer = confirm("Cancel?")
if (answer){
return true;
//Continue as intended
}
else{
return false
}
}
}
</script>
</head>
<body>
<form id="Edit_Data">
//form input fields go here
<input name="action" type="submit" onclick="confirmation()" value="Update">
<input name="action" type="submit" onclick="confirmation()" value="Delete">
</form>
</body>
</html>
Any Ideas?
First of all you have several problems with your code. The value in your if statement is an undefined variable secondly you need to put quotes around the delete. Here is working fiddle http://jsfiddle.net/SMBWd/ and the relevant code change. Also, I would encourage you to look how to do this without using javascript in your HTML.
function confirmation(e) {
// I need to know which submit button was pressed.
if (e.value=='Delete'){
and in the HTML
<input name="action" type="button" onclick="confirmation(this)" value="Update">
<input name="action" type="button" onclick="confirmation(this)" value="Delete">
For your onclick event definition in the html tag, why not call separate functions?
The simplest way would be to NOT call the javascript on the Update button.
If your form is static, then you do this in your IDE. If it's dynamic, then the dynamic code can create the form element accordingly.
If the form elements are generated automatically, then you should setup an event handler in JavaScript dynamically. Find all elements of type input with type attribute button or submit, and assign
elems[i].onclick = confirmation;
You'd then get the event object as a method parameter, and you could query that for the value of the button.
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.