There are many forms with a unique id
<form id='fu_edit_1' method='post' action=''>
....
</form>
<form id='fu_edit_2' method='post' action=''>
....
</form>
Use this js code
var formName = 'fu_edit_'+id;
document.forms[formName].submit();
so here is the code works fine in ff the last version, but in chrome and ie refused to work. However, if you specify the id of the form directly it works, for example:
document.forms["fu_edit_2"].submit();
What is wrong?
In the console, Chrome writes : Uncaught TypeError: Object # has no method 'submit'
I think your problem is with the variable id I would recomend you to this:
alert(id.toString());
Maybe there is an issue with your number converion to string, perhaps alert will surprise you with something like 01 or similar
I've come across this problem multiple times and finally found that if you have a form element in the fu_edit_2 form with a name attribute of submit then document.forms["fu_edit_2"].submit would be a reference to the element and not a method to submit the form. I've found it best to stay away from having any form fields with a name of submit to circumvent this problem.
Related
i want to capture input variables sent via form from one page to another.html page and obtain these values as JavaScript variables. Can this be done.
This is my form;
<form action='another.html' id='form' data-ajax='false'>
<input id='sent_by' value='tom'/>
<input type='submit' value='Submit'/>
</form>
And in my another.html i tried to get the values as;
var sent_by = $.session.get("sent_by");
But i am not able to get the values. All help is appreciated.
You can use the browser's localStorage to achieve this. Before submitting and going to the other page store all the values of the form in the localStorage and you can access it on the other page:
Page1.html
Field Name = "name" <input type="text" name="name" id="name" />
Read the value and store it to localStorage
localStorage.setItem('name', document.getElementById('name').value);
and so on.
You can make a function in JavaScript that saves all the fields of the form in localStorage on / before submit.
To read these values on the other page:
Page2.html
Value stored for key name can be get using the following JavaScript:
localStorage.getItem("name");
NOTE
the page1.html and page2.html should be in the same domain for you to access the localStorage.
Read more about localstorage at https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
Have you tried using Window.localStorage? It's similar to sessionStorage but with no expiration date. So, be sure to clear it once the browsing session ends.
I think the answer provided by #Shakti Phartiyal is probably the most practical and a sweet trick I might add. The main reason I'm writing this post is because I had also taken a long path of using javascript to pass along this kind of information. It resulted in me bewildered at how powerful PHP can be for some tasks that you dedicated javascript to do. (Yea I know some javascript wizards out there can do everything with it, I'm just talking about basic programming tho). So if you wondered what the PHP way of passing this around:
Your modified html form:
<form action='another.html' id='form' data-ajax='false' method='post'>
<input id='sent_by' value='tom' name='uname'/>
<input type='submit' value='Submit'/>
</form>
and then in "another.php" you would have this to retrieve the input from the form:
<?php
$uname= htmlspecialchars($_POST['uname'];
?>
Great. But how to make this php variable into javascript?
Ah, the fun part. You're going to write javascript to your webpage with php - you do something like this:
var uname = "<?php echo $uname; ?>";
I am new to spring web applications. When I submit a form, the request mapping is getting a "dual" parameter.
My form is set as:
<form action="" method="post" name="myform">
......
</form>
I use a javascript to submit the form, for example, when I submit the form for going to various pages, my javascript is like this:
function gotoPage(pageNumber)
{
document.forms['myform'].action="trx?page=" + pageNumber;
document.forms['myform'].submit();
}
So when I have a link like this on my jsp page,
Page number: 3
On my controller for the request mapping for /trx, I should be getting parameter page as value "3", but I am getting value as "3,3".
Any ideas why? I noticed only on the page parameter, If I use parameters like action=search or action=sort. It all works out fine.
Dumb question. :)
Had a <select name="page"> in the form.
A quick question here regarding forms. I've searched the web and can't seem to figure out why what I've implemented isn't working.
The idea is simple. I have a form inside a JSP page. The form has an 'onsubmit' property defined to open a different jsp with some parameters. Inside the form I have a few buttons, one of which calls a JavaScript function, which in turn submits the form (under some conditions).
Here's the code:
JSP:
...
<form id='testForm' onsubmit="window.open('another.jsp')">
<input type="button" onclick="callJsFunction()" />
..
</form>
JavaScript:
function callJsFunction() {
if (launchNow == 1) {
var form = document.getElementById("testForm");
form.submit();
}
}
If I add target="_blank" to the form definition, a new window does open, but NOT the jsp I want to open. Ultimately, I want the form to perform a servlet action (using the action attribute) and then open the new jsp. Any ideas???
Thanks!
The solution to what I was looking for is found here: Javascript Post on Form Submit open a new window
Rather than setting target="_blank", I can set the target to the window I define and open. In my servlet, I redirect to the desired jsp, and it appears in the new pop-up window.
<form id='testForm' action='another.jsp' target='_blank'>
I might be wrong but is this what you are looking for?
Please see the working demo at this link: http://fiddle.jshell.net/vf6AC/show/light/ (don't work in the jsfiddle)
<form action="http://google.com" id="testForm">
<input type="submit" />
</form>
<script type="text/javascript">
var testForm = document.getElementById("testForm");
testForm.onsubmit = function(e){
window.open("http://stackoverflow.com");
return true;
};
</script>
See the jsfiddle here: http://jsfiddle.net/vf6AC/
In Chrome and IE, the following code, when the Anchor tag is clicked, pops up the form (modal box ID of "modalContent", form ID of "DL") and adds an "OnSubmit" to the Form. When the Form is submitted, it will navigate to the requested PDF via Javascript, and run some ASP to send an email with their details attached.
<script language="javascript">
function downloadAnyway(link) {
$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform("' + link + '")');
$('#modalContent').modal();
}
function checkform(navName) {
window.open(navName);
$.modal.close();
}
</script>
<!-- link to download a product guide -->
Product Guide
<div id="modalContent">
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" >
<div align="center">
<input type="image" src="templates/default/images/submit_download.gif" class="imagebutton" value="submit" />
</div>
</form>
</div>
This works fine in IE and Chrome, in Firefox, the Javascript onsubmit works, but the action of the asp never fires. If I remove the javascript, the asp fires as expected.
So, the final form in FireFox, after the "onsubmit" has been dynamically added looks as below:
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" onsubmit="return checkform("downloads/ProductGuide.pdf")">
The onsubmit fires, opening the product guide in another tab, however, the ASP Action never fires. There is more that goes on here, like we write a cookie making sure we don't ask the client for a download every time they use our downloads, however, I've trimmed off anything I think is outside the problem domain.
In the asp, I have gotten rid of all code and put a simple response.redirect to see if it fires and make sure nothing is going on in the ASP.
Any idea how I can get this to function in FireFox?
UPDATE:
I have replaced the onsubmit event wireup with a 'proper' jquery submit wireup replacing the first line below, with the second. The asp on the form still does not function.
//$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform(\'' + link + '\')');
$('#DL').submit(function checkform() {
$.modal.close();
window.open(link);
return true;
});
UPDATE 2
Right, it is because to modal popup CLOSES before the ASP fires. If we comment out the line $.modal.close(); then the asp fires as expected. In Chrome and IE the javascript and the ASP must fire at the same time, in Firefox, the javascript fires which "hides" the div with the "modelContent" and the asp can no longer fire. So this is the real problem... now how to sort it out...
<form id="search" action="/search" method="get" autocomplete="off">
<div>
<input type="button" name="test_button" value="test" />
</div>
</form>
<script>
document.getElementById("test_button").value = "changed_test"
</script>
Just as the HTML code above shows, I have defined a button with name test_button and value test and changing its value with the code in the script tag.
Now I am debugging a large webpage which is using a mechanism like this using Firebug and Firefox in Linux.
I want to know how I can find the script that changes the value attribute of the <input ... />, but the web page is too large, various <script> and anonymous functions which are auto-executed made it nearly impossible to find the specific script manually.
Since I am in Linux, I cannot use any Microsoft tools to search the whole web page. I only have Firebug and Chrome. Can Firebug realize that? Does anyone have a good idea of how to find the specific <script> that changed the value?
Add some code like this to the document, right after the form with the button:
<script>
var node = document.getElementById("test_button");
Object.defineProperty(node, 'value', {
set: function() { throw new Error('button value modified'); }
});
</script>
This will throw an error when anything tries to modify the button's value.
Expand the error and click the last line number shown. This will take you straight to the line that set the value of the button.
Here's a demo: http://jsfiddle.net/XSJZN/
Tested in Chrome 17.