JS Function to create link - how? - javascript

I have the following code in my html
<input type="image" src=images/more.png onClick="showInviteInfo() />
When clicked it brings up a pop up box via this js function.
function showInviteInfo(){
document.getElementById("divsignup").style.visibility = "visible";
document.getElementById("txtemail").focus();
}
But I no longer want it to bring up pop up rather when clicked take user to a new page. What do I need to change? Probably easy, but I am a newbie.

Use
window.location = "new location path";
in your function.
window.location
If you can use an anchor tag then it would be like this.
Click here to navigate to new page

change
<input type="image" src=images/more.png onClick="showInviteInfo() />
to
<img src="images/more.png" />
EDIT: sorry, the editor was giving me grief with the second line

Related

How edit elements of existing link and open the edited version of the link? (Without saving it localy)

I want to build a html website_A where you can type some data and then open another website_B with a button click and this website_B would be changed according to the text we typed in the first website.
For example we have a website_B example.com with a
<h1 id="xxx">
We save the link in our website_A as a string, insert an input field and button with onClick function:
<input type="text" id="text_id" name="text_name"><br><br>
<input type="submit" value="Open Link!" onclick="openLink()">
<script>
var link = 'example.com';
function openLink() {
link.getElementById("xxx").innerHTML = document.getElementById("text_id").text;
window.open(link);
</script>
}
It should open the link with the changed h1.
Somehow it doesn't work, I don't know the javascript much, not even sure if I can achieve it with js or I have to use some othere languages. I googled a lot and didn't find anything, most information is about changing files locally or changing just the href link, not its elements.
I appreciate your help!

Return to the previous page with inputs

