Dynamic links with JavaScript - javascript

this is my problem.I have a JSP. I want to create a hyperlink dynamically with Javascript. I want to add the text from an input in HTML and use it to pass it as a parameter in my URL:
<form name="test">
<P>Enter search: <input type="text" name="searchName"><BR><BR>
<input type="Button" Value="" onclick="location.href='search.jsp?typeOfSearch=" + JavaScriptFunction( that returns the String from searchName ) ' " >
</P>
</FORM>
I cant seem to add a JS function to the "onclick" string. I ve tried with HREF from an anchor but I cant make it work. And I ve also tried just putting a JS function like this:
<a href="MyJSfunction( that returns the entire URL ) " > hyperlink</a>
and also it does not work. I ve tried like a million diferent things and I still cant pass dynamic parameters from one JSP to another.
Any help would be very good! ...

No JavaScript required. Just set your form method and action, use a submit button, and rename your input field:
<form name="test" method="GET" action="search.jsp">
<p>
Enter search: <input type="text" name="typeOfSearch" /><br/><br/>
<input type="Submit" Value="Go" />
</p>
</form>
Edit: But, if you are just curious how to do it with JavaScript, form elements all have a form property. Form elements are accessible from the form by name. So, you can use this.form.searchName.value to get the value of the searchName field in the same form as your button:
<input type="Button" Value=""
onclick="location.href='search.jsp?typeOfSearch=' + this.form.searchName.value;" />
Edit: The trouble you are having with your current code may be because you have the quotes wrong. Change the double quote at the end of typeOfSearch=" to a single quote: typeOfSearch='. Remove the single quote following your function call:
<input type="Button" value=""
onclick="location.href='search.jsp?typeOfSearch=' + JavaScriptFunction()" />

If you aren't too concerned about security, a simple HTML form should work.
<form action="Your URL Here">
<input type="text" value="" name="search" />
<input type="submit" value="search" />
</form>
http://jsfiddle.net/harveyramer/VfuT4/

Related

How can my user hit enter or click a button to submit and be redirected?

So I have this html form:
<form>
<input type="text" placeholder="Equation" id="equation_input" onsubmit="return button_click()"/>
<input class = "search_button" type="submit" id="search" onclick="button_click()" value="Search"/>
</form>
And I need to take the value the user entered in the equation input, add it to the beginning of a url, and then redirect the user to that newly formed url.
I tried this in my script tags:
function button_click() {
var url = `https://exampleurl.com?q=${document.getElementById('equation_input').value}`;
window.location.replace(url);
}
I've tried a couple things, but I'm not sure what's causing the problem so I don't know exactly what to try.
No need for any js to do this. It can be done by default form submit by naming the input and setting action and method attributes of the form.
Note that an <input> has no submit event, only a <form> does
<form method="GET" action="https://exampleurl.com">
<input type="text" placeholder="Equation" id="equation_input" name="q" required/>
<input class="search_button" type="submit" id="search" value="Search" />
</form>

Follow the link including the input value using two input and button tags

How to follow a link with a value in the input field without writing additional javascript, i.e. all code in html input and button tags?
Let's say there is a Google site for search and the search line is in input, so that when you click on the button, the link https://www.google.com/search?q= and the value of the input field, for example, text are substituted:
https://www.google.com/search?q=text
<input type="text" id="search" name="search" value="text">
<button onclick="code">Follow a search link with a value in input</button>
To do this without any JS you simply need to create a <form> element whose target is google.com/search.
The only things to note is that the action should be get and the input name needs to be q so that the correct querystring format is used when the form is submit. Try this:
<form action="https://www.google.com/search" method="get">
<input type="text" id="search" name="q" value="" required />
<button type="submit">Follow a search link with a value in input</button>
</form>
"It’s necessary without using a form, you can have js code"
Well, there is a js code that you can use to achieve this
<input type="text" id="search" name="search" value="text">
<button onclick="search()">Follow a search link with a value in input</button>
<script>
function search() {
const searchValue = document.getElementById('search').value
window.location.href = `https://www.google.com/search?q=${ searchValue }`
}
</script>
Form action should be set to the website you need, google in this case
Form method should be GET
Form fields must be named, like the parameters in the query string
Example:
<form action="https://www.google.com/search" method="GET">
<input type="search" placeholder="Search..." name="q" />
<input type="submit" value="serach"/>
</form>

Javascript: change element value by input textbox

I want to change THISVALUE using a textbox and submit button, which then refreshes the data on the page:
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" />
</form>
<div class="sm" data-type="static" data-symbol="THISVALUE" data-size="medium" data-logscale="on" data-chart-type="ca" data-timeframe="1y"></div>
<div class="sm" data-type="news" data-symbol="THISVALUE"></div>
Also: you press the button and it refreshes the page with the new data-symbol value. That value stays for the next visit to the page or until another search is performed.
Perhaps it would be better to do this in php?
You can also use the setAttribute() function
function showElements(){
document.getElementsByClassName('blah')[0].setAttribute("data-symbol",document.getElementById('search').value);
}
First off - data-symbol is not an element. It is an attribute and to be more specific - a data attribute.
Learn more about data attributes here: Using data attributes | MDN
I assume you want the data submitted in the form to get into the data-symbol attribute.
Checkout the working code snippet below:
function showElements(){
// just copy over the search text into the data attribute
document.getElementsByClassName('blah')[0].dataset.symbol = document.getElementById('search').value;
}
<div class="blah" data-type="cur" data-symbol="THISVALUE"></div>
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" /> <!-- no need to pass any arguments to this function, we can get data using element ID -->
</form>
Check the result using Developer Tools (I have used Chrome here):

