So I have an HTML web page that has a button and a textbox, so when the user inputs for example "Bread" and hits the button, it will bring them to Bread.html. If they type "Car" and hit the button, it brings them to Car.html. I am really confused on how to do it, so if anybody could help it would be greatly appreciated.
Here's the HTML:
<input id="Login" type="text" value="" /></center>
<center><button onclick="myFunction()">Login</button></center>
<center>
<script>
function myFunction() {
window.location.href = document.getElementById("Login")".html";
}
</script>
You’re close. It’s
document.getElementById("Login").value + ".html"
Your current code isn’t syntactically correct. You need at least an operator before the string literal. And document.getElementById("Login") is an HTMLInputElement. You need its value which is a string.
Related
First off, let me say I'm very much new to Javascript, and relatively clueless when it comes to the backend of the application I recently had developed. I'm working on the front-end design/minor functionality. So, if you could please keep that in mind with your answers, that'd be much appreciated!
I have an input field where a user can enter an address, and click submit to bring up a property results page.
<input type='text' class='main-search-address' id="main-search-address" placeholder="Enter Street Address">in Seattle, WA
<input value="Search" type="submit" class="submit" id='main-search'>
On the results page, there is a section where nearby addresses are displayed, via AJAX/js like so:
<span id="nearby_address">this gets replaced with an address</span>
For example
<span>1103 YAKIMA AVE S</span>
I'm looking for some javascript that will allow me to click the address in the span tag, have it paste into the input above, and automatically 'submit'-- all with one click.
Any help?
Thanks!
Change your search button code to:
<input value="Search" type="submit" name="submitSearch" class="submit" id='main-search'>
And your span code to:
<span id="nearby_address" onclick="FillSub()">
And then use this javascript code.
<script type="text/javascript">
function FillSub(){
var elem = document.getElementById("nearby_address").innerHTML;
var elem2 = document.getElementById("main-search-address");
elem2.value = elem;
document.NAME-OF-YOUR-FORM.submitSearch.click();
}
</script>
You should do a bit research before you ask a question next time. I was just curious how would I solve this myself, so I did. Edit the last value of the script, because you didn't post the name of your <form>.
I have an image on the page.
When clicked on that, i am prompting for input and
writing that value entered on the page.
I've tried the following and some other things around it:
<form name="FORM_1" action="post">
...
<input type=text name=x >
...
<p>Click on the image to get enter the value</p>
<a href="", onClick="x=prompt('Enter a number')">
<img src='data:image/gif;base64,R0lGODhgjjhgAAgIAAgACAgICAgMDAwP8AAAD/AP//AAAA//8A/wD//////ywAAAAAIAAgAAAEkfDJSau9OOvNu//gBABJWYYXaa6JNY6ays6tBIjuq+/8fZe3XG8YhNlcCSKvxkP2gLuWMaOKrl7JKZXGPXFGXRPYuxl3seTYQ0bTpSuweBhN1dnCSRPVFlzj33AnfX5hZXyBXFprfXY5LD6MRR5Nh0aKeylTl5gpR4Mxm5WfoIsYoaaDLy4gPmuuoyFEKLO0tREAOw==' alt="Dance?" pagespeed_url_hash="2096625741">
</a>
</form>
How do I put the value of x to the form field x? What is the best way to do this?
Way too new to javascript.
TIA.
EDIT:
I am getting the entered value properly-- when i replace
x=prompt('Enter a number')
in the code with
alert(prompt('Enter a number'))
the value is there.
I'm stuck is how to put that value to the form field
Try this:
onClick="x=prompt('Enter a number'); document.getElementsByName('x')[0].value=x;"
EDIT: The buttons in the corner will not be submitting the search. The go button would still be clicked to submit it.
So, I'm working on a little project when I'm bored at work. It isn't meant to be anything serious and I'm teaching a bit of javascript, jquery, html and css as I go (Thanks to you fine folks of course). This part I can't figure out, or find anything about.
My page is: http://afrohorse.netau.net/
As of right now, I have a form that when you type in, and press go, it will search google. I plan on having it so I can click one of four buttons (located on each corner of the page) and it will change where it searches when you submit. Here is the code for my form.
<form onsubmit="location.href='https://www.google.ca/#q=' + document.getElementById('myInput').value; return false;">
<input type="text" id="myInput" class="search left" value="" autofocus/>
<button class="go"><span>GO!</span></button>
</form>
So, Ideally, I would like to have it so "https://www.google.ca/#q=" would change to "http://www.youtube.com/results?search_query=" after clicking the youtube button. Is this doable? If so how would be the easiest way?
Thanks. :)
You're actually better off removing the form and just using a button. You could do what you have above like this...
HTML
<input type="text" id="myInput" class="search left" value="" autofocus/>
<button class="go" id="search-button">GO!</button>
Javascript
$(function() {
$("#search-button").on("click", function() {
var query = $("#myInput").val();
// if using Google search...
location.href = "https://www.google.ca/#q=" + query;
// if using Youtube search...
location.href = "http://www.youtube.com/results?search_query=" + query;
});
});
I would do it diffirently. I would give the button/ an ID. If this button/ is clicked i would check what button, so youtube or google. Then get the input and send the user to the correct link. so something like this:
google it
youtube it
<input type="text" id="input_search" placeholder="What are you searching for?">
the JS:
$('btn_google').addEvent("click", function(e){
e.preventDefault();
location.href='http://www.google.ca/#q='.$('input_search').value;
});
$('btn_youtube').addEvent("click", function(e){
e.preventDefault();
location.href='http://www.youtube.ca/results?search_query='.$('input_search').value;
});
btw i use mootools :) so the events are abit diffirent in jquery
I'm having a strange behaviour with this code:
<script type="text/javascript">
function get()
{
alert("gggg");
jQuery.get (
"http://localhost:8080/c/portal/json_service",
{
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : document.getElementById("nombre")
}
);
}
</script>
<div>
<form>
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="button" value="Submit" onClick="javascript:get()"/>
</form>
</div>
Liferay portal gets blocked when the button "Submit" is pressed. The pop-up with the message "gggg" is showed, but after click ok on it, the page becomes blocked.
If I remove the line 'param : document.getElementById("nombre")', it doesn't block.
Can anyone explain me where is the error, or the reason of this behaviour?
Thanks in advance,
Rafa
The problem is that you're trying to pass an entire DOM element as the value for param, which jQuery isn't going to like. What type of element has ID nombre, and what property from that element do you want? If it's some kind of input, you likely want the value property, so you'd do:
param : document.getElementById("nombre").value
Updated Answer:
Thinking this through a little more, you should probably do this in a different way altogether. You're sending the data when the user clicks on the submit button, but remember if a user hits enter while typing in the input text box the form will submit but your code will not catch that.
A more robust solution would be to do it this way instead:
<div>
<form id="nombre_search">
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="submit" value="Submit"/>
</form>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#nombre_search").submit(function(){
$.get("http://localhost:8080/c/portal/json_service", {
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : $("#nombre").val()
});
return false;
});
});
</script>
Changes to your code:
Added an id to the form.
Made the submit button a submit button instead of just a button.
Placed code inside $(document).ready block.
Code runs when form is submitted not when button is clicked.
Hope this helps,
Sandro
Basically there is an empty box with a submit button directly underneath. The empty box might have a default picture loaded to begin with. When a user clicks the submit button, how can I display a different picture (in place of the default) based on a certain time of the day. I don't really need an answer regarding the checkTime logic, but I would appreciate some help with regards to the submit button being able to change a picture in the same spot. Thanks guys.
if you just have a simple button, you can add an onclick event to it:
Example 1:
<input type="button" onclick="changeImage()" />
and your changeImage() function will have the logic to follow
Example 2:
<input type="button" id="submitButton" value="Button"/>
Javascript -
document.getElementById("submitButton").onclick = function () {
// run the logic
}
images can be switched using the src property
javascript -
document.getElementById("theImage").src = "newImage.jpg";
Since you are talking about a "Submit" button I assume it is within a form. Is submitting the form supposed to have some other effect? If not, use type="button" rather than type="submit". Either way, here is some basic code to get you started:
<img id="thePicture" src="...">
<input type="submit" value="Go" onclick="return changePicture();">
<script>
function changePicture() {
// your logic here to set which picture to use
var newPicture = "yourpath/images/img1.jpg";
document.getElementById("thePicture").src = newPicture;
// return false to stop the form submitting, otherwise
return true;
}
</script>