I have a html page which takes the inputs datetime1,datetime2,moteid and has a submit button,which should redirect to another page on the onclick of submit button.
I want to use the inputs here,that were given in the previous page ie.,datetime1,datetime2,moteid
var d1=document.getElementById("datetime1").value;
var d2=document.getElementById("datetime2").value;
var m=document.getElementById("moteid").value;
**var newwindow = parent.window.open("pdf1jsp.jsp?datetime1="+d1+"&"+"pdf1jsp.jsp?datetime2="+d2+"&"+"pdf1jsp.jsp?moteid="+m);
//var newwindow = parent.window.open("pdf1jsp.jsp?datetime1="+d1+"pdf1jsp.jsp?datetime2="+d2+"pdf1jsp.jsp?moteid="+m);**
window.close();
When i give only one input,then its fine and i'm getting the output
var newwindow = parent.window.open("pdf1jsp.jsp?datetime1="+d1);
How to pass many inputs .What is the wrong with the above syntax
Passing values from page to page is not a good practice. Since you already have a jsp, you should starting passing the value from your jsp to a Servlet.
Your fields should be inside a form. Then point the action attribute of that form to the Servlet. Have those values validated there, then pass them again to another jsp.
use QueryStrings:
var newwindow = parent.window.open("pdf1jsp.jsp?datetime1="+document.getElementById("datetime1").value+"&"+...);
Then get the values from result page
Related
i usually have no trouble constructing HTML links to prefill any given form field.
However, this one has me stumped:
https://www.planningportal.nsw.gov.au/spatialviewer/#/find-a-property/address
I want to construct a link to prefill the address here, I've used all the usual structures like the following:
https://www.planningportal.nsw.gov.au/spatialviewer/#/find-a-property/address#mat-input-0=100+Princes+St,+Ryde+NSW+2112
Also replacing the # with a ? does not work
I believe the field ID is "mat-input-0"
Is there something obvious I am missing here?
Is the site sanitising the query from the end of the link for some reason perhaps?
var url = "https://www.planningportal.nsw.gov.au/spatialviewer/#/find-a-property/address#mat-input-0=100+Princes+St,+Ryde+NSW+2112"
var address = url.split('mat-input-0=')[1].replace(/\+/g, ' ');
document.getElementById("address-input").value = address;
<input id='address-input' val='' size='50' />
you can replace url by var url = window.location.pathname; to get the parameters in your url.
hope it helps :)
I have child elements with same names but they are under different parent nodes having different names themselves in HTML form. When I submit this form, how will I able to access these child attribute values from HttpRequest object at server side?
Clarification:
Actually I have many cloned divs which are having multiple input fields. Divs have different names but IDs of input fields are same across these divs. I was thinking if I can somehow differentiate child names using their parent div ids at server side, it would have been lot easier. Otherwise, I will have to add additional javascript code to rename these child nodes so they will differ.
If you send form using HTTP request, only named elements values are sent (not HTML DOM) and latter overwrites earlier. So use different names.
You may use something like random name mangler. If you have form like this
<form id="test">
<input name="foo"/>
<input name="bar"/>
<input name="foo"/>
<input type="submit"/>
</form>
you can add random suffix to every variable just before the form is send
<script>
var mangled = false;
document.getElementById("test").onsubmit = function(e) {
// add suffix on first submit
if(!mangled) for(var i=0; i<this.length; ++i) {
this[i].name+= "_"+Math.floor(Math.random()*99999);
}
mangled = true;
e.preventDefault(); // disable default submit
// send form using XHR
var xhr = new XMLHttpRequest();
xhr.open("POST","yourserver",true);
xhr.send(new FormData(this)); // send the form data to the server
}
</script>
The server will receive something like this:
foo_88428=a&bar_69516=b&foo_84602=c
On the server you may drop the _[number] suffix of each variable and handle duplicities the way you like.
The string above is raw post data (google it for your server language support). Technically you can handle the data if some name is inserted twice, like
foo=a&bar=b&foo=c
but I wouldn't recommend it since it is race hazard antipattern.
Example:
<form>
<input type='submit'>
</form>
When submitted results in:
http://example.com/?
How to make it:
http://example.com/
?
[This is a very simple example of the problem, the actual form has many fields, but some are disabled at times. When all are disabled, the trailing ? appears]
In my case I'm using window.location, not sure it's the best alternative, but it's the only one I could make it work:
$('#myform').submit(function()
{
... if all parameters are empty
window.location = this.action;
return false;
});
My real use was to convert GET parameter to real url paths, so here is the full code:
$('#myform').submit(function()
{
var form = $(this),
paths = [];
// get paths
form.find('select').each(function()
{
var self = $(this),
value = self.val();
if (value)
paths[paths.length] = value;
// always disable to prevent edge cases
self.prop('disabled', true);
});
if (paths.length)
this.action += paths.join('/')+'/';
window.location = this.action;
return false;
});
Without using Javascript, I'm not sure there is one. One way to alleviate the problem may be to create a hidden input that just holds some junk value that you can ignore on the other side like this:
<input type="hidden" name="foo" value="bar" />
That way you will never have an empty GET request.
This is an old post, but hey.. here ya go
if you are using something like PHP you could submit the form to a "proxy" page that redirects the header to a specific location + the query.
For example:
HTML:
<form action="proxy.php" method="get">
<input type="text" name="txtquery" />
<input type="button" id="btnSubmit" />
</form>
PHP (proxy.php)
<?php
if(isset($_GET['txtquery']))
$query = $_GET['txtquery'];
header("Location /yourpage/{$query}");
?>
I am assuming this it what you are trying to do
I was looking for similar answer. What I ended up doing was creating a button that redirects to a certain page when clicked.
Example:
<button type="button" value="Play as guest!" title="Play as guest!" onclick="location.href='/play'">Play as guest!</button>
This is not an "answer" to your question but might be a good work around. I hope this helps.
Another option would be to check the FormData with javascript before submitting.
var myNeatForm = document.getElementById("id_of_form");
var formData = new FormData(myNeatForm); // Very nice browser support: https://developer.mozilla.org/en-US/docs/Web/API/FormData
console.log(Array.from(formData.entries())); // Should show you an array of the data the form would be submitting.
// Put the following inside an event listener for your form's submit button.
if (Array.from(formData.entries()).length > 0) {
dealTypesForm.submit(); // We've got parameters - submit them!
} else {
window.location = myNeatForm.action; // No parameters here - just go to the page normally.
}
I know this is a super old question, but I came across the same issue today. I would approach this from a different angle and my thinking is that in this day and age you should probably be using POST rather than GET in your forms, because passing around values in a querystring isn't great for security and GDPR. We have ended with a lot of issues where various tracking scripts have been picking up the querystring (with PII in the parameters), breaking whatever terms of services they have.
By posting, you will always get the "clean url", and you won't need to make any modifications to the form submit script. You might however need to change whatever is receiving the form input if it is expecting a GET.
You will get a trailing question mark when submitting an empty form, if your server adding trailing slash to URL and your action URL of form - is directory (and not file) and:
Trailing slash in the action attribute URL (action="/path/").
With dot (with or without trailing slash after it) instead specific URL (action="." or action="./").
With empty action (action="").
Form without action attribute.
Try to specify an action-URL without trailing slash:
action="path"
or
action="./path/sub"
and
action="/path"
or
action="/path/sub"
In Jsp while i press submit button instead of passing values to action.
I want the HTML content of that form with all values it is possible??
If possible give an example. Let me know if any clarification is needed.
It isnt clear where do you need this html content?
If on browser, use an alert in an onSubmit event -
alert(document.myForm.innerHTML);
To get this on to server side, you will need to pass this content as part of form submission, maybe in a hidden field.
in onSubmit() event:
myForm.myHiddenHtmlContent = myForm.innerHTML;
For InnerHTML with current form values:
Its not plain easy, check out the following link -
innerHTML with current form values
This uses jquery, but you can also write your own without it as well.
Including an example -
Ok, it looks like it works in IE but not in FireFox. Basically you need to setAttribute('value') for each form element to make it work.
Use following -
var formElements = document.getElementById("myFormId").elements;
for (var x = 0; x <= formElements.length - 1; x++)
{
if (formElements[x].value) {
formElements[x].setAttribute("value", formElements[x].value);
}
}
//Now you are ready to call innerHTML
myForm.myHiddenHtmlContent = myForm.innerHTML;
Hope this helps.
I have a form with id and multiple inputs with ids as well how i get a specific input inside a form tag.
<form action="#" method="post" id="frm-location">
<input type="text" name="txt-location" id="txt-location" />
</form>
what I want is to get the txt-location from the frm-location
You want a reference to the <input> element itself?
var form = document.getElementById('frm-location'),
input = form.getElementsByTagName('input');
// or, more specifically:
var form = document.getElementById('frm-location'),
input = form['txt-location'];
// if the name didn't have a dash in it, you could write this instead:
input = form.txtLocation;
// or, even better, since the input has an ID:
var input = document.getElementById('txt-location');
https://developer.mozilla.org/en/DOM/document.getElementByID
https://developer.mozilla.org/en/DOM/element.getElementsByTagName
https://developer.mozilla.org/en/HTML/element/form
https://developer.mozilla.org/en/DOM/element
You want the value of that element?
var input = /* whatever */,
inputValue = input.value;
https://developer.mozilla.org/en/DOM/HTMLInputElement
HTML is a static type markup language. As such, by itself there are not many options for accessing and processing data. There are a few general approaches for getting data from a web page. I'll keep the explainations generic, but they will translate to whatever platform/language you are using.
Access the data server side. This is accomplished by having the user submit the form. Once submitted, the values will be available via the query parameters. Various languages will have different methods to access the parameters.
Access the data client side. You can always use javascript to hook client side events like onblur, onchange, onfocus. Once your javascript fires, you can access various form elements with dom/js methods like getElementById/getElementByName -- Which would be able to reference your form elements but Id/Name respectively.
A Hybrid approach. AJAX is a mixture of the two approaches listed above. Client side code (javascript) makes async calls to the server. the server then processes the data in some manner and sends responses back to the client.
Hope this points you in the right direction. If you would like to clarify your question a bit, I can certainly try to cater the answer more to your specific case.