html Form not recognized in my jsp page - javascript

I have a JSP page which is included in the main page..Within the JSP page, I have given a HTMLform which I want to submit() once the user clicks it using Jquery?
<form id="orderBean1" name="myForm" action="/Auto/Item" method="post">
<input id="filename" name="filename" value="" />
</form>
First,
Suprisingly, this form is not recognized within the page..
When I give $('#orderBean1') in my console it does not give the form object whereas $('#filename') gives me the filename input element.
Second ,
As the form is not recognized it does not get submitted...
$("#vehreport").click(function(e) {
e.preventDefault();(I have given this stmt even after the submit() and still not working...
$("#orderBean1").submit();
alert("formsubmnittted");
})
Question -
Why doesn't the form element is recognized in my page?

I set up a JSbin here.
As you can see, #orderbean1 is recognized, and submits.
The error is likely elsewhere is your JS or markup, though if I'm misunderstanding the question please clarify

Related

Add hidden form variable to the end of the URL

I have searched Unbounce and Google for documentation, but can't find a way to make this work. Any help is greatly appreciated!
Use case:
I have a test page setup in Unbounce and it would be great when a user lands on the page and submits the form that the value being generated through the script below in the hidden field is added to the current URL upon submission.
It's important that if the user lands on the page from an advertising campaign that the value is added to URL and does not replace it.
Example:
User lands on testpage.com or testpage.com?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA
Unique ID is created with the following JavaScript and added to a hidden field:
<script type="text/javascript">
$(document).ready(function() {
var id = new Date().toISOString().replace(/[-tTzZ:.]/g, '');
$('#lead_id').val(id);
});
</script>
User clicks submit and and is redirected to a thankyou page with the value of the hidden field passed in the URL:
testpage.com/thank-you?lead_id=1234
testpage.com/thankyou?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA&lead_id=1234
I should also mention that I can not edit the html of the form so this would need to happen with JavaScript as Unbounce provides a space to add custom code.
Is the form method get? If it is post it wont append that to the URL for the hidden field.
Your approach seems right however if this is the HTML on page:
<form action="http://example.com" method="get" id="theForm">
<input type="hidden" value="xyz" />
<button type="submit">Send</button>
</form>
You can use some JS code like one of the following to modify this...however you'll want to verify that everything still works as expected:
document.getElementById('theForm').action = "http://another.example.com";
document.getElementById('theForm').method = "get";

set value in a form or pass a value in a form using jquery or javascript or ajax

i created a Google Form and list down all the ID in each input type, and then created a localhost with the same ID,
The first thing i want to do is to save the values into a localhost and pass the values in the Google Form or set the values into the corresponding ID or Name in each input type in a new tab, is there a way to do this using ajax or jquery?
my form looks like this
<form method="post" action"">
<input type="text" name="FName">
<input type="text" name="LName">
<input type="Submit">
</form>
$post('https://docs.google.com/a/grabtaxi.com/forms/d/e/1FAIpQLSfjiuhFbURVavdNW82ofHG3gPpBUKkK2VATQQKmV-YKKrJ75Q/viewform'{FName:Fname,LName}function(){
window.open('https://docs.google.com/a/grabtaxi.com/forms/d/e/1FAIpQLSfjiuhFbURVavdNW82ofHG3gPpBUKkK2VATQQKmV-YKKrJ75Q/viewform');
});
i am trying to use the $.post() in jquery but it looks like i cannot set the values into the Google Form.
Any tips please... Thank You very much
You should wrap your javascript code inside a scipt tag. Then, you should bind the code to submit event, tha happened when you press the submit button.
<script type="JavaScript">
$('input[type=submit]').submit(
// here you should put your code
});
</script>
And check your code, you wrote $post instead of $.post mi sing the dot.

Javascript Auto Form submission not working

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.

Coldfusion url variable

I have a basic question here not been able to get it right....
I have a ColdFusion form abc.cfm and on submit posts to
<form name="MyForm"
method="post"
action="abc_action.cfm?vempnum=
<cfoutput>#qGetemplookup.emplid#&year=#form.year#</cfoutput>"
Now I have a textbox and a select box and I'm able to get the emplid value on the action page in the url but not able to get the year (which is the select box value)...not sure what I'm doing wrong here. Any help is appreciated.
If I understand the question correctly, you are trying to access form.year prior to actually submitting the form that the year input exists in. This won't work because the form scope will only be populated once the form has actually been submitted.
Trying to add form.year to the URL of the action is actually redundant, because when you do POST the form, the value selected for year will be available to you as part of the form struct.
ColdFusion renders the action when the page is rendered to the screen. So, #form.year# is being populated with whatever it is set to when the page loads.
You're submitting via POST method, so form.year is automatically populated when the processing page (abc_action.cfm) receives the form submission.
Wrap your form tag with CFOUTPUT and place the variable in there.
For example:
<cfoutput>
<form name="MyForm" method="post" action="abc_action.cfm?vempnum=#qGetemplookup.emplid#&year=#form.year#">
</form>
</cfoutput>

How do I use Javascript to force cursor to specific form field when form field has a name with brackets?

I am using CakePHP as my framework.
On page load, I want to force the cursor to a specific form field where name="data[Project][title]"
I'm trying to use javascript:
This works fine if I change the name to something without brackets, but fails to work with this form name. I have to use this form field name because of how CakePHP processes my form data.
Is there a workaround or another simple way to force the cursor to this form field?
Here is the code I currently have (if you change "data[Project][title]" to "formField" it works):
<body onLoad="document.searchForm.data[Project][title].focus();">
<form action="http://beta.industrialinterface.com/users/mainadd/" method="post" id="create-form" name="searchForm">
<input id="main-input" type="text" class="title-limit" name="data[Project][title]" onClick="this.value='';limitText(60);" onKeyDown="limitText(60);return true;" onKeyUp="limitText(60);return true;" />
Example code? Because otherwise you could simply do:
document.getElementById('id_for_your_input').focus();
If you are using a form and have access to the form element you can do
formelement['data[project][title]'].focus();
example at http://www.jsfiddle.net/fqgxv/
You can use getElementsByName() for this. Note that it returns an array.
Ex:
<body onLoad="document.getElementsByName("data[Project][title]")[0].focus();">

Categories

Resources