Sorry for the vague title, but I don't know how to describe the problem more precisely in a short sentence.
My problem is the following:
When I manipulate form values within an onsubmit callback function like in the following example, the browser sometimes show the changed input/textarea values to the user while submitting the form and before being forwarded to a result page.
<html>
<head>
<script type="text/javascript">
function manipulateForm() {
document.forms["myForm"]["myField"].value = "new value";
return true;
}
</script>
</head>
<body>
<form name="myForm" action="submit.htm" onsubmit="manipulateForm()">
<input type="text" name="myField">
<input type="submit" value="Submit">
</form>
</body>
</html>
Is there any way to circumvent this? What I want is to send manipulated form values but without users actually seeing that form data has been changed.
Sorry for the vague title, but I don't know how to describe the problem more precisely in a short sentence.
My problem is the following:
When I manipulate form values within an onsubmit callback function like in the following example, the browser sometimes show the changed input/textarea values to the user while submitting the form and before being forwarded to a result page.
<html>
<head>
<script type="text/javascript">
function manipulateForm() {
document.forms["myForm"]["myField"].value = "new value";
return true;
}
</script>
</head>
<body>
<form name="myForm" action="submit.htm" onsubmit="manipulateForm()">
<input type="text" name="myField">
<input type="submit" value="Submit">
</form>
</body>
</html>
Is there any way to circumvent this? What I want is to send manipulated form values but without users actually seeing that form data has been changed.
Share Improve this question edited Mar 19, 2020 at 21:34 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Oct 13, 2013 at 13:28 user1159435user1159435 1252 silver badges7 bronze badges 3-
1
Are you sure that this code is working? You called your form
myForm1, but your code references it withmyForm. – ComFreek Commented Oct 13, 2013 at 13:29 - use hidden fields for extra parameters – lordkain Commented Oct 13, 2013 at 13:30
- @lordkain Unfortunately that's not an option in my current case. – user1159435 Commented Oct 13, 2013 at 13:34
2 Answers
Reset to default 4how about creating two forms one fake and the other real... the user enters data in the fake form.. which when submitted calls the function manipulateForm... the default submit action of the fake form is prevented.. and the data from the fake from is extracted.. manipulated.. and set in the real form.. then the real's form submit is triggered...
something like that.. here's an example..
<div>
<form onsubmit="return manipulateForm()">
<input type="text" id="myFieldFake">
<input type="submit" value="Submit">
</form>
<form id="myForm" action="javascript:alert('Replace with your form action')" style="display:none" >
<input hidden="true" type="text" id="myFieldReal">
<input hidden="true" type="submit" value="Submit">
</form>
</div>
and for the manipulate function...
function manipulateForm() {
var myFieldValue = document.getElementById("myFieldFake").value;
// do something with myFieldValue...
document.getElementById("myFieldReal").value = myFieldValue ;
document.getElementById("myForm").submit() ;
return false ;
}
jsFiddle
There is no reason to make a second form, the onsubmit function can alter the data before it is submitted.
in the example below, the data will be altered before it is sent on.
<html>
<form id=myform target=apage.html onsubmit=alter()>
<input type=text id=name name=name>
<input type=age id=age name=age>
<input type=submit>
</html>
<script>
function alter(){
age.value=Number(age.value)+10;
name.value="My your Is "+name.value;
}
</script>