This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
submit is not a function in javascript
I am trying to submit form using JS, but no luck. Here is the code. JSFIDDLE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function validate () {
alert('start');
$('#myform').submit();
alert('end');
}
</script>
</head>
<body>
<form id="myform" name="myform" method="post" action="">
<input type="button" value="submit" id="submit" onclick="validate();" >
</form>
</body>
</html>
The question is "Why its not working?".
You have an form element with the id submit which conflicts with the form method submit, change the submit button id to something else.
You can access form elements as properties of the form object, so if you have a form say myForm and an input in the form with id or name submit then myForm.submit will be the input element with id submit and not the original submit method.
See http://jsfiddle.net/4kg8c/1/
The error in the console is
Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function
The problem is you hijacked the sumit() function by naming an element submit. Change the button's id to btnSubmit.
I have modify your code with solution use that.
submit button's name is missing. and don't use name as "submit" of submit. it conflicts with JS so.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validate () {
document.myform.submit();
}
</script>
</head>
<body>
<form id="myform" name="myform" method="post" action="">
<input type="button" name="save" value="submit" id="submit" onclick="validate();" >
</form>
</body>
</html>
If this is the exact code you have written, then I think you have ot included jQuery library in the page.
You need to include jQuery file before you can use the $("#myform") notation.
Also specify some action URL where you want to submit the page to ?
You use jQuery code (the $ function) but you do not include the jQuery source.
Related
So I have an HTML document with jQuery Mobile and a form element like so:
<head>
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="lib/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script type="text/javascript" src="lib/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script type="text/javascript" src="lib/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<form onsubmit="myFunction()" id="myForm">
<input type="text">
</form>
<button type="submit" form="myForm">Submit</button>
<script>
function myFunction() {
//does somethign with form values
}
</script>
</body>
When the form is submitted, I want JavaScript to handle to field values (through a function called by onsubmit. I don't want to send it over to another document. That is why I have left out the action attribute. However, when I hit submit, jQuery Mobile gives me the following message: "error loading page" (see the picture). What can I do? I need the form to be submitted because I need the form to validate the fields when the button is clicked. That's why I can't just make a button that onclick calls a function that grabs the values of the fields.
Any help is much appreciated!!
Thanks in advance!
You could try preventing the event generated by submitting the form and returning false from js so that the js function gets called but the form does not get submitted
<form onsubmit="myFunction(event)" id="myForm">
<!-- ^^^^^ -> pass the event -->
<input type="text">
</form>
<button type="submit" form="myForm">Submit</button>
<script>
function myFunction(e) {
//^ get the event so we can prevent
e.preventDefault();
//does somethign with form values
return false;
}
</script>
I'm having problem with the following code,
The submit button is not binding to the jQuery script and the console is not printing anything. I can't figure out what the problem is..
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>
</head>
<body>
<script>
// Variable to hold request
var request;
// Bind to the submit event of our form
$("#show").submit(function(event){
console.log ("Im here");
});
</script>
<!--form action="getVehiclePosition.php" method="GET"-->
<!--Name: <input type="text" name="name"><br>-->
<form id="show">
<input type="submit" value="Send">
</form>
</body>
</html>
You code is not working as at the time the script is interpreted and executed, the form does not exist in the DOM. Wrap your code in document-ready handler.
Specify a function to execute when the DOM is fully loaded.
Use
$(function () {
//Your code
})
OR, You can place the script tag below the form element
It is a silly mistake and the only thing that you have to change is to wrap the whole code in $(document).ready(function(){}); .
The updated code is :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<script>
$(document).ready(function(){
var request;
$("#show").submit(function(event){
console.log ("Im here");
});
});
</script>
<!--form action="getVehiclePosition.php" method="GET"-->
<!--Name: <input type="text" name="name"><br>-->
<form id="show">
<input type="submit" value="Send">
</form>
</body>
May be you can modify id form to "show123" and run again. if it's work => duplicate id show in page.
Glad help for you.
Where should form action be defined when using jQuery Validate plugin?
In the JavaScript?
Or in the form?
Or both?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
//Links to script go here...
<script type="text/javascript">
$(function(){
var validator=$("#myForm").validate({
rules: {},
messages: {},
submitHandler: function(form) {
$.post('some/url/to/post/to.php',$(form).serializeArray(),function (json){
//Or maybe use form.action as url? Gives full URL: http://subdomain.example.com/some/url/to/post/to.php
//Or maybe use $(form).attr('action') as url? Gives partial URL: some/url/to/post/to.php
//bla bla bla
},'json');
}
});
});
</script>
</head>
<body>
<form id="myForm" action="some/url/to/post/to.php" method="post">
<input type="text" name="bla">
<input type="submit" value="sumbit">
</form>
</body>
</html>
Where should form action be defined when using jQuery Validate plugin?
That depends entirely on how you are going to submit the form.
1. Regular form submit, where it's redirected to another page:
Simply use the action attribute within the form tag and you would not need to use a custom submitHandler option. The plugin takes care of everything automatically, and after validation, the form submits normally.
2. Submit via ajax, where it stays on the same page:
Simply define the ajax within a custom submitHandler function and you would not even need to use the action attribute as it will be ignored anyway. The plugin takes care of everything automatically and will fire the custom submitHandler function when the form is valid and the button is clicked. (Note: retrieving the value of the action attribute for the ajax to use would not be a problem.)
<html>
<head>
<script>
function calledHere(value) { console.log(value); }
</script>
</head>
<body>
<form name="test">
<input type="button" value="click!" onclick="calledHere(test);" >
</form>
</body>
</html>
From the above code, in the onclick call passed wrongly the form name without quotes. But, the output displays the whole form DOM element. Don't know how it got the form element.
Any help will be more useful for my learning on javascript side.
Thanks in Advance!!!
You've already got the form element in your 'value' variable. The reason you're seeing the element's html logged is because console.log calls the .toString() method on the element.
This code demonstrates that 'value' references the form element:
<html>
<head>
<script>
function calledHere(value) { value.style.backgroundColor = "red" }
</script>
</head>
<body>
<form name="test">
<input type="button" value="click!" onclick="calledHere(test);" >
</form>
</body>
</html>
http://jsfiddle.net/John_C/KZ3KR/
This answer explains the scope of the variable; why you can pass the form name to the function: https://stackoverflow.com/a/1416157/1588990
Hi Sorry I'm newbie in Javascript but I need to know how I can do to repopulate a form field when I have this kind of form :
I tried with this code(part) but it doesn't work,the file name is 'testjavascript.html'
<head>
<script language="javascript" type="text/javascript">
function updateUsername(){
var first = document.getElementById("first").value;
document.getElementById("first").value = first;
} </script>
</head>
<body>
<form action="action.php" method="post">
<input type="text" name="usename" value="" id="first" >
Link
<input type="submit" name="submit">
</form>
</body>
This behavior needs to be on the server side. When you change page, the browser will reload your javascript code and you will lose all references.