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>
Related
I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?
First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>
Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}
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
I have the following code, which works fine:
<input type="button" name="btnHello" value="Hello" onclick="Test();"/>
and here is the JS function:
function Test() {
window.location.href = "Page2.aspx";
}
When I click my Hello button, it redirects to Page2.aspx like expected. But when I change my button to an image button:
<input type="image" src="images/myimage.jpg" name="btnHello" onclick="Test();"/>
It no longer works. The page posts back, but its more like a refresh. I can put an alert in the JS function to see that it is getting called, but I'm not sure why the redirect doesn't work? Has anyone ever experienced this?
I know its probably something stupid, but I'm stumped.
Many thanks in advance!
You need to return false from the event handler to prevent the default action.
However, since you don't want it to postback in the first place, you might as well use an ordinary <img /> instead of an <input />.
The redirect is getting cancelled because you are doing a postback. Add return false; after the function test();
e.g
onclick="test();return false;"
Try using an img tag:
<img src="images/myimage.jpg" name="btnHello" onclick="Test();"/>
input type image does not have a onclick event. You need to use the img tag instead.
<img onclick="Test();">
I've got a form on a page where the user types something in and then a result is returned and displayed on the page. Is it possible for me to have a button that will both, clear the search results and the form simultaneously?
I know that you can use the <input type="reset" value="Reset"/> button on the form to reset the form and also use the following code, to reload the page.
<input type="button" value="Clear Results" onClick="window.location.reload()">
Is it possible to have the button do both things i.e. clear the search results and reset the form? Can it be done using JavaScript, if so how?
Thanks
If you want the functionality of both of the snippets you posted, you can simply combine them.
<input type="reset" value="Reset" onClick="window.location.reload()">
I'm a fan of #MikeyHogarth's suggestion since it's called regardless of how the page is refreshed. This is one of those rare times that I find straight javascript to be simpler than jquery so I just wanted to add the code for that.
$(document).ready(function () {
resetForms();
});
function resetForms() {
document.forms['myFormName'].reset();
}
This uses the form name attribute, and if you'd prefer using the form id attribute use this instead:
document.getElementById('myFormId').reset();
using JQuery, do something like this on the page;
$(document).ready(function () {
resetForms();
});
function resetForms() {
for (i = 0; i < document.forms.length; i++) {
document.forms[i].reset();
}
}
and then just use your second input, forms will auto refresh when the page loads back up.
you can simply redirect page to current location with this code:
$('[data-command="reset"]').click(function () {
window.location.href = window.location.href;
}
<input type="button" value="Clear Results" data-command="reset">
I have a piece of javascript which is initialized on the click of a button, and takes information from a form input to perform geolocation etc based on the data.
The issue I am having is that I have to place the button outside of the form in the html, otherwise when it is clicked, no javascript is fired!
This of course means that my users cannot hit enter in the offending text box (as they lose their data!)
Is there a way I can stop this from happening and be able to include the button in the form?
The HTML is:
<form>
<input id="addyInput" placeholder="Don't forget postcode!" size="25">
</form>
<button id="start" onclick="initialize()">Find Me!</button>
I can also include some of the javascript if needs be! (although that works fine!) :)
Thanks!
use :
<button id="start" onclick="return initialize()">Find Me!</button>
and then make sure initialize() returns false.