javascript redirect isnt working

I have a form that takes a users input and redirects to a the window to a URL with their input appended to the end.
Here is my HTML
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" value="Search" onclick="searchWiki();" />
</form>
The javascript it runs
function searchWiki() {
alert("Form Works!");
var siteQuery = $('#query-string').val();
window.location.href = "http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery;
alert("SECOND MESSAGE");
}
The issue is that it does not redirect. It only appends the 'siteQuery' variable to the end of the current URL. I know its calling the javascript because I see both alerts. I'm not sure what I'm doing wrong here.
There reason is because you using type="submit", which submits and sends an GET header to the default action parameter (current page).
Change the type="submit" to type="button".
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="button" value="Search" onclick="searchWiki();" />
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
function searchWiki() {
alert("Form Works!");
var siteQuery = $('#query-string').val();
alert(siteQuery);
window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);
alert("SECOND MESSAGE");
}
</script>
I tried the code with type="submit" and it's alerting, but not redirecting, because the submit is prioritized before the window.location change, thats the reason it just appends a ?queryString=value to the current url.
If you change the type like showed in the code above, it's working perfectly.
The issue is due to the fact that you're actually submitting your form, and the redirection is lost as the form submission occurs first. There are two easy ways to fix this:
Change the type of the input from submit to button, OR
Stop the submission of the form by returning false from your function and changing the call of the function to onclick="return searchWiki();"
jsFiddle example (1)
jsFiddle example (2)
Can't you just use assign?
window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);
Check out: http://www.w3schools.com/js/js_window_location.asp
Use default action and method attributes instead
The HTML form element provides the mechanism for doing this out of the box.
<form id="wikiForm" action="http://wiki.voipinnovations.com/dosearchsite.action" method="GET">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" value="Search" />
</form>
But, if you must use javascript, make this change:
From:
window.location.href = "…";
To:
window.location.assign("…"); // or
window.location = "…"
This is because location.href is a read-only property and location.assign() is the proper method for setting the new location to be loaded. You may also directly assign a string to the location object:
Whenever a new value is assigned to the location object, a document
will be loaded using the URL as if location.assign() had been called
with the modified URL.
Source: MDN
Change input type=submit to type=button
http://plnkr.co/edit/w4U7Sbm3XSKN8j3zUFMe?p=preview
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="button" value="Search" onclick="searchWiki();" />
</form>

How to add a hidden list of IDs to a form in Javascript?

I've got a simple form in html:
<form action="" method="post">
<input id="title" name="title" size="30" type="text" value="">
<input type="submit" value="Save this stuff">
</form>
I also have a file upload on the page, which handles uploads using ajax and adds the files to a mongoDB. The file upload returns the mongoDB id of the file (for example 12345) and I want to add that id to the form as a hidden field so that the id is POSTed to the server upon submitting the form. Since the user can add multiple files though, I want to add a list of id's to the form.
I found how I can add one hidden field to a form from javascript, but this always handles a single field, not a field with multiple values. So I thought of adding a checkbox field to the form so that I can submit multiple values in one element, but it kinda feels like a hack.
Can anybody hint me in the right direction on how I can add a hidden list of values to a form using Javascript? All tips are welcome!
[EDIT]
In the end I would like the form to look something like this:
<form action="" method="post">
<input type="hidden" name="ids" value="[123, 534, 634, 938, 283, 293]">
<input id="title" name="title" size="30" type="text" value="">
<input type="submit" value="Save this stuff">
</form>
I am not sure if I understand your question correctly, so I may just be guessing here.
Try adding multiple hidden inputs with a name such as ids[] so that they will be posted to the server as an array.
Example:
<form action="" method="post">
<input type="hidden" name="ids[]" value="123">
<input type="hidden" name="ids[]" value="534">
<input type="hidden" name="ids[]" value="634">
<input type="hidden" name="ids[]" value="938">
<input type="hidden" name="ids[]" value="283">
<input type="hidden" name="ids[]" value="293">
<input type="submit" value="Save this stuff">
</form>
Why not simply concatenating all the ids into a string like so "123,456,890,..etc" and then adding them as a value to ids inupt. When you need them, simply split by ',' which would give you an array with ids?
Todo so only with javascript something like this should work
var elem = document.getElementById("ids");
elem.value = elem.value + "," + newId;
Do you mean that for each time the user clicks the 'upload' button you need to add a hidden field to the form?
Can you post the entire form, that should clear things up...
[Edit]
you could store the id's in an Array, everytime an id should be added to the hidden field's value you could do somthing like:
$('#ids').attr('value', idArray.join());
I'm just typing this out of the box so excuse any little errors

Categories

Resources