Really unsure about the title question. Feel free to suggest. :)
Hi guys! I created a very simple code, that would represent my web.
Here is my home page:
<html>
<script type="text/javascript">
function getPage(linkPage,variables,divName){
$.get(linkPage + "?" + variables,function(data){$(divName).html(data);});
}
function show(){
//functionName("path","data","idName");
getPage("AjaxPages/hi.php","","#container");
}
</script>
<body>
<div id="container">
First Name<input type="text" />
<input type="button" value="next" onClick="show();"/>
</div>
</body>
</html>
Basically, it ask for information, Name for example. When the button NEXT is click it will call a javascript function that will call a certain page or the NEXT PAGE that will load on the div with the Id Container.
NEXT PAGE
On the next page, it will then ask another question, like Last Name for example. But then, I want to go back to the previous page to make same changes.
HERE is the code:
<script type="text/javascript">
function show(){
ajaxgetdata("index.php","","#container1");
}
</script>
<div id="container">
Last Name<input type="text" />
what to make changes on the previous page?<input type="button" value="back" onClick="show();"/>
</div>
When button back is clicked, it will just call the previous page, but will not include the text that you input on the textbox.
I know that it happens because it just call the page..
Is there a way? that when back button is clicked, it will reload the previous page, with all the contents/inputs.
:) :( :'( :/ :|
Don't load any additional pages. Do everything with AJAX.
If you don't want, some server-side script may help :D
If you can use HTML5 in your site, you can take a look at the History API which can handle navigation and fires a "popstate" event, to which you can pass data.
There's a good example here:
http://diveintohtml5.info/history.html
You could do something like this:
window.addEventListener("popstate", function(e) {
if(!e.state || !e.state.firstName) {
return;
}
document.getElementById('firstName').value = e.state.firstName;
});
That even will trigger everytime you go back or forward, and you could just organize some function or array with the information you need.
Hope it helps.

how to give a href inside the button tag in html

i need to open two links when a button is clicked in the html page. I figured it as by calling onclick function and creating anchor tag using createElement in Javascript. But how to include another link?? Is there a way to give a href in button tag??
You can simply do that with javascript
window.open(url1);
window.open(url2);
And if you want to open one of that links in curren window you can replace window.open by this
window.location = url1;
<input type="button" value="Double Clicker" onclick="window.open("http://www.google.com/"); window.open("http://www.youtube.com/");" />
see this link for further information,
You need to use a javascript event to make the page go somewhere
<input type="button" name="button1" value="Go To Url" onClick="window.navigate('URL')">
You can also use
location.href=" ";`
Try to see what the location object can do => http://www.w3schools.com/jsref/obj_location.asp
You should be able to load two tab.
why dont u use bootstrap
<a href="#" class="btn btn-default">
It displays a button with link going to what is mentioned in href

onclick on a image to navigate to another page using Javascript

I am getting warmed up with Javascript so I am trying something on my own. I am searching for a onclick function, where I have thumbnail images in my index.html page, and whenever a user clicks the image he will be redirected to a new page where the image is again displayed along with some information about it. Right now I am doing it using just plain HTML.
I want to use javascript to navigate to the page corresponding to the image the user has clicked. Is that possible to do using onclick? I have more than 10 images on my webpage and each time a user clicks an image I want to get the id of that image and redirect it to the new page. The new page is named after the image name.
For ex:
image name: bottle.jpg (residing in the images folder)
redirect page name: bottle.html (residing in the main folder)
<a href="bottle.html" id="bottle" ><img src="../images/bottle.jpg" alt="bottle" class="thumbnails" /></a>
Any valuable information will be appreciated!
If it is somewhere asked in this forum, it would be helpful if somebody can give me that link.
Thanks,
Raaks
maybe this is what u want?
<a href="#" id="bottle" onclick="document.location=this.id+'.html';return false;" >
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" />
</a>
edit: keep in mind that anyone who does not have javascript enabled will not be able to navaigate to the image page....
Because it makes these things so easy, you could consider using a JavaScript library like jQuery to do this:
<script>
$(document).ready(function() {
$('img.thumbnail').click(function() {
window.location.href = this.id + '.html';
});
});
</script>
Basically, it attaches an onClick event to all images with class thumbnail to redirect to the corresponding HTML page (id + .html). Then you only need the images in your HTML (without the a elements), like this:
<img src="bottle.jpg" alt="bottle" class="thumbnail" id="bottle" />
<img src="glass.jpg" alt="glass" class="thumbnail" id="glass" />
I'd set up your HTML like so:
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" />
Then use the following code:
<script>
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
var image = images[i];
image.onclick = function(event) {
window.location.href = this.id + '.html';
};
}
</script>
That assigns an onclick event handler to every image on the page (this may not be what you want, you can limit it further if necessary) that changes the current page to the value of the images id attribute plus the .html extension. It's essentially the pure Javascript implementation of #JanPöschko's jQuery answer.
You can define a a click function and then set the onclick attribute for the element.
function imageClick(url) {
window.location = url;
}
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" onclick="imageClick('../images/bottle.html')" />
This approach lets you get rid of the surrounding <a> element. If you want to keep it, then define the onclick attribute on <a> instead of on <img>.

How to assign value of a text box to Grails link tag's id?

I have a textbox on my page that ppl can input numbers, by clicking the button "submit" I want it to be the same as clicking the id in the list, which would redirect to the show page. How can I do that?
<g:link action="show" id="<g:javascript>document.getElementById('TextBox').value()</g:javascript>">
<input type="button" class="bigbuttonstyle" value="Submit" name="Submit" /></div>
</g:link>
Above won't work... but that's something i want... please advise. Thanks!!
That won't work because when the link tag renders HTML, it uses the ID attribute to build the URL. I would just use some behavioral JavaScript to bind a click event to your button that would issue a redirect for you. So using something like jQuery it would look a little like this...
<button id='show-btn'>Show</button>
$(function() {
$('#show-btn').click(function() {
window.location = '/path/to/show/' + $('#TextBox').val();
});
});
What's nice about this also is that you get to remove inline JavaScript out of your markup which is becoming an anti-pattern.

Categories