<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
submitForm($("#login-user-one"));
});
function submitForm(form) {
console.log($(form).attr("method"));
$(form).submit();
};
</script>
</head>
<body>
<form id="login-user-one" name="login" method="POST" action="/test.html">
<input name="userid" tabindex="1" value="MyUser">
<input name="pass" type="password" tabindex="2" value="MyPass">
<input type="submit" name="submit" value="1" tabindex="3">
</form>
</body>
</html>
I can't figure out why the above does not works. The log shows me the value of POST and yet it won't submit. There are no errors in the console.
JS Fiddle: https://jsfiddle.net/t48hk9qx/
Well, this is a new one for me.
Because your form has a named element with name="submit", that element reference is replacing the HTMLFormElement.prototype.submit() function.
From the documentation...
Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named action will have its action property return that input instead of the form's action HTML attribute).
jQuery attempts to execute that function when programmaticaly submitting the form with something like
if (typeof element.submit === 'function') {
element.submit()
}
But in your case, element.submit is an HTMLInputElement.
Quick and easy solution, rename your submit element, or as is more commonly seen with single-button forms, just remove the name attribute.
If you must keep the submit button named "submit", this seems to work
function submitForm(form) {
// note, "form" is already a jQuery object
console.log(form.attr("method"));
HTMLFormElement.prototype.submit.call(form[0])
}
Remove name = submit in your input will resolve problem. https://codesandbox.io/s/64kl2l3wvk. I think because form.submit function is replaced by the the input with name = submit.
Related
Background
Using VanillaJS to obtain an HTML form's action attribute value.
Code
Here is the code and the fiddle:
<html>
<head>
<script type='text/javascript'>
function init() {
alert( document.forms['form-load'].action );
}
</script>
</head>
<body onload="init();">
<form name="form-load" id="form-load" action="http://google.com/q">
<input name="query" id="query" type="text" />
<button id="button-load" type="submit" name="action" value="load">Load</button>
</form>
</body>
</html>
Problem
The dialog shows [object HTMLButtonElement] where http://google.com/q was expected (using Firefox 32).
Question
How can the form's action attribute value be retrieved?
Update
The following question might be relevant:
Retrieve form's "name" attribute in Javascript whereas an input exists with name "name"
It's a bad idea to give form elements names that conflict with standard form property or method names. For example, avoid giving elements the following names: submit, method, action, reset.
If you must, get the attribute value using the .getAttribute() method instead:
function init() {
alert( document.forms['form-load'].getAttribute("action") );
}
I think it's a bad practice to name an attribute name with "name". Why not use id instead?
function init() {
alert( "By ID:" document.getElementById('form-load').getAttribute('action') );
}
I have following simple HTML Form & i tried to submit the form automatically during page load.
Below Javascript code is not automatically submitting the form.
HTML :
<form action="SSL.php" method="POST" name="TForm" id="transactionForm">
<input type="hidden" name="merchantTxnId" id="merchantTxnId" value="test">
<input type="submit" name="submit" id="submit" value="submit" style="visibility:hidden">
</form>
Redirecting ... Please wait...
Java script:
<script>
window.onload = function(){
alert(1); // this is working..
document.getElementById("transactionForm").submit(); //nothing is happening with this line . form is not getting submitted
}
</script>
I found following error in Chrome console mode says:
Kindly suggest me where the problem is...
You may not use submit as the name or id of any of your form elements.
The reason is, that you can reach each child of your form via document.getElementById('form').nameOfTheChild where nameOfTheChild is the name of the child. If you have a child with the name submit, document.getElementById('form').submit is a shortcut to address that child.
The documentation of .submit() says that :
Forms and their child elements should not use input names or ids that
conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures.
I'm having a strange behaviour with this code:
<script type="text/javascript">
function get()
{
alert("gggg");
jQuery.get (
"http://localhost:8080/c/portal/json_service",
{
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : document.getElementById("nombre")
}
);
}
</script>
<div>
<form>
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="button" value="Submit" onClick="javascript:get()"/>
</form>
</div>
Liferay portal gets blocked when the button "Submit" is pressed. The pop-up with the message "gggg" is showed, but after click ok on it, the page becomes blocked.
If I remove the line 'param : document.getElementById("nombre")', it doesn't block.
Can anyone explain me where is the error, or the reason of this behaviour?
Thanks in advance,
Rafa
The problem is that you're trying to pass an entire DOM element as the value for param, which jQuery isn't going to like. What type of element has ID nombre, and what property from that element do you want? If it's some kind of input, you likely want the value property, so you'd do:
param : document.getElementById("nombre").value
Updated Answer:
Thinking this through a little more, you should probably do this in a different way altogether. You're sending the data when the user clicks on the submit button, but remember if a user hits enter while typing in the input text box the form will submit but your code will not catch that.
A more robust solution would be to do it this way instead:
<div>
<form id="nombre_search">
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="submit" value="Submit"/>
</form>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#nombre_search").submit(function(){
$.get("http://localhost:8080/c/portal/json_service", {
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : $("#nombre").val()
});
return false;
});
});
</script>
Changes to your code:
Added an id to the form.
Made the submit button a submit button instead of just a button.
Placed code inside $(document).ready block.
Code runs when form is submitted not when button is clicked.
Hope this helps,
Sandro
I have a form which has fields pre-filled with a default value, like this:
<input type=text name=first value="First Name" class="unfilled" />
When the textbox is clicked, the class unfilled is removed from the textbox, and the textbox is made blank so the user can type in his/her own info.
The problem is that when the form is submitted, its getting submitted with these default values, which is messing up the server side validation. How can I do it so that when the form is submitted, all the fields which have a default value are made blank, so the server side validation would throw the error: 'Please fill in this field'?
I'm trying the following code which isn't working:
$("#myForm").submit(function()
{
$(".unfilled").val('');
}
);
This does make the fields blank, but the server still receives them with their previous default values.
I think you simply have a syntax error. You're missing the closing parenthesis on your submit method.
I just whipped this up and it works fine
<!DOCTYPE html>
<html>
<body>
<?php
var_dump($_POST);
?>
<form action="test.php" method="post">
<input type="text" name="first" value="First Name" class="unfilled">
<input type="submit">
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('form').submit(function() {
$('.unfilled').val('');
});
});
</script>
</body>
</html>
You need to stop the form execution first, change the values, and then manually submit the form.
$("#myForm").submit(function(e)
{
// Stop the form submit
e.preventDefault();
$(".unfilled").val('');
$(this).submit();
}
You have to return true; if you want the form to submit, or false, if you don't.
The problem with this approach is that the fields will 'blink' before posting the values, thus creating a bit of unprofessional feel.
It is better to use hidden values and set them in submit() event.
I think you need the .click() function of JQuery.
Example:
$(function () { // shorthand for document.ready
$('.unfilled').click(function () {
$(this)
.val('')
.removeClass('unfilled');
})
});
UPDATE
Sorry, i missunderstand you, thought you need a feature like a placeholder.
Of couse you can do it with return false;, but this cancel the submitting. Or like GreenWebDev says to use e.preventDefault();.
I'm trying to intercept the submission of a form in order to change the value of my keywords label.
I have the following code:
<HTML>
<FORM name="searchForm" method="get" action="tmp.html" >
<input type="text" name="keywords" />
<input type="button" name="submit" value="submit" onclick="formIntercept();"/>
</FORM>
<SCRIPT language="JavaScript">
document.searchForm.keywords.focus();
function formIntercept( ) {
var f = document.forms['searchForm'];
f.keywords.value = 'boo';
f.submit();
};
</SCRIPT>
</HTML>
When I run this in chrome and click the submit button the keywords label changes to boo, but the javascript console says:
Uncaught TypeError: Property 'submit' of object <#an HtmlFormElement> is not a function.
How can I submit the form with the manipulated keywords?
The reason for the error when trying to call form.submit() is that your submit button is called "submit". This means that the "submit" property of your Form object is now a reference to the submit button, overriding the "submit" method of the form's prototype.
Renaming the submit button would allow you to call the submit() method without error.
The problem is that when some element is <input type="submit" name="submit" /> submit() method will not work. The best solution to this situation is to change the name of that submit type input to something else for example button-submit etc.
<html>
<head></head>
<body>
<form name="searchForm" method="get" action="tmp.html" onsubmit="formIntercept(this);">
<input type="text" name="keywords" />
<input type="submit" name="submit" value="submit"/>
</form>
<script type="text/javascript">
document.searchForm.keywords.focus();
function formIntercept( form ) {
form.keywords.value = 'boo';
//form.submit();
}
</script>
</body>
</html>
See jQuery .submit().
$("form").submit( function() {
// TODO tweak your form data before it gets sent
});
Just change the name of submit button and it'll work!
Chris Butler explained the issue well.
You can use a native submit method of HTMLFormElement to work around a problem.
In your case:
function formIntercept( ) {
var f = document.forms['searchForm'];
f.keywords.value = 'boo';
HTMLFormElement.prototype.submit.call(f);
};