Question: How can you send a form with Javascript if one form input has the name submit?
Background: I am redirecting the user to another page with a hidden HTML form. I cannot change name on the (hidden) inputs, since the other page is on another server and the inputs need to be exactly as they are. My HTML form looks like this:
<form id="redirectForm" method="post" action="http://www.example.com/">
<input name="search" type="hidden" value="search for this" />
<input name="submit" type="hidden" value="search now" />
</form>
I use the following javascript line to send the form automatically today:
document.getElementById('redirectForm').submit();
However, since the name of one input is "submit" (it cannot be something else, or the other server won't handle the request), document.getElementById('redirectForm').submit refers to the input as it overrides the form function submit().
The error message in Firefox is: Error: document.getElementById("requestform").submit is not a function. Similar error message in Safari.
Worth noting: It's often a lot easier to just change the input name to something other than "submit". Please use the solution below only if that's really not possible.
You need to get the submit function from a different form:
document.createElement('form').submit.call(document.getElementById('redirectForm'));
If you have already another <form> tag, you can use it instead of creating another one.
Use submit() method from HTMLFormElement.prototype:
HTMLFormElement.prototype.submit.call(document.getElementById('redirectForm'));
Related
I'm getting the error, "Invalid URL Exception" on submit of a button. I am assuming that this issue is coming from three form tags I have in the web page.
In the body, the first form tag is for "post" of the fields and redirection. The second one, which is inside of the first form tag, is for the search bar as part of company header.
The third one is a form class for the input fields, which is also inside the first form tag.
I tried placing an end form tag in the first line of my code, it closes the form tag which now looks like this:
<form method = "post" action="/sample/sampleweb.nsf/myForm?OpenForm&Seq=1" enctype="multipart/form-data" name=_myForm">
<input type="hidden" name="__Click" value="0">
</form>
Then the search form tag comes in after as also part of body. Upon clicking the submit button, I'm getting such error. When I tried searching by clicking the search, search functionality working as expected.
When I tried removing the form tag and end form tag for the search, and I click on Submit, it's working as expected.
I notice that domino is still creating end form tag at the last part of the page, right before the end of body tag. Could it be because of this?
To give you a better idea, here is the structure of it:
<html>
<body>
<form method = "post" action="/sample/sampleweb.nsf/myForm?OpenForm&Seq=1" enctype="multipart/form-data" name=_myForm">
<input type="hidden" name="__Click" value="0">
</form> //This comes out when I add end form tag in the first line of code.
<form class="searchbox">
<input id="searchtxt" class="searchbox-submit">
<input type="submit" class="searchbox-submit">
</form>
<form class="form-horizontal">
//Rest of the code go here having the input fields.
<button type="submit" onclick="return validatefields(event)">Submit</button>
</form>
</form> //This part is the generated form tag.
</body>
</html>
Any help would be appreciated.
Domino creates the form tags for you because it assumes you are doing data entry if the form is in edit mode. To prevent this use the setting on the form properties second tab (propeller head) for "On Web Access" "HTML". With that you can do anything you want in HTML but as Richard suggested you need to define where to go when the form is submitted.
Once created this way you need to use the ?ReadFrom url parameter rather than the ?OpenForm parameter
I have a form with validation on data (E.g the mobile number must contain 10 numbers and numeric) . once everything submitted i've pressed submit button then those data must send to the data base over the php file (access from from action=file.php)
im not sure if i type this form part correctly or not
please help
<form action="patientdetails.php" method="POST" name='registration' onSubmit="return formValidation()"/>
<input type="image" src="Images/submit.png" alt="Submit" name="submit" value="Submit" />
You can use code like this for form validation :
`<script>` <br>
`function formValidation(){`<br>
`var myform=document.registration;`<br>
`var num=myform.mobilenum.value;`<br>
`if(num<10){`<br>
`alert("invalid number");`<br>
`return false;`<br>
`}`<br>
`else{`<br>
`return true;`<br>
`}`<br>
`}`
`</script>`
`<form action="patientdetails.php" method="POST" name='registration' onSubmit="return formValidation()"/>`<br>
`<input type="number" name="mobilenum" />`<br>
`<input type="submit" name="submit" value="Submit" />`
Nothing in your form code will cause a problem with validating your input.
Not having any <input> elements does make it impossible for anyone to type the mobile number though.
There are some things which are wrong, out of date, or low quality…
There is no name attribute for form elements
Intrinsic event attributes like onsubmit are better replaced by JavaScript that uses addEventListener
Image type inputs are designed to provide server side image maps, if you just want a graphic to be your submit button you should probably have <button><img></button> instead
… but none would cause the problem you are describing.
I am trying to implement Net Promoter Score survey through email body. As email clients don't allow Javascript. I want to submit the radio button value to a url that is defined in Form Action attribute.
But my question is how to know which radio button is checked, and how to submit it to a remote url ? and in which form will it be submitted ? i.e name value pair or how ?
Note: I know how Jquery and Ajax. I want to achieve same things without using Ajax or Jquery or Javascript
A standard HTML form submission should handle this fine
Make sure your radio buttons all have the same name attribute, and give them all a different value attribute
Include an input with type="submit" and the resulting form submission should have NameOfAllRadioButtons = ValueOfSelectedRadioButton
I don't think I've ever been sent an email with form inputs in the body, which probably means there are a lot of clients that don't support them at all. You might be better off sending a link to take the survey in an actual web page.
According to this article: https://www.sitepoint.com/forms-in-email/ you should be able to use a standard html form in an email. Outlook will display the form messed up though.
To get radio value, just do this:
<form action="/yoururl.php" method="get">
<input type="radio" name="question" value="answer1" checked> answer1<br>
<input type="radio" name="question" value="answer2"> answer2<br>
<input type="submit">
</form>
In your backend code, you will be able to do $_GET["question"] to get either answer1 or answer2.
On submit user will be redirected to another page and most client will probably ask for confirmation before redirecting.
This problem is keeping me busy all week and I find little to nothing on the net ...
What I want to do is simple ... on my own website, create a server side PHP script that makes a login to another website with valid credentials and downloads a file that I want to process.
I use curl_init(), curl_setopt() and curl_exec() in trying to achieve that. It doesn't work.
So I stripped down that webpage to figure out what's wrong.
As you can see in the html code, the form's action event is the url to retrieve the file, when correct credentials are submitted.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<form name="form1" method="post" action="http://otherwebsite/login.aspx?ReturnUrl=/export_file.aspx?id=xxxxxxx" >
<script type="text/javascript" language="JavaScript">
function Submit_Form()
{
document.form1.Login$UserName.value="myname";
document.form1.Login$Password.value="mypassword";
//document.form1.Login$LoginButton.click();
document.form1.submit();
}
</script>
<input type="hidden" name="Login$UserName" value="myname" />
<input type="hidden" name="Login$Password" value="mypassword" />
<input name="Login$LoginButton" type="submit" />
<br />Login
</form>
</body>
</html>
Now here is where it gets weird.
If I press the button, it works and I receive the download file.
If I click the hyperlink, i get a page saying to login properly.
When I uncomment the javascript line : click() it works too.
So it comes down to this :
Why does the button submit work and javascript submit doesn't work ?
Is there a way that the other website's server check how the form was posted ?
Thank you for your thoughts !
When you click the button, its name is included in the POST request because it's a named submit button. When you use the link, the button's name doesn't get passed in the POST data.
You could probably spoof the button when you use the link by having a hidden field with the name the button should have:
<input type="hidden" name="Login$UserName" value="myname" />
<input type="hidden" name="Login$Password" value="mypassword" />
<input type="hidden" name="Login$LoginButton" />
Note it doesn't need a value because the button it replaces doesn't have a value setting its text. Just including it should be sufficient.
Why not have another hidden field called js_submitted with a value of false, and in your Submit_Form() function, set it to true before firing the submit() method? Then, in PHP (for example), you could look for $_GET/$_POST['js_submitted'] to determine which submission method was used.
It's possible to check that the button was posted with the submit. Maybe they are checking for this.
Yes, it is very easy to find out when a button submits a form, and that is exactly what the site might be doing.
A button is a form control and so, when a form is submitted, the button state is submitted as well. What this means is, when you check the form object on the server that receives the post, you will see it contains a key with the same name as the button and it's value is set to the value attribute of your button.
Consider you have a form:
<form id="form1" action="abc.asp" method="post">
<input type="submit" name="btn" value="Opt123" />
<input type="submit" name="btn" value="Opt456" />
Send
</form>
I am not a PHP person, so code might not be the best:
$item = $_POST['btn'];
In this case, value of $item will be either Opt123 or Opt456 depending on the button pressed, whereas if the link is pressed, then it would be a null or PHP equivalent.
Even though the submit button is part of the form, the browser only sends its name=value pair as part of the post data if the button was actually clicked. When you call the .submit() method from Javascript, your browser sends the data Login$Username=myname&Login$Password=mypassword to the server. But when you actually click the button, it sends Login$Username=myname&Login$Password=mypassword&Login$LoginButton=. As you can see, it would then be very easy for the server to differentiate between the two.
So, you can trick the form into always sending that element by making it hidden. In Submit_Form, just before you say document.form1.submit();, add this:
var sbtn_hid = document.createElement('input');
sbtn_hid.type = 'hidden';
sbtn_hid.name = 'Login$LoginButton';
sbtn_hid.value = '';
document.form1.appendChild(sbtn_hid);
That adds a hidden form element with the same name as the submit button, so the server won't be able to tell the difference.
I have the worlds most simple javascript function:
fnSubmit()
{
window.print();
document.formname.submit();
}
Which is called by:
<button type="button" id="submit" onclick="fnSubmit()">Submit</button>
All is well and good, the print dialog shows up, however after printing or canceling the print I get the following error:
"document.formname.submit is not a function"
My form is defined as follows: (obviously I am not using formname in the actual code but you get the idea)
<form name="formname" id="formname" method="post" action="<?=$_SERVER['SCRIPT_NAME']?>">
Obviously I am not trying to do anything special here and I have used similar approaches in the past, what in the world am I missing here?
In short: change the id of your submit button to something different than "submit". Also, don't set the name to this value either.
Now, some deeper insight. The general case is that document.formname.submit is a method that, when called, will submit the form. However, in your example, document.formname.submit is not a method anymore, but the DOM node representing the button.
This happens because elements of a form are available as attributes of its DOM node, via their name and id attributes. This wording is a bit confusing, so here comes an example:
<form name="example" id="example" action="/">
<input type="text" name="exampleField" />
<button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>
On this example, document.forms.example.exampleField is a DOM node representing the field with name "exampleField". You can use JS to access its properties such as its value: document.forms.example.exampleField.value.
However, on this example there is an element of the form called "submit", and this is the submit button, which can be accessed with document.forms.example.submit. This overwrites the previous value, which was the function that allows you to submit the form.
EDIT:
If renaming the field isn't good for you, there is another solution. Shortly before writing this, I left the question on the site and got a response in the form of a neat JavaScript hack:
function hack() {
var form = document.createElement("form");
var myForm = document.example;
form.submit.apply(myForm);
}
See How to reliably submit an HTML form with JavaScript? for complete details
Given that your form has both an id and a name defined, you could use either one of these:
With the form tag's id:
document.getElementById('formname').submit();
With the form tag's name attribute:
document.forms['formname'].submit();
Try this:
fnSubmit()
{
window.print();
document.getElementById("formname").submit();
}
The most likely culprit is IE confusing JavaScript variables, ids, and names. Search in your source for something sharing the name of your form.
Place a input button inside your form.
Give tabindex="-1" on it.
Make It invisible using style="display:none;".
Like This
<input type="submit" tabindex="-1" style="display:none;" />