How to pass a textbox value to another jsp page via href - javascript

I want to pass a data that has been entered in a text box
Source page : page1.jsp Target page : page2.jsp
page1.jsp code
<input type="text" id="date" autocomplete="off" >
<br>
<button onclick='window.top.location.href ="page2.jsp?id=document.getElementByID('date').value">
onclick='window.top.location.href ="flush.jsp?id="document.getElementById('datepicker').value"'>
in what way can i pass the value entered in the text box through via href attribute ??

You have to concatenate the string in javascript. I think you have mix up javascript code with JSP script i.e. page2.jsp?id=<%=date%> (this is JSP scripting)
<button onclick='window.top.location.href="page2.jsp?id=" + document.getElementById("date").value;'>Submit</button>

Try using this--
<input type="text" id="date" autocomplete="off" value='ABC'/>
<br>
<button onclick='window.location ="page2.jsp?d="+document.getElementById("date").value'>Click me </button>
Heres the working Fiddle

Related

How to get form input to appear as query params when div is click instead of button

I have an html form that is more or less the following
<form action="/results">
<input name="q" type="text">
<div>See results</div>
</form>
If I type something into the form, such as "my search" and press "enter" I'll be taken to the Results page with something like this: mywebsite.com/results?q=my+search. My problem is that I would like to get the same behavior when someone clicks "See results," which currently takes them to the Results page but without the params. I know using <button> instead of <div> would get me the results I need, but in this situation using <button> is not practical due to how all of the templates have been written.
Concatenate ?q=searchstring to the URL when assigning to window.location.
document.querySelector("#results").addEventListener("click", function() {
let param = document.querySelector([name=q]).value;
let url = `/results?q=${encodeURIComponent(param)}`;
window.location = url;
}
<form action="/results">
<input name="q" type="text">
<div id="results">See results</div>
</form>
If you can use input type submit, try wrapping the it in the div as in this way:
<form action="/results">
<input name="q" type="text">
<div><input type="submit" value="See results" /></div>
</form>
If this not works for you, alternatively you can handle it using javascript as #Barmar answered above.

How to reference an html document with a form to another html document to create a table out of that?

I need a little bit of help. I'm stuck at making the form information I have on my first html document show up on the tables in the second html document.
Any help would really feel good right now.
I'm not sure exactly what your question means, but if you are asking about including an html inside another html, check this link: include html in another html
Edit:
If you have no option to use server-side programming, you could use the query string.
In the form, add a method="GET" attribute:
<form action="display.html" method="GET">
<input type="text" name="name" />
<input type="text" name="phone" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the name, phone value as a parameter. like:
http://www.example.com/display.html?name=XYZ&phone=98745654
You should then be able to parse the query string - which will contain the parameters value - from JavaScript, using the window.location.search value:
// from display.html
<p id= 'hi' ></p>
<script>
document.getElementById("hi").innerHTML = window.location.search;
</script>
this should help you to start what you are trying to do.

Calling js function from the anchor tag href url

I have a search box with search button. When user enters the text in search box and click on search button, it should redirect the url by passing inputed text in search box as an parameter in url.
#input tag for search box
<input type="search" placeholder="search" class="search_3">
<a href="https:.........?searchname=">
#input tag for search button
<input type="submit" class="submit_3" value="Search"/>
</a>
i have to use the inputed text for searchname parameter in the anchor tag url.
How can i achieve this?
I would try to HTML tag things properly, to avoid useless JS.
<form method="GET" action="https:...">
<input type="text" name="searchname"/>
<button type="submit">Go!</button>
</form>
You can use form attribute if the input is outside the form tag (see HTML living spec https://html.spec.whatwg.org/multipage/forms.html#the-input-element )
Just call onlclick your js method and get the search field value and redirect using js code.You can try like this :
<input type="search" placeholder="search" class="search_3" id="search_3">
<button name="redirect" onClick="redirecturl()" class="submit_3" value="Search">
<script type="text/javascript">
function redirecturl()
{
window.location.href = "http://www.example.com/?searchname="+document.getElementById("search_3").value;
}
</script>

prefill text field using javascript

I have a simple javascript that I can't seem to get to work.
So what I'm trying to accomplish is a text field on my homepage that the user can type in(just 1 field). Submit it and it'll take them to another page with a text field that is pre filled with what they already typed in the first field.
<script type="text/javascript">
function go_page(page)
{
document.location.href = '/?page_id=11' + '#addressInput=' + addressInput;
}
</script>
When i fill in the 'addressInput' (for this example, lets say '90501')..
Currently, the url comes up as www.mywebsite.com/?addressInput=90501
Goal, i want it to be.. www.mywebsite.com/?page_id=11#addressInput=90501
This 'goal url' works when i type it in the address bar. I just need to figure out how to do that function automatically for the user..based on what they input in the first text field.
...any ideas?
EDIT 1
Here is the form code..
<form method="get" onsubmit=" go_page(this.page.value); return false">
<input type="text" name="addressInput" id="addressInput" size="30" />
<input type="submit" value="" class="submitButton" />
</form>
EDIT 2
just more info..
The user will be on the homepage and type in an 'address/zip code' in the text field and click submit.
Which will then take them to the locations page(page_id=11) that has a text field that's pre-populated with the 'address/zip' the user typed in on the homepage.
You could try grabbing the element in the form like this
<form method="get" onsubmit="go_page(this.addressInput); return false">
<input type="text" name="addressInput" id="addressInput" size="30" />
<input type="submit" value="" class="submitButton" />
</form>
And extracting the value of addressInput inside your function like this
function go_page(elem) {
var addressInput = elem.value;
window.location.href = "/?page_id=11#addressInput"+addressInput;
}
In Wordpress that should navigate you to the page id and add the hash to the end
Its not clear from the limited information provided, but have you stopped the default form submission behavior? Maybe the form if being submitted before your javascript is called. Capture the form submission and return:false or event.preventDefault() to stop it continuing with the submission.
If you want to have # in the URL, you have to encode it so instead of using # use %23. And do not forget that for separating values in URL you have to use &.
document.location.href = '/?page_id=11' + '%23addressInput=' + addressInput;
Update
Instead of document.location.href use window.location

rich editor - get value

I am trying to get the value of dojo editor and append it to the hidden input. This code:
onClick="dojo.byId('editorContent').value = this.getValue()
works correctly if i put it in the div of the editor. However i want to update before send the form the hidden input. I already tried with onclick and onsubmit but didn't works.
Probably this is wrong :
content.getValue()
code
<form>
<div id="descricao_oferta">
<input type="hidden" name="item[editorContent]" id='editorContent' />
<div dojoType="dijit.Editor" id="content" height='200px'">
<?php echo isset($arr['conteudo']) ? $arr['conteudo'] : "Descrição";?>
</div>
<form>
<input id="send" name="send" type="submit" value="Registo" onClick="dojo.byId('editorContent').value = content.getValue()"/>
</form>
How can i update the hidden input with the content of the editor when submit the form ?
similar problem
source
this is the correct way:
onClick="dojo.byId('editorContent').value = dijit.byId('content').get('value')"
Shouldn't it be dijit.Editor.get('value'); to get the value from the editor?
http://dojotoolkit.org/documentation/tutorials/1.6/editor/

Categories