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):
Related
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>
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>
If you run and submit the form below:
<!DOCTYPE html>
<html>
<body>
<form action="" method="POST">
First name:<br>
<input type="text" name="firstname" value="<?php if(isset($_POST['firstname'])){echo $_POST['firstname'];} ?>"
<br>
<input type="submit" value="Submit">
<input type="button" onclick="this.form.reset()" value="Clear Form">
</form>
</body>
</html>
Why does this.form.reset() not work when the form is pre-populated with the previously submitted value? The Clear Form button only works before submitting data. I've tried a number of similar approaches using jQuery as well that also only work before submitting the form, never after.
Since JavaScript runs after server-side code, I would expect the value from $_POST['firstname'] to be replaceable with JavaScript (in this case, an empty string).
As suggested by #Taplar reset will set value which was initially set while page load. Don't get confused with "Reset" form value Vs setting value to "" (Blank string)
Try this:
HTML:
<input type="text" id="fn" name="firstname" value="preloaded value" />
<input type="button" onclick="clear_form();" value="Clear Form">
JAVASCRIPT:
function clear_form() {
document.getElementById('fn').value = "";
}
I'm trying to find the simplest, non-expert-coder solution to displaying a search query.
I have a search form where onclick of the submit button it displays the form value underneath. This is the code:
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value" />
<div id="output"></div>
The page reloads on submit rather than going to another page.
Is there a simple way to manipulate my code do display the value in the output div automatically upon page load, rather than onclick?
So whatever was placed in the search box will automatically be displayed once the page loads after refresh or submit. If nothing was entered, then nothing will show.
There are many ways to achieve this, but this would do the job:
<input type="text" name="searchfield" id="searchfield" value="" />
<button onclick="document.getElementById('output').innerHTML = document.getElementById('searchfield').value">Submit</button>
<div id="output"></div>
And using PHP,
<input type="text" name="searchfield" id="searchfield" value="" />
<input type="submit" name="submit" id="submitSearch" value="Submit" />
<div id="output">
<?php
if($_GET['searchfield'])
echo $_GET['searchfield'];
?>
</div>
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/