I am trying to learn some JQuery. I am using an external js to write my code in. It works fine when I call the 2 paragraph functions, but when I call the submit button it just load the page again.
My code looks like this:
<html>
<body>
<p id="paragraf">This is an internal paragraf</p>
Another Example:
<p id="paragraftest">This is the external js script</p>
<form>
<input type="text" name="Submit_test">
<button id="buttontest">Submit</button>
</form>
<script type="text/javascript" src="jqueryScript/jquery.js"></script>
<script type="text/javascript" src="jqueryScript/hide.js"></script>
</body>
</html>
Javascript:
$('#paragraf').click(function() {
$('#paragraf').hide();
});
$('#paragraftest').click(function() {
$('#paragraftest').hide();
});
$('buttontest').submit(function() {
alert("test");
});
/* I have tried with "" and '' in buttontest and test, but still the same */
I have also tried with this, but it is still the same.
<form>
<input type="text" name="buttontest">
<input type="submit" value="">
</form>
Can anybody see why nothing happens?
Best Regards
Mads
Missing id selector - buttontest is the id of the button so you need to use id-selector to select it(prefix with #)
$('#buttontest').submit(function() {
alert("test");
});
Correct this syntax:
$('input[name=buttontest]').submit(function() {
alert("test");
});
Using a unique ID for the button:
$('input#button_id').submit(function() {
alert("test");
});
You should select the button with the following way:
$('#buttontest')
You hadn't used the #, which is required when we are selecting elements form the DOM using their ids. For sure it was a writing error, since you use this correctly on your other selections.
Submit event is a form event, and you are trying to bind it to a button.
$('form').submit(function() {
alert("test");
});
In generally if you want to submit a form you should use dedicated onsubmit form event, not click event on any button.
It works with this code now:
<form id="form">
<input type="text" name="buttontest">
<input type="submit" value="submit">
</form>
<form id="form_1">
<input type="text" name="buttontest">
<input type="submit" value="submit">
</form>
Javascript:
$('#form').submit(function() {
alert("test");
});
$('#form_1').submit(function() {
alert("test");
});
Related
I want to fade in an element with JQuery code when a inputfield is clicked. However, I cannot seem to get it to work, when the selector is placed inside the form. If I remove the selector outside the form it works fine. Is there any work-aroud for this? Or, maybe JQuery code does not execute inside a form? Here is my code:
<form action="newBet.jsp" method="get">
<fieldset>
<input id="test" type="submit" name="update" value="✎"/>
<input class="form-control" id="div1" style="display:none;" type="number"/>
</fieldset>
</form>
$(document).ready(function(){
$("#test").click(function(){
$("#div1").fadeIn();
});
});
If I place the selector #test outside the form it works fine, but I want to execute the JQuery inside the form.
Your form gets submitted, which refreshes the page and doesn't let you see the result.
Instead of applying your event to the submit button, apply it to the form itself and return false to prevent default behavior (submitting):
<form id="test-form" action="newBet.jsp" method="get">
$(document).ready(function(){
$("#test-form").submit(function(){
$("#div1").fadeIn();
return false;
});
});
<input id="test" type="button" name="update" value="✎" />
type="submit" refreshes the page. You neet to change type="button"
You can get the fadein effect with the input inside the form if you add preventDefault() like this:
$(document).ready(function(){
$("#test").click(function(e){
e.preventDefault();
$("#div1").fadeIn();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="newBet.jsp" method="get">
<fieldset>
<input id="test" type="submit" name="update" value="✎" />
<input class="form-control" id="div1" style="display:none;" type="number" />
</fieldset>
</form>
The default behaviour of the input of type "submit" inside the form is to submit the form which you can prevent using preventDefault() and call at a later time after the fadein effect.
Can anyone tell me what is going wrong with this code? I tried to submit a form with JavaScript, but an error ".submit is not a function" shown. See below for more details of the code:
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
I also tried this:
<script type="text/javascript">
function submitAction()
{
document.forms["frmProduct"].submit();
}
</script>
Both show me the same error :(
submit is not a function
means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work.
When you name the button submit, you override the submit() function on the form.
Make sure that there is no another form with the same name and make sure that there is no name="submit" or id="submit" in the form.
If you have no opportunity to change name="submit" you can also submit form this way:
function submitForm(form) {
const submitFormFunction = Object.getPrototypeOf(form).submit;
submitFormFunction.call(form);
}
<form action="product.php" method="post" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
document.getElementById("submit_value").onclick = submitAction;
function submitAction()
{
document.getElementById("frmProduct").submit();
return false;
}
</script>
EDIT: I accidentally swapped the id's around
I had the same issue when i was creating a MVC application using with master pages.
Tried looking for element with 'submit' as names as mentioned above but it wasn't the case.
For my case it created multiple tags on my page so there were some issues referencing the correct form.
To work around this i'll let the button handle which form object to use:
onclick="return SubmitForm(this.form)"
and with the js:
function SubmitForm(frm) {
frm.submit();
}
form.submit() will not work if the form does not have a <button type="submit">submit</button>. form element belongs to HTMLFormElement interface, therefore, we can call from prototype directly, this method will always work for any form element.
HTMLFormElement.prototype.submit.call(form)
This topic has a lot of answers already, but the one that worked best (and simplest - one line!) for me was a modification of the comment made by Neil E. Pearson from Apr 21 2013:
If you're stuck with your submit button being #submit, you can get around it by stealing another form instance's submit() method.
My modification to his method, and what worked for me:
document.createElement('form').submit.call(document.getElementById(frmProduct));
I had same issue and resolved my issue just remove name="submit" from submit button.
<button name='submit' value='Submit Payment' ></button>
Change To
<button value='Submit Payment' ></button>
remove name attribute hope it will work
Sorry to answer late but for those who are still facing the same error. To get rid of this error:
<form method="POST">
<input type="text"/>
<input type="submit" id="submit-form" value="Submit Form" style="display: none;"/>
</form>
<!-- Other element that will submit the form -->
<button onclick="submitTheForm()">Submit the form</button>
<script>
function submitTheForm(){
document.getElementById("submit-form").click();
}
</script>
Explanation:
The javascript function submitTheForm() is accessing the submit input element and calling the click event on it which results in the form submission.
This solution is lifetime and almost 100% compatible in all browsers.
giving a form element a name of submit will simple shadow the submit property .
make sure you don't have a form element with the name submit and you should be able to access the submit function just fine .
In fact, the solution is very easy...
Original:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Solution:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
</form>
<!-- Place the button here -->
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Possible solutions -
1.Make sure that you don't have any other element with name/id as submit.
2.Try to call the function as onClick = "return submitAction();"
3.document.getElementById("form-name").submit();
You should use this code :
$(document).on("ready", function () {
document.frmProduct.submit();
});
What I used is
var enviar = document.getElementById("enviar");
enviar.type = "submit";
Just because everything else didn´t work.
Solution for me was to set the "form" attribute of button
<form id="form_id_name"><button name="btnSubmit" form="form_id_name" /></form>
or is js:
YOURFORMOBJ.getElementsByTagName("button")[0].setAttribute("form", "form_id_name");
YOURFORMOBJ.submit();
I faced this issues also but i made a quick fix using
const form = document.getElementById('create_user_form');
function onSubmit(event) {
console.log(event.target[0].value);
console.log(form.submit); // 👉️ input#submit
// ✅ Works
HTMLFormElement.prototype.submit.call(form);
}
form.addEventListener('submit', onSubmit);
Even though accessing the submit property on the form element points to the submit input element and not the method, we can still submit the form by accessing the submit property on the HTMLFormElement interface.
I was facing the same problem that my submit() wasn't working. In my case, I'd an id="submit" on the input tag having type="submit", I removed the id, and it started working.
You can try
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction(this)" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction(element)
{
element.form.submit();
}
</script>
Don't you have more than one form with the same name ?
Use getElementById:
document.getElementById ('frmProduct').submit ()
Can anyone tell me what is going wrong with this code? I tried to submit a form with JavaScript, but an error ".submit is not a function" shown. See below for more details of the code:
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
I also tried this:
<script type="text/javascript">
function submitAction()
{
document.forms["frmProduct"].submit();
}
</script>
Both show me the same error :(
submit is not a function
means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work.
When you name the button submit, you override the submit() function on the form.
Make sure that there is no another form with the same name and make sure that there is no name="submit" or id="submit" in the form.
If you have no opportunity to change name="submit" you can also submit form this way:
function submitForm(form) {
const submitFormFunction = Object.getPrototypeOf(form).submit;
submitFormFunction.call(form);
}
<form action="product.php" method="post" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
document.getElementById("submit_value").onclick = submitAction;
function submitAction()
{
document.getElementById("frmProduct").submit();
return false;
}
</script>
EDIT: I accidentally swapped the id's around
I had the same issue when i was creating a MVC application using with master pages.
Tried looking for element with 'submit' as names as mentioned above but it wasn't the case.
For my case it created multiple tags on my page so there were some issues referencing the correct form.
To work around this i'll let the button handle which form object to use:
onclick="return SubmitForm(this.form)"
and with the js:
function SubmitForm(frm) {
frm.submit();
}
form.submit() will not work if the form does not have a <button type="submit">submit</button>. form element belongs to HTMLFormElement interface, therefore, we can call from prototype directly, this method will always work for any form element.
HTMLFormElement.prototype.submit.call(form)
This topic has a lot of answers already, but the one that worked best (and simplest - one line!) for me was a modification of the comment made by Neil E. Pearson from Apr 21 2013:
If you're stuck with your submit button being #submit, you can get around it by stealing another form instance's submit() method.
My modification to his method, and what worked for me:
document.createElement('form').submit.call(document.getElementById(frmProduct));
I had same issue and resolved my issue just remove name="submit" from submit button.
<button name='submit' value='Submit Payment' ></button>
Change To
<button value='Submit Payment' ></button>
remove name attribute hope it will work
Sorry to answer late but for those who are still facing the same error. To get rid of this error:
<form method="POST">
<input type="text"/>
<input type="submit" id="submit-form" value="Submit Form" style="display: none;"/>
</form>
<!-- Other element that will submit the form -->
<button onclick="submitTheForm()">Submit the form</button>
<script>
function submitTheForm(){
document.getElementById("submit-form").click();
}
</script>
Explanation:
The javascript function submitTheForm() is accessing the submit input element and calling the click event on it which results in the form submission.
This solution is lifetime and almost 100% compatible in all browsers.
giving a form element a name of submit will simple shadow the submit property .
make sure you don't have a form element with the name submit and you should be able to access the submit function just fine .
In fact, the solution is very easy...
Original:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Solution:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
</form>
<!-- Place the button here -->
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Possible solutions -
1.Make sure that you don't have any other element with name/id as submit.
2.Try to call the function as onClick = "return submitAction();"
3.document.getElementById("form-name").submit();
You should use this code :
$(document).on("ready", function () {
document.frmProduct.submit();
});
What I used is
var enviar = document.getElementById("enviar");
enviar.type = "submit";
Just because everything else didn´t work.
Solution for me was to set the "form" attribute of button
<form id="form_id_name"><button name="btnSubmit" form="form_id_name" /></form>
or is js:
YOURFORMOBJ.getElementsByTagName("button")[0].setAttribute("form", "form_id_name");
YOURFORMOBJ.submit();
I faced this issues also but i made a quick fix using
const form = document.getElementById('create_user_form');
function onSubmit(event) {
console.log(event.target[0].value);
console.log(form.submit); // 👉️ input#submit
// ✅ Works
HTMLFormElement.prototype.submit.call(form);
}
form.addEventListener('submit', onSubmit);
Even though accessing the submit property on the form element points to the submit input element and not the method, we can still submit the form by accessing the submit property on the HTMLFormElement interface.
I was facing the same problem that my submit() wasn't working. In my case, I'd an id="submit" on the input tag having type="submit", I removed the id, and it started working.
You can try
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction(this)" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction(element)
{
element.form.submit();
}
</script>
Don't you have more than one form with the same name ?
Use getElementById:
document.getElementById ('frmProduct').submit ()
i have a form with an element of type button. I want to use the onclick method to set an image of an img tag, and then simulate the "action" of the form. I tried the following code:
<html>
<head>
<script type="text/javascript">
function imgtest(){
document.getElementById
("test").src="progress.gif";
}
</script>
<title>Hello</title>
<body>
<form method="POST" action="test.php">
<input type="button" value="Submit"
onclick="imgtest()">
</form>
<div id="img">
<img id="test" src="load.png">
</div>
</body>
</html>
Though, this does not seem to work. What may be the other solution?
you can do it like this
give an id to your form
<form method="POST" action="test.php" id="someid">
on button click method in jquery
$('#buttonid').click(
function(){
$("#someid").submit();
});
use document.getElementById('formidhere').submit(); //for javascript solution
While type="submit" controls do submit their form automatically, type="button"s do not. You can trigger the submission with JavaScript by executing
this.form.submit();
at the end of the click event handler of the button (that is inside the form).
There is no need to use jQuery or to give an ID to the form, as form controls always refer back to their form.
In Javascript
document.getElementById('form').submit();
In JQuery
$('#button').click(function() {
$('#form').submit();
});
First give the id to your form
ex.
<form method="POST" action="test.php" id="testForm">
then in you button click event write as below in your imgtest() function :
document.getElementById('testForm').submit();
function imgtest(){
document.getElementById("test").src="progress.gif";
var frm=document.getElementById("frm1");
frm.submit();
}
I'm trying to create a form which submits a string to another page only with the parameter name removed from the URL.
i.e. submitting the following form with "foo"
<form action="search.asp" method="get">
<input type="text" name="keyword" id="keyword">
<input type="submit" value="Go">
</form>
will go to search.asp?foo NOT search.asp?keyword=foo
Can this be done with pure html?
I guess this can be done with javascript and/or jquery but I'm not certain exactly how.
Can anybody help?
I'm a bit of a noob so a copy and paste solution would be great for me.
Update:
Thanks for the answers so far but they don't seem to be working. Perhaps a better way to do this is to get JQuery to construct the URL and load that URL? Any more suggestions would be great.
or maybe...?
$('input[type="text"]').blur(function() {
$('form').attr('action', 'search.asp?' + $('input').val());
});
Let's give the form and the submit button a classname for convenience and assume we have jQuery on the page.
<form action="search.asp" method="get" class="search_form">
<input type="text" name="keyword" id="keyword">
<input type="submit" value="Go" class="search_button">
</form>
<script type="text/javascript">
$(function(){
var $form = $(".search_form");
// save the default action, because we are going to mess with it.
$form.data("original-action", $form.attr("action"));
// listen to the click on the button, update the form action and submit the form manually
$(".search_button").click(function(){
$form.attr("action", $form.data("original-action") + "?" + $("#keyword").val());
$form.submit();
return false;
});
});
</script>
Not tested, but should work. Let me know.
Btw, saving the default action is maybe not needed. But just in case that you ever want to submit it with ajax without reloading the page.
Try this:
<form action="search.asp?foo">
<script>
$(document).ready(function(){
$("#btnSubmit").click(function(){
var keywordVal = $("#keyword").val();
window.location.href = "search.asp?" + keywordVal;
});
});
</script>
<input id="keyword" type="text" name="keyword">
<button id="btnSubmit">Submit</button>