I have this code
<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onsubmit" event to a form element.</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
alert("the message has been send");
}
</script>
</body>
</html>
I want not to do this alert message.I want to replace the form giving it this message the message has been send
Put the form in a div, and assign the innerHTML of the DIV to replace the form.
Also, you need to return false; in the onsubmit code to prevent the form from submitting to the server.
function myFunction() {
document.getElementById("formdiv").innerHTML = "This form has been submitted";
}
<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onsubmit" event to a form element.</p>
<p>When you submit the form, a function is triggered which displays some text.</p>
<div id="formdiv">
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Related
Based on the similar question found at
Input Box That Changes Page Title:
<!DOCTYPE html>
<html>
<title>Old title</title>
<body>
<h1 id="h1"></h1>
<input type="text" name="name" id="iText" value="start typeing" />
<form onsubmit="myFunction()">
Enter name: <input id ="iText" type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('iText').onkeyup = myFunction;
function myFunction() {
window.parent.document.title = document.getElementById("iText").value;
document.getElementById("h1").innerHTML = document.title;
}
</script>
</body>
</html>
This is working perfectly with the onkeyup event. However, I don't want the flicking but only change page title once when people click the submit. But my code is not working as expected.
Basically what i wanna do is when user writes something to input and submits it, the page title will be changed to the input.
I have added Google reCaptcha v3 script to my form. The form also includes validation that alerts the user to complete the input field. Now when the user clicks on submit button directly, an alert is shown and when OK is clicked the page refreshes and form data is submitted in the backend. I have tried adding return false and e.preventdefault() in the function but the page still resets after the alert. If I try to add any additional condition to the data-callback function, the submit button stops working.
HTML
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
<script>
function validateForm() {
var fname = document.forms.WebForm.fname.value;
if (fname == "") {
alert("Please fill out all the fields");
return false;
}
}
</script>
</head>
<body>
</style>
<div class="container">
<form action="https://www.samepage.com" method="post" id="demo-form" name="WebForm">
<div>
<div>
<input name="fname" id="fname" type="text" placeholder="First name*" required/>
</div>
</div>
<div>
<div>
<input type = "submit" style = "font-weight: bold;" value="Submit" class="g-recaptcha button" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
data-callback='onSubmit'
data-action='submit'
onClick="return validateForm()"/>
</div>
</div>
</form>
</div>
</body>
</html>
Even the required attribute in the input tag doesn't work with the recaptcha script added. When I remove the data-callback attribute and the supporting script functions, the alert and form works as expected.
My webpage has a simple form with an input box and the submit button, and an empty paragraph:
<form action="" class="form" method="post" id="f">
<input type="text" name="text" id="txt" value="">
<input type="submit" name="submitButton" value="go">
</form>
<p id="p1"></p>
I'm trying to write a script that once the submit button is submitted writes the submitted text into the paragraph:
let f = document.getElementById('f')
f.addEventListener('submit', function () {
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text
})
And it kinda works, meaning that it does shows the text in the paragraph but only for a split second, then it disappears. What am I missing?
You need to preventDefault
let f = document.getElementById('f');
f.addEventListener('submit', function(e) { // access the submit event
e.preventDefault(); // prevent the default behavior of the submit event
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text
});
when I tried to stop people from copying my image i used a Event listener
all you need to do is change contextmenu to p1 and then change #txt to txt
you need to change input type submit to button. this will not reload page.
function callClick(){
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text;
}
</script>
<form action="" class="form" method="post">
<input type="text" name="text" id="txt" value="">
<input type="button" id="f" name="submitButton" value="go" onclick="callClick()">
</form>
<p id="p1"></p>
I am working on a form that uses javascript to create a paragraph. For some reason, when I click my button, it forces my page to reload. Could you anyone let me know what I'm doing wrong here?
console.log('everything is linked')
function createParagraph() {
console.log('function called');
var wordOne=document.getElementById('textOne').value
var wordTwo=document.getElementById('testTwo').value
var paragraph = '<p>My first word is' + wordOne+'. My Second word is '+ wordTwo+'.</p>';
document.getElementById('answer').innerHTML= paragraph
}
<body>
<form action="">
<input id='textOne' type="text">
<input id='textTwo' type="text">
<button onclick="createParagraph()">Click Me</button>
</form>
<div id="answer"></div>
<script src="app.js"></script>
</body>
The default behavior of a <button> inside a <form> is to submit that form. Set the button's type to explicitly not be a "submit":
<button type="button" onclick="createParagraph()">Click Me</button>
Additionally, if you have no use for the actual <form> (don't want to submit it) then it's probably best to just remove it:
<body>
<input id='textOne' type="text">
<input id='textTwo' type="text">
<button type="button" onclick="createParagraph()">Click Me</button>
<div id="answer"></div>
<script src="app.js"></script>
</body>
That way there's nothing to accidentally be submitted in the first place.
Your button acts as a submit button, so your form is being submitted. To prevent this, you can use attribute onSubmit on your form and prevent sending form.
<form onSubmit="return false">
Because the button is in a form and the form is probably submitted.
add the type="button" to not submit the form.
console.log('everything is linked')
function createParagraph() {
console.log('function called');
var wordOne=document.getElementById('textOne').value
var wordTwo=document.getElementById('testTwo').value
var paragraph = '<p>My first word is' + wordOne+'. My Second word is '+ wordTwo+'.</p>';
document.getElementById('answer').innerHTML= paragraph
}
<body>
<form action="">
<input id='textOne' type="text">
<input id='textTwo' type="text">
<button type="button" onclick="createParagraph()">Click Me</button>
</form>
<div id="answer"></div>
<script src="app.js"></script>
</body>
I want to do something when a form is submitted.
var ispostaction = false;
$("#myform").submit(function () {
ispostaction = true;
});
When the form is submitted the .submit(function ()) is not called.
Is there anything wrong that I'm doing? I have the form id as myform.
I would appreciate any help.
Here's my xhtml page. I'm using JSF 2
<form id="myform" class="someclass" enctype="application/x-www-form-urlencoded"
action="pagename.jsf" method="post">
// custom input text field
// selectOneMenu
// a few more input text fields
// submit button is below
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="...." name="javax.faces.ViewState">
</form>
The jquery documentation:
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.
Calling the submit function will not trigger the submit event. You can "fix" this by adding a hidden button which you click from jquery instead. Most, if not all, browsers unfortunately display the same behavior.
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<body>
<form id="myform" enctype="application/x-www-form-urlencoded"
action="posturl" method="post">
// custom input text field
// selectOneMenu
// a few more input text fields
// submit button is below
<input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="...." name="javax.faces.ViewState">
<input type="text" value="a value" />
<input id="submit" type="submit" value="submit" style="display: none;" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#myform").bind('submit', function() {
alert('');
});
$("#submit").click();
});
</script>
</body>
</html>