I have form which need to be submited to another domain, like this:
<form id="myform" action="https://example.com" target="myiframe" method="POST">
<input type="text" name="email" value="">
<input type="text" name="name" value="">
<input type="text" name="phone" value="">
<input type="submit" name="submit" value="Submit">
</form>
And iframe:
<iframe style="display:none;" name="myiframe" src=""></iframe>
This work fine, but after submit form it stays filled.
So, how to clear (reset) form after submit?
Use an event-listener to trigger the submit and the clearing.
First, change the submit button to a regular button with a proper id (you should do the same to the other elements):
<input type="button" name="submitButton" id="submitButton" value="Submit" />
Then bind the event-listener to the button with JavaScript:
<script type="text/javascript">
document.getElementById('submitButton').addEventListener('click', function ()
{
handleTheForm;
}, false);
</script>
Wherea handleTheform is a method, defined accordingly:
<script type="text/javascript">
function handleTheForm()
{
document.forms[0].submit(); // Submit the form.
document.forms[0].reset(); // Clear the form.
}
</script>
Edit To handle the Enter button, simply add an event-listener for buttons and check which key is being pressed:
<script type="text/javascript">
document.addEventListener('keypress', function (e)
{
var key = e.which || e.keyCode;
var enterKey = 13;
if (key == enterKey)
{
handleTheForm;
}
});
</script>
Your final picture should look something like this:
<form id="myform" action="https://example.com" target="myiframe" method="POST">
<input type="text" name="email" id="email" value="" />
<input type="text" name="name" id="name" value="" />
<input type="text" name="phone" id="phone" value="" />
<input type="button" name="submitButton" id="submitButton" value="Submit" />
</form>
<script type="text/javascript">
function handleTheForm()
{
document.forms[0].submit(); // Submit the form.
document.forms[0].reset(); // Clear the form.
}
document.getElementById('submitButton').addEventListener('click', function ()
{
handleTheForm;
}, false);
document.addEventListener('keypress', function (e)
{
var key = e.which || e.keyCode;
var enterKey = 13;
if (key == enterKey)
{
handleTheForm;
}
});
</script>
You might have to tweek something a little but since I haven't manage to test this.
This solution is applicable to your problem
// code from answer with bind() transfered to plain javascript
function SubmitWithCallback(form, frame, successFunction) {
var callback = function () {
if(successFunction)
successFunction();
frame.removeEventListener('load', callback, false);
};
frame.addEventListener('load', callback, false);
form.submit();
}
You can easily achieve this using jQuery by
$("#formId").reset();
Hope this helps...
Related
I have a form with 2 buttons (type="submit"). Each of them has different value.
$(document).ready(function() {
$('#myform').submit(function() {
var _att = $(this).attr("value");
if (_att == "insert") {
//do insert here ....
}
if (_att == "update") {
//do update here ....
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input type="email" name="email" placeholder="Enter email" /><br>
<button type="submit" value="insert">Insert Button</button>
<button type="submit" value="update">Update Button</button>
</form>
My question is, how to get value from clicked button in the submitted form?
I tried by trying to get attr("value") but the return value is undefined.
You should handle the click event on [type="submit"] to get their attr("value"), i.e.
$(document).ready(function() {
$('[type="submit"]').on('click', function(event) {
event.preventDefault();
let value = $(this).attr("value");
console.log(value);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input type="email" name="email" placeholder="Enter email" /><br>
<button type="submit" value="insert">Insert Button</button>
<button type="submit" value="update">Update Button</button>
</form>
N.B. Remember to prevent their default behavior (with event.preventDefault).
You can achieve this easily by using a unique class .submit-button on your button
I have also added preventDefault function which will ensure that your page is not refreshing on form submit button clicked and check for all the validations - if any accordingly.
Run snippet to see it working below.
Working Demo: https://jsfiddle.net/xo3pkqf9/
$(document).ready(function() {
$("#myform button").click(function() {
//Check which button was clicked
if ($(this).attr("value") == "insert") {
//Form Submits
alert("Insert Clicked - Form will submit")
$("#myform").submit();
}
if ($(this).attr("value") == "update") {
alert("Update Clicked - Form will submit")
//Form Submits
$("#myform").submit();
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input type="email" name="email" placeholder="Enter email" required/><br>
<button type="submit" value="insert">Insert Button</button>
<button type="submit" value="update">Update Button</button>
</form>
How can I prompt for confirmation before submitting a form after they press the Insert key, and submit the form without confirmation when the user pushes the Enter/Return key ?
Summary of actions intended
INSERT : Prompt for confirmation. Submit form if confirmed.
ENTER : Submit form.
I have the following html form :
<form action="hhhhhhh.php" method="post" >
<input type="text" name="DatInvNew"/>
<input type="text" name="SumInvNew"/>
<input type="text" name="KolInvNew"/>
<input type="submit" value="next"/>
</form>
Here is the answer..
Try it once, Just copy and past it..
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#inputform').on('keydown', 'input', function (event) {
switch(event.which) {
case 13: // enter
event.preventDefault();
var $this = $(event.target);
var index = parseFloat($this.attr('data-index'));
$('[data-index="' + (index + 1).toString() + '"]').focus();
break;
case 45: // insert
$('#click-to-submit').trigger('click');
break;
}
});
});
</script>
<form id='inputform' action="hhhhhhh.php" method="post">
<input type="text" name="DatInvNew" data-index="1" />
<input type="text" name="SumInvNew" data-index="2" />
<input type="text" name="KolInvNew" data-index="3" />
<input type="submit" value="next" class="click-to-submit" id="click-to-submit" />
</form>
The following example does these things (as per the original question) :
INSERT : Prompt for confirmation. Submit form if confirmed.
ENTER : Submit form.
document.onkeypress = function (e) {
e = e || window.event;
if(e.keyCode == 45) {
if(confirm("Would you like to submit this form?")) {
document.getElementById("myForm").submit();
}
} else if (e.keyCode == 13) {
document.getElementById("myForm").submit();
}
};
And change your html slightly :
<form action="hhhhhhh.php" method="post" id="myForm">
<input type="text" name="DatInvNew"/>
<input type="text" name="SumInvNew"/>
<input type="text" name="KolInvNew"/>
<input type="submit" value="next"/>
</form>
Here is my code :
<script type="text/javascript">
function submitform() {
if(document.getElementById('name').value=='') {
alert('Please enter a name');
return false;
}
}
</script>
<form action="mail.php" method="post" onsubmit="submitform();">
<input type="text" id="name" name="name" placeholder="name">
<input type="submit" value="submit">
</form>
as expected, the form when submitted should call the submitform function, and if the name field is blank, it should return false and give an alert.
But, it just goes through.
Any explainations?
You need to call the function with return, so that the false value prevents default action (form submission)
<form action="mail.php" method="post" onsubmit="return submitform();">
<input type="text" id="name" name="name" placeholder="name">
<input type="submit" value="submit">
</form>
You need to stop a little.
You can use onSubmit, but it's best to delete your input submit and put a button.
Then on button click you can do what you want and eventually submit the form
Form:
<form action="mail.php" method="post" id="mailForm">
<input type="text" id="name" name="name" placeholder="name">
<button id="submitMailForm">Submit</button>
JS:
$( document ).on( "click", "#submitMailForm", function(e) {
//My control Here
//If all ok
$("#mailForm").submit();
});
You can use jquery instead of javascript for this kind of validation is will be very easy to implement.
<form action="mail.php" method="post">
<input type="text" id="name" name="name" placeholder="name">
<input type="submit" value="submit" id="submit">
</form>
<script>
$(document).ready(function(){
$("#submit").click(fucntion(e){
if($("#name").val() == ""){
alert("Name is empty");
e.preventDefault();
}
});
});
</script>
And dont forget to add jquery library before the script tag.
You need to change your onSubmit attribute as follows
onsubmit="return submitform();"
So your html look like this
<form action="mail.php" method="post" onsubmit="return submitform();">
<input type="text" id="name" name="name" placeholder="name">
<input type="submit" value="submit">
</form>
To cancel submission, the listener needs to return true or false. Also, if the function validates the fields, far better to name it for what it does rather than when it does it so call it something like "validateForm".
Also, giving a control a name of "name" masks the form's own name property. While that doesn't matter here, in general it's not a good idea to give any form control a name that is the same as a standard property of a form (e.g. "submit" or "reset").
So you might end up with something like:
<script>
function validateForm(form) {
if (form.personName.value == '') {
alert('Please enter a name');
return false;
}
}
</script>
<form ... onsubmit="return validateForm(this);">
<input type="text" name="personName">
<input type="submit">
</form>
<script type="text/javascript">
function submitform(event) {
if(document.getElementById('name').value=='') {
alert('Please enter a name');
event.preventDefault();
return false;
}
}
</script>
<form action="mail.php" method="post" onsubmit="submitform(event);">
<input type="text" id="name" name="name" placeholder="name">
<input type="submit" value="submit">
</form>
You need to prevent default of submit. In JS return false does not stop the propagation of the "submit" function (with frameworks can be different).
I suggest you to read:
event.preventDefault() vs. return falseenter link description here
just try this script
function submitform() {
var x = document.forms["fname"].value;
x = x.trim(); // Remove white spaces
if (x==null || x=="") {
alert("First name must be filled out");
return false;
}
}
In script below
<html>
<body>
<form>
First Name: <input type="text" id="myText" maxlength="30" >
</form>
<button onclick="procesText()">get name</button>
<script>
function procesText()
{
var y = document.getElementById("myText");
alert(y.value);
y.value="";
}
</script>
</body>
</html>
i want to call function procesText Not by clicking get name button, but by clicking enter when i fill input with text. How to achieve that?
HTML:
<form id="myform">
First Name: <input type="text" id="myText" maxlength="30" >
</form>
JS: (If you want to send the form to te server) (Demo)
document.getElementById('myform').onsubmit = procesText;
JS: (If you don't want to send the form to te server) (Demo)
document.getElementById('myform').onsubmit = function(e) {
procesText();
e && e.preventDefault && e.preventDefault();
return false;
}
Just remove the button, call the function onsubmit, and prevent it from submitting:
<form onsubmit="return procesText()">
First Name: <input type="text" id="myText" maxlength="30" />
</form>
<script>
function procesText() {
var y = document.getElementById("myText");
alert(y.value);
y.value = "";
return false;
}
</script>
Fiddle: Fiddle
My Form looks like this:
<body>
<form id="myForm" method="post">
<label>id:</label>
<input type="text" name="id" id="id" size="50"/>
<div id="hidden" style="display: none;">
<label>Name:</label>
<input type="text" name="name" size="50"/><br/>
<input type="button" id="button2" value="Update" size="25" /> <br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = ''; this.style.display = 'none'" size="25"/>
I have JS that looks like this
$(document).ready(function(){
$("#button1").click(function(){
$.post(
'xxx.php',
{ id: $('input[name="id"]', '#myForm').val() },
function(json) {
if (json.abc === 'no'){
alert('does not exist');
}
else{
$("input[name='name']").val(json.name);
}},
"json"
);
});
$("#button2").click(function(){
$('form#myForm').attr({action: "xxx1.php"});
$('form#myForm').submit();
});
});
The problem is that the user can only submit this form by clicking on the submit button. Any ideas on how i can adjust the js so that the enter button(on keyboard) also submits the form?
Note: there are two submit buttons both are interlinked.
You could give your input element an id, for easier retrieval:
<input id="txtName" type="text" name="name" size="50"/><br/>
Then you may bind your function to the keypress event:
$('#txtName').keypress(function (e) {
if (e.which == 13) {
$("#button1").click()
}
});
Or, for a general case, you may want to just bind the function to every text box of the form:
$('#myForm input:text').keypress(function (e) {
if (e.which == 13) {
$("#button1").click()
}
});
This code works for me.
$('#yourform').bind('submit', function() {