javascript myform.action doesn't - javascript

I'm trying to use javascript in JSP with a form. The form has a dropdownlist with an onchange event to call a function to sumbit the selected value to a servlet. I'm getting an error "Object doesn't support this action". What is the syntax error in my code?
Here is my code:
<form id="input" method="post" action="ResultServlet">
<input id=year type=text value="george">
<input id=year type=text value="mary">
<input id=year type=text value="fred">
<select id=casesId onchange = "sendCases();">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3 </option>
</form>
<script typ=text/javascript>
function sendCases(){
var id = document.forms[0].caseId.options[document.forms[0].caseId.selectedIndex.value;
if (id !='' || id == null{
document.forms[0].action('CaseServlet').submit();
}
}
</script>
Any help you could give would be great. Thanks!

Change:
if (id !='' || id == null{
document.forms[0].action('CaseServlet').submit();
}
For:
if (id!='' || id == null) {
document.forms[0].action = 'CaseServlet';
document.forms[0].submit();
}
You have a syntax error where you forget to close the if. It might be a typo though.
action is not a method, it's a property. You don't execute it, you assign a value to it.
The submit() method only works on the form object, not something else :)

Related

Submit a form via this object

I have a form that I want to submit, and I don't know the best way to call the form.
This is my HTML
<form id="form2" name="form2">
<select id="situation_matrimoniale" name="situation_matrimoniale">
<option value="Célibataire">Célibataire</option>
<option value="Marié(e)">Marié(e)</option>
<option value="Veuf(ve)">Veuf(ve)</option>
<option value="Divorcé(e)">Divorcé(e)</option>
</select><input type="text" name="nombre_enfant" id="nombre_enfant" value="" /><input type="button" value="Enregistrer" name="submit" onclick="submitFormInfoEtatCivil()" />
</form>
Now the Javascript, I included jQuery.
function submitFormInfoEtatCivil() {
var update = "index.php/rh/updateinfo";
var dataString = $( this ).serialize();
// dataString return <empty string>
jQuery.ajax({
});
}
I have many forms with ids : form1, form2, form3 ...
My problem is how to specify the fonction submitFormInfoEtatCivil() to get the form where button is submitted. I used $( this ).serialize() but I am wrong because the output is empty.
You can pass this inside function and then use .closest("form") to get input datas from form where button has been clicked.
Demo Code :
function submitFormInfoEtatCivil(el) {
var update = "index.php/rh/updateinfo";
//use closest to get form where button is clicked
var dataString = $(el).closest("form").serialize();
console.log(dataString)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form2" name="form2">
<select id="situation_matrimoniale" name="situation_matrimoniale">
<option value="Célibataire">Célibataire</option>
<option value="Marié(e)">Marié(e)</option>
<option value="Veuf(ve)">Veuf(ve)</option>
<option value="Divorcé(e)">Divorcé(e)</option>
</select><input type="text" name="nombre_enfant" id="nombre_enfant" value="" />
<!--pass `this` inside function-->
<input type="button" value="Enregistrer" name="submit" onclick="submitFormInfoEtatCivil(this)" />
</form>
<form id="form" name="form">
<select id="situation_matrimoniale" name="situation_matrimoniale">
<option value="Célibataire">Célibataire</option>
<option value="Marié(e)">Marié(e)</option>
<option value="Veuf(ve)">Veuf(ve)</option>
<option value="Divorcé(e)">Divorcé(e)</option>
</select><input type="text" name="nombre_enfant" id="nombre_enfant" value="" />
<!--pass `this` inside function-->
<input type="button" value="Enregistrer" name="submit" onclick="submitFormInfoEtatCivil(this)" />
</form>
$(this) that you use refers to button and you are getting empty string when you are serialize() a button.
I strongly recommend an another solution for this problem; you can catch the form when it is submitted with the on() function;
$('form').on('submit',function(){
var thiz = $(this);
var update = thiz.attr("form-url"); //get update url from the form as an attiribute or define it staticly.
var dataString = thiz.serialize();
return false; //to prevent original form action.
});
When you use above code snippet you can remove onclick="submitFormInfoEtatCivil(this)" from your code and also if you want to deep dive with on() function, you can find here an documentation.

Why The Validation is not working for the provided html/ js code

I want the to get the required in the html page if none is selected.
function validation() {
var country = getElementById("country");
if (country.value = "") {
documnet.getElementById("countryy").innerHTML = "Required";
return false;
} else
return true;
}
<form onsubmit="return validation();">
<select id="country"><span id="countryy"></span>
</select><br>
<input type="submit" name="Submit" value="Submit">
</form>
Why The Validation is not working for the provided html/ js code. I want the to get the required in the html page if none is selected. I am new to js learning.
Several issues
Spelling mistake in the document.getElementById
missing document on the other document.getElementById
No preventDefault which will submit the form if any JS errors
= is assignment - you need == or === to compare
span needs to be outside the select
You did not use value="Default" in the "NONE" options
It is not recommended to have inline event handlers. Here is a better version
Note I added a class to toggle the required in case the user changes the select to conform
window.addEventListener("load", function() {
const errorSpan = document.getElementById("countryy"); // cache the elements
const country = document.getElementById("country");
document.getElementById("myForm").addEventListener("submit", function(e) {
const val = country.value; // get the value
if (val === "") {
e.preventDefault(); // stop submit
}
errorSpan.classList.toggle("hide",val); // hide if value
})
country.addEventListener("change",function() { // if user changes the select
errorSpan.classList.toggle("hide",this.val); // hide if value
})
})
.hide { display : none; }
<form id="myForm">
<select id="country">
<option value="">NONE</option>
<option value="ABDUL">ABDUL</option>
<option value="SULE">SULE</option>
</select> <span id="countryy" class="hide">Required</span><br>
<input type="submit" name="Submit" value="Submit">
</form>
HOWEVER you could remove all the script and just add required attribute to the select and keep the empty default
<form id="myForm">
<select id="country" required>
<option value="">NONE</option>
<option value="ABDUL">ABDUL</option>
<option value="SULE">SULE</option>
</select><span id="countryy"></span><br>
<input type="submit" name="Submit" value="Submit">
</form>
Use required attribute in the select tag. It will considered in html 5 validation.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_required

My data-list search form is not working

I am trying to combine a data-list with actual links to make a auto-complete search form... Well here is my code:
<form action="#">
<input list="results" type="text" placeholder="Search Me ;)">
</form>
<datalist id="results" onchange="location = this.options[this.selectedIndex].value;">
<option value="Home.html">Home</option>
<option value="Contact.html">Contact</option>
<option value="Sitemap.html">Sitemap</option>
</datalist>
However it does not work.. Any suggestions?
----NEW UPDATE----
Is it possible to assign the form onsubmit or action to the selected value in anyway?
This will work however you don't use a datalist.
Javascript:
function checkInput(searchQuery)
{
if(searchQuery=="Home")
{
window.location = "Home.html";
}
else if(searchQuery == "Contact")
{
window.location = "Contact.html";
}
else if(searchQuery == "Sitemap")
{
window.location = "Sitemap.html";
}
else
{
document.getElementById("search").submit();
}
}
In order to let this work your form should have an id of 'search'.
Edit
Your input a few changes:
<input type="text" placeholder="Search Me ;)" onkeydown="if (event.keyCode == 13) { checkInput(this.value); return false; }"/>
unfortunately you can't embed links into a datalist
eg
<option value="home">Home</option>
The dom simply doesn't work that way.
you would need to build the solution yourself using javascript.
I suggest taking a look at http://www.jqueryui.com they probably have something to help you

Validate a form without submitting

I have the following code that checks to see that two select fields are identical. The code works alright when called with onsubmit. However after doing this validation the form is still submitted. How can i prevent the script or my form from submitting the incorrect data.
Please see code below:
var fieldalias="Email address field"
function verify(element1, element2) {
var passed=false
if (element1.value=='') {
alert("Please fill out the "+fieldalias+"!")
element1.focus()
}
else if (element2.value=='') {
alert("Please verify the "+fieldalias+"!")
element2.focus()
}
else if (element1.value!=element2.value) {
alert("The two "+fieldalias+"s do not match")
element1.select()
}
else
passed=true
return passed
}
You didn't include your HTML, so I'm going to assume you've added onsubmit() to your form element.
If so, make sure your call looks like this:
onsubmit="return verify(element1, element2)"
(replace element1 and element2 accordingly)
If this assumption is not correct, please include some additional detail so we can better assist.
Try calling stopImmediatePropagation() on the event to prevent any further processing of the submit event by any other handlers in the form element or higher level elements.
Call that code with different event, like i.e: onchange, or onfocusout. This way the validation will be performed every time user enter some values to your fields, certainly before submitting.
EDIT:
I'm not sure if I understand you correctly but I would have attached your JS code this way:
First assign your select box to the variable:
var object_input = document.getElementById("selectId");
And then:
if(object_input.addEventListener)
{
object_input.addEventListener('blur', focus_lost);
object_input.addEventListener('keypress', checkForEnter);
}
else
{
object_input.attachEvent('onblur', focus_lost);
object_input.attachEvent('onkeypress', checkForEnter);
}
and then perform your validation ith focus_lost or checkForEnter.
Assuming that in the html code you have something like this:
<form action="test2.html" method="post" onsubmit="return verify(e1, e2);">
<input type="text" name="e1" /><br/>
<input type="text" name="e2" /><br/>
<input type="submit" value="Validate" />
</form>
You have to put in onsubmit event:
return verify(e1, e2);
so you will not go to the submiting page if the data is not valida
EDIT:
I think the problem is the
element1.select()
in the 3rd if, that this select method does not exist for a select object.
You can use a
element1.focus()
The code that will work is:
var fieldalias="Email address field"
function verify(element1, element2){
var passed=false;
if (element1.value==''){
alert("Please fill out the "+fieldalias+"!");
element1.focus();
}
else if (element2.value==''){
alert("Please verify the "+fieldalias+"!");
element2.focus();
}
else if (element1.value!=element2.value){
alert("The two "+fieldalias+"s do not match");
element1.focus();
}
else
passed=true;
return passed;
}
And
<form action="test2.html" method="post" onsubmit="return verify(document.getElementById('e1'), document.getElementById('e2'));">
<select id="e1">
<option value="One">One</option>
<option value="two">two</option>
<option value="Three">Three</option>
<option value="four">four</option>
</select><br/>
<select id="e2">
<option value="One">One</option>
<option value="two">two</option>
<option value="Three">Three</option>
<option value="four">four</option>
</select><br/>
<input type="submit" value="Validate" />
</form>

How to replace the hidden value dynmaicaly using java script in html

<form method="post" name="test" id="test">
<input type="hidden" name="listname" value="qpaustin" />
<select name="customCity" id="customCity" onchange="javascript:onChangeHiddenValue(this.value);">
<option value="qpneworleans" >qpneworleans</option>
<option selected="selected" id="listSelectionActiveOption" value="qpnewyork" >qpnewyork</option>
<option value="qporangecounty">qporangecounty</option>
<option value="qporlando">qporlando</option>
</select>
</form>
<script type="text/javascript">
function onChangeHiddenValue(cityName)
{
alert(document.getElementById('customCity').value);
}
</script>
I need to change the hidden value "listname" dynamically using javascript.
For example, currently the value of listname is qpaustin. But when i change the value to qpneworleans the "listname" value should be replaced to qpneworleans .
How to do this.
Kindly advice. Thanks in advance
A few comments:
The onchange event should be bound to the select element, no to the options.
Give your form a name, that will make the programmatic access easier, e.g. document.forms['formName']
For example:
<form method="post" name="form1">
<input type="hidden" name="listname" value="qpaustin" />
<select name="customCity" onchange="onChangeHiddenValue(this.value);">
<option value="qpneworleans">qpneworleans</option>
<option selected="selected" value="qpnewyork">qpnewyork</option>
<option value="qporangecounty">qporangecounty</option>
<option value="qporlando" >qporlando</option>
</select>
</form>
<script type="text/javascript">
function onChangeHiddenValue(cityName) {
// DOM2 standard way to access forms and elements
document.forms['form1'].elements['listname'].value = cityName;
}
</script>
Check the above example here.
Its better if you can give an id to the hidden element. Something like
<input type="hidden" id="listname" name="listname" value="qpaustin" />
and your javascript to assign value to that element will be
document.getElementById("listname").value = cityName;
Apart from the solution that Rahul has provided you can also try out the following.
document.test.listname.value = cityName;
In Javascript you can refer to form elements by their names.

Categories

Resources