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
Related
I want to set a hide HTML attribute with JS but it is reseting itself after 1ms. Does anyone know how to set the hide attribute and remove it.
<body>
<form method="post" id="form">
<input type="text" name="text" id="text" ><br>
<button onclick="hide()">True</button>
<button onclick="show()">false</button>
<input type="submit" name="submit">
</form>
</body>
<script type="text/javascript">
function hide() {
document.getElementById('form').hidden = true;
}
function show(){
document.getElementById('form').hidden = false;
}
</script>
You are calling hide() when you click a submit button inside a form.
The JavaScript runs
The element is hidden
The form submits
A new document is loaded and rendered (and it isn't hidden in the new document).
Don't use a submit button unless you actually want to submit the form.
<button type="button" ...>
If you do want to submit the form then you'll need to set the hidden attribute in the new page. You could do that with server-side code that reads the form data (and you'll need to set a name and value for the hide submit button so the data can be picked up by that page).
Consider using display:block:
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
function hide() {
document.getElementById('form').style.display = "none";
}
function show(){
document.getElementById('form').style.display = "block";
}
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>
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.