I am submitting form via javascript by using 'document.FormName.submit()' . But this is giving me error of 'submit is not a function'. I m using IE8
<script typr="text/javascript">
function submitForm()
{
document.theForm.submit()
}
</script>
<body>
<form name="theForm" method="post">
<input type="text" name= "name">
<input type="button" name="submit" value="submit" onclick="submitForm()">
</form>
</body>
Please help me ?
problem is with your button name
i have use this its work fine
<script type='text/javascript'>
function submitForm()
{
document.theForm.submit();
}
</script>
<form name="theForm" method="post" action="default.php">
<input type="text" name="t" id="t"/><br/>
<input type="button" name="t1" value="submit" onClick="submitForm();">
</form>
use
document.forms[index].submit()
instead
Try this:
document.getElementsByName("theForm")[0].submit();
And you need to put the script after you declared the elements so :
<form name="theForm" onSubmit= "submitForm()">
<input type="text" name= "name">
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
function submitForm()
{
document.getElementsByName("theForm")[0].submit();
}
</script>
Or you can use events like document onload if you want to kepp your scripts in the page head.
If your form name is FormName
try this
Action
by the way your code is missing a semicolon at the end of the statement
and a spelling mistake here
<script typr="text/javascript">
typr
Here is the problem
change it typr is nothing should be type
<script typr="text/javascript">
to
<script language="javascript">
OR
<script type="text/javascript">
I just copy your code and executed in IE8 and it worked fine, so how is not working on your IE8. May be it is because of your hierarchy. So you please give id to form and try document.getElementById to access your form and then submit method. Do some thing like this"
<script type='text/javascript'>
function submitForm()
{
document.getElementById('your_form').submit();
}
</script>
<form name="theForm" id="your_form" method="post" action="default.php">
<input type="text" name="t" id="t"/>
<input type="button" name="t1" value="submit" onClick="submitForm();">
</form>
document.getElementById("theForm").submit();
It works perfect in my case.
you can use it in function also like,
function submitForm()
{
document.getElementById("theForm").submit();
}
Set "theForm" as your form ID. It's done.
Related
Hi I need send actual time via html, like: /time_12:12_1.1.2018 on action on button or automatic. I have codes but I don´t know how to connect it.
TIME:
<script>
document.getElementById("demo").innerHTML = Date();
</script>
Sending data:
<form action="/">PWM:
<input name="PWM" value="50" type="text"><input value="Submit" type="submit"></form>
Any ideas?
you want to submit the date as form data, or as part of the uri?
As form data
<form action='/' method='POST'>
<input type='hidden' id='time' value='' />
<input type='submit' value='Submit' />
</form>
<script type='text/javascript'>
document.getElementById('time').value = Date();
</script>
As URI
<form id='timeForm' action='' method='POST'>
<input type='submit' value='Submit' />
</form>
<script type='text/javascript'>
document.getElementById('timeForm').action = '/'+Date();
</script>
I have the next HTML code:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
</body></html>
Which create a file input and submit button, which sends a POST method (/upload).
I want to create a new button (submitBig), which would send another POST method (/uploadBig).
How can I do it?
A simple workaround, Create 2 Forms:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
<form method='post' action='/uploadBig' enctype='multipart/form-data'>
<input type='file' name='uploadFileBig'/>
<input type='submit' /></form>
</body></html>
Else you should indeed refer to Javascript.
Use JavaScript to run a different function for each button. Set the .action and do the .submit from there.
You will need to use Javascript. Essentially this will edit the Action of the form and post it on click:
$('#big-submit').click(function(e) {
e.preventDefault();
$(this).closest('form').attr('action', '/uploadBig').submit();
});
An even better solution would be to just have the one button, and then get the file size on click and post to the relevant action.
You can use jQuery or simple Javascript:
<!DOCTYPE>
<html>
<body>
<form method="post" id="theForm" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile" />
<input type="submit" value="normal Submit (/upload)" />
<input type="button" id="bigButton" value="big Submit (/uploadBig)" />
</form>
<script type="text/javascript">
var theForm = document.getElementById('theForm');
/* When the button is clicked */
document.getElementById('bigButton').onclick = function() {
/* Change the location */
theForm.action = '/uploadBig';
/* Submit the form */
theForm.submit();
};
</script>
</body>
</html>
You can use the HTML5 formaction attribute to do that (but you have to check it's compatibility with your requirements to use it : it only works on recent browsers).
<!DOCTYPE html>
<html>
<body>
<form method="post" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile"/>
<input type="submit" value="Submit" />
<input type="submit" value="Submit big" formaction="/uploadBig" />
</form>
</body>
</html>
Here One way to get around this is to handle each button's OnClick event and set the "action" for the form dynamically:
<!-- create the form -->
<form name="Form1" method="post">
<!-- Add the data entry bits -->
Your Name <input type="text" name="text1" size="10" /><br />
<!-- Add some buttons -->
<INPUT type="button" value="Button1" name=button1 onclick="return OnButton1();">
<INPUT type="button" value="Button2" name=button2 onclick="return OnButton2();">
<!-- close the form -->
</form>
Our button click handlers for Button1 and Button2 would look like the following:
<script language="Javascript">
<!--
function OnButton1()
{
document.Form1.action = "Page1.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.Form1.action = "Page2.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
-->
</script>
<noscript>You need Javascript enabled for this to work</noscript>
Where Page1.aspx should be called when Button1 is pressed, and Page2.aspx called when Button2 is pressed.
This is my form code:
<form enctype="multipart/form-data" name="upload-file" method="post" action="http://example.com/upload">
<div class="formi">
<input id="text-link-input" type="text" name="url" class="link_form" value="your link" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" />
<input type="submit" value="OK" class="link_but" />
</div>
<div class="upl" title="Upload"><img src="http://example.com/example.png" alt="" style="vertical-align:middle;"/>Upload
<input type="file" name="file" size="1" class="up" onchange = "document.getElementById('text-link-input').value = String(this.value).replace('C:\\fakepath\\','')"/>
</div>
</form>
Now, I want to redirect the submitter to any page of my choice after the form data has been submitted, but the action resides on another website where I cannot edit. Is it possible to redirect the user to any page after he has submitted the data to that site?
From some Googling, this is what I have found. Adding this to form code:
onSubmit=window.location='http://google.com'
This didnt work. Maybe I didnt implement it correctly? This is what I did:
<form enctype="multipart/form-data" name="upload-file" method="post" onSubmit=window.location='http://google.com' action="http://example.com/upload">
Another person says adding a hidden field should work:
<input type="hidden" name="redirect" value="http://your.host/to/file.html">
How should I implement this is my code?
Suggestions and help awaited...
Try this Javascript (jquery) code. Its an ajax request to an external URL. Use the callback function to fire any code:
<script type="text/javascript">
$(function() {
$('form').submit(function(){
$.post('http://example.com/upload', function() {
window.location = 'http://google.com';
});
return false;
});
});
</script>
I have a form which has an iframe as target. It works well when using the classic "submit" button, but when I use Jquery to submit the form, it opens a new window and does not target in the iframe. Any suggestion on why this happens?
Here is my code:
function formSubmit() {
$('#formId').submit();
}
<form name="formId" id="formId" action="ajax/submitForm.php" method="post" target="iframe_submit" tmt:validate="true">
[...]
<input type="button" id="submit_button" value="GO" onclick="javascript:formSubmit();" />
</form>
<iframe style="border:none;width:0px;height:0px" id="iframe_submit" name="iframe_submit"></iframe>
try with
$('#formId').get(0).submit();
Problem not in iframe but in onclick="javascript:formSubmit();". For start you don't need to write javascript: in on..="" attributes. But better to use jQuery events:
<form name="formId" id="formId" action="ajax/submitForm.php" method="post" target="iframe_submit">
<input type="text" name="x" />
<input type="button" id="submit_button" value="GO" />
</form>
and:
function ftformSubmit() {
$('#formId').submit();
}
$(function(){
$('#submit_button').click(function(){
$('#formId').submit();
});
});
See fiddle
I have the following form in a website of mine.
<form action="" method="GET">
<input type="text" name="query" value="" />
<input type="button" name="talk" value="talk" onClick="askCow(this.form)" />
</form>
Clicking the button does fire an AJAX request that updates the page. Using return does not, however; it simply submits the form using GET, which is not the desired behavior. Using onsumit="return false;" or similar disables submission, but this is not the desired behavior.
How can I execute the askCow function on an enter press ("form submission") while making sure the form is NOT submitted? Am I a bad person for doing this? The reason I use AJAX is that it lets me omit templating logic on the server side entirely.
Thanks!
Edit: here is the complete page
<html>
<head><title>Psycowlogist</title></head>
<body>
<div id="history">
Previous discussion
</div>
<div id="cow">
<pre>
_______________________
< What is your problem? >
-----------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
</div>
<div id="talk">
<form id="talkForm" action="" method="GET" onsubmit="askCow(this)">
<input type="text" name="query" value="" />
<input type="button" name="talk" value="talk" onClick="askCow(this.form)" />
</form>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script>
<script type="text/coffeescript">
$j = jQuery
window.askCow = (form) ->
$j.get "/cowanswer",
{q: form.query.value},
(data) -> $j("#cow pre").html(data["cow-answer"])
return false
</script>
</html>
Just use onsubmit event of form
<form action="" method="GET" onsubmit="return askCow(this);">
<input type="text" name="query" value="" />
<input type="button" name="talk" value="talk"/>
</form>
askCow function should look something like this
function askCow()
{
//do ajax stuff
return false;
}
You can use jQuery Form Plugin .
And within the call, you can call askCow() .
var options = {
target: '#output', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
};
$('#theForm').submit(function() {
askCow(this);
$(this).ajaxSubmit(options);
return false;
});