pressing button on one page highlights button on new page - javascript

So i have two pages and one has a list of buttons (page a) and the other page only has one(page b). Im looking for a way that if you press the button on page b it will take me to page a with the second button with .focus() already targeting it. here are some links for the code i have written this is for page a http://jsfiddle.net/posgarou/S96zw/
HTML page a
<button type="button" id="button0" onClick="reply_click(this.id)">button0</button><p></p>
<button type"button" id="button1" onClick="reply_click(this.id)">button1</button><p></p>
<button type"button" id="button2" onClick="reply_click(this.id)">button2</button><p></p>
<textarea id="myArea"></textarea>
<button type"button" id="button0" onClick="reply_click(this.id)">focus on button 0</button><p></p>
JAVASCRIPT (just used the same for both pages)
function reply_click(clicked_id){
var id= clicked_id;
var myTextArea = document.getElementById('myArea');
myTextArea.innerHTML += id;
document.getElementById(id).focus();
};
and this is for page b http://jsfiddle.net/posgarou/S96zw/
HTML
<body>
<textarea id="result"></textarea>
<button type="button" id="return" onClick="reply_click(this.id)">Return</button>
</body>

You should be able to do that using either a cookie or (better) local/sessionStorage.
On page b, you would include the following code:
sessionStorage["focusedButton"] = "buttonId";
and on page a, you would include the following:
if (sessionStorage["focusedButton"] != undefined) {
document.getElementById(sessionStorage["buttonId"]).focus();
}
For more info, see this earlier question.

Related

New tab won't open window.open html and js

Trying to code a button in HTML that opens a new tab to a website when clicked. However, when it is pressed, it just leads to a white page and nothing happens. Please give advice on what to do
HTML:
<input type="button" value="Save" onclick="editText()">
<script type="text/javascript" src="edit.js"></script>
<!-- This button is supposed to open a new tab to a website -->
<input type="button" value="Run" onclick="open()">
<script type="text/javascsript" src="edit.js"></script>
Javascript (edit.js) :
function editText() {
document.getElementById("status").innerHTML = "Saved!"
}
function open() {
window.open("https://www.google.com/?client=safari", _blank)
}
you should pass __blank as string
window.open("https://www.google.com/?client=safari", '_blank')

Input field open in new Tab with OnClick

I have an Input Field. When I click on this field it will add product into the Cart and moves on the Cart Page.
<input type="button" class="bgbutton"
value="Add to Shopping Cart" id="addtocart" name="addtocart"
onkeypress="window.event.cancelBubble=true;"
onclick="if (document.forms['form590'].onsubmit()) { document.forms['form590'].submit(); } return false;"
target="_blank">
I have given the tag target but unfortunately it does not work.
Kindly give me any Solution in JQuery / JavaScript etc.
SOLUTION
Simply I add target attribute in form tag. that's it.
$("form").attr("target", "_blank");
I resolved my issue.
Thanks
Simply you can use anchor tag instead of the button
<a
href="CART_URL" <-- here goes cart url you want to open in the new tab
class="bgbutton"
id="addtocart"
name="addtocart"
onkeypress="window.event.cancelBubble=true;"
onclick="document.forms['form590'].onsubmit() ? document.forms['form590'].submit() :; return false;"
target="_blank"
>Add to Shopping Cart</a>
To open a new tab you can use the following code.
<input type="button" class="bgbutton" value="Add to Shopping Cart" id="addtocart" name="addtocart" onkeypress="window.event.cancelBubble=true;" onclick="window.open('NewPage.aspx', 'NewPage');" >
To move between pages
<input type="button" class="bgbutton" value="Add to Shopping Cart" id="addtocart" name="addtocart" onkeypress="window.event.cancelBubble=true;" onclick="location.href = 'NewPage.aspx';" >
For more details you may want to refer to the following questions:
How to launch another aspx web page upon button click?
How can I make a button redirect my page to another page? [duplicate]
In JQuery you can use the following
<script>
$(document).ready(function () {
$(".bgbutton").click(function () {
window.location.href = "NewPage.aspx";
});
});
</script>
You can carry the variables to the other page through the URL like below.
<script>
$(document).ready(function () {
var name = "coder";
$(".bgbutton").click(function () {
window.location = 'NewPage.aspx?username=' + name;
});
});
</script>
To get the passed values to open up in new tab use the following
<script>
$(document).ready(function () {
var name = "coder";
$(".bgbutton").click(function () {
window.open('NewPage.aspx?username=' + name,"")
});
});
</script>
In order to understand how to retrieve a value from a URL, you might want to refer to the following question: Get url parameter jquery Or How to Get Query String Values In js

Why a new node added by appendChild diasppears after leaving the function?

Please look at the following code:
**page.html**:
<!DOCTYPE html>
<html>
<head>
<title> Playing with JavaScript </title>
<script src="myjs.js"> </script>
</head>
<body id="body">
<ul id="mylist">
<li> David </li>
<li> Aharon </li>
</ul>
<form>
<input type="text" name="user_input"> <br>
<button onclick="add_item(user_input.value)"> add_item </button>
</form>
</body>
</html>
**myjs.js**
function add_item(user_input) {
var new_li = document.createElement("li");
var new_text = document.createTextNode(user_input);
new_li.appendChild(new_text);
document.getElementById("mylist").appendChild(new_li);
}
This code creates a list of two names and displays a button and an input line. Once the user enters a new name in the input line and clicks the button, the new name is supposed to be added to the list.
It happens for a very short period of time and then the new element in the list disappears. Do you know what can I change in the code so the new element in the list will stay permanently?
I think it's because your form is submited and page is reload
add a type="button" at your button
Working Example
function add_item(user_input) {
var new_li = document.createElement("li");
var new_text = document.createTextNode(user_input);
new_li.appendChild(new_text);
document.getElementById("mylist").appendChild(new_li);
}
<form>
<input type="text" name="user_input"> <br>
<button type="button" onclick="add_item(user_input.value)"> add_item </button>
</form>
<ul id="mylist"></ul>
<button> element have 3 type :
submit : default type if no type are specified who submit a form
reset : who reset/clear input in a form
button : no specific action
I imagine the page is reloading because your button element is a submit button inside a form - when no type attribute is specified for a button it becomes a submit button by default. Your form doesn't have an action specified so submitting reloads the current page.
Add type="button" to the button.
That will mean that the button has no default behaviour and does only what the JS does explicitly.

What is the Dojo Equivalent to Button Click

In JavaScript - If I want to fire a button I do this -
<button type = 'button' id='myButton'>HiddenButton</button>
<script>
function callAutoClick(){
document.getElementById('myButton').click();
}
</script>
When I want to fire this button click, say, onChange of a text field -
<input type= 'text' onchange ='callAutoClick()'/>
I am not able to do the same in DOJO. I have found a solution using Javascript -
var divId = document.getElementById('myDivID');
divId.getElementsByTagName("button")[0].click();
But I don't want to have the dependency with the DivID. Is it possible to click a button just knowing the button's controlID. All I could find online were methods to define an OnClick() using dojo for a button and not clicking the button itself.
Plus I am designing the page with a BPM Tool so on including sections the DivID changes. When I open the page in FireBug I can see this -
<div id="div_1_1_2_1" class="Button CoachView CoachView_invisible CoachView_show" data-ibmbpm-layoutpreview="vertical" data-eventid="boundaryEvent_2" data-viewid="Hidden_Cancel" data-config="config23" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_2d5b8abc_ade1_4b8c_a9aa_dfc746e757d8.Button">
<button class="BPMButton BPMButtonBorder" type="button">Hidden_Cancel</button>
</div>
If you guys could suggest me a way to access the DOM object using the data-viewId also it would cater to my need.
Thanks in advance :)
You can use dojo/query:
function progClick() {
require(["dojo/query"], function(query) {
query("div[data-viewid=myViewId] > button").forEach(function(node) {
node.click();
});
});
}
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
</head>
<body class="claro">
<div id="everChangingId" data-viewid="myViewId">
<button type="button" onclick="alert('my button got clicked!')">My Button</button>
</div>
<hr/>
<button type="button" onclick="progClick()">Programatically Click My button</button>
</body>
</html>

How to replace html button with plain text

How do you replace a button with whatever words were on the button before? I was looking at an answer to another similar question, which said to use something like:
var myBtn = document.getElementById("buttonId"),
mySpan = document.createElement("span");
mySpan.innerHTML = myBtn.innerHTML ;
myBtn .parentNode.replaceChild(mySpan, myBtn);
but that had made what other buttons do change. Does anyone know another way to change a button to regular text?
I know that that code works just by itself, but it doesn't work with my code for some reason, so I don't really care what's wrong with that code. I'm just wondering if anyone knows another way to do it.
Thanks
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div id="myDiv">
<input type="button" value="Change into Text" id="submit" onClick="change()"> <!--button input that will trigger an event named change-->
</div>
</body>
</html>
<script type="text/javascript">
function change(){ //function to run when you click on the button...
var buttonValue = document.getElementById("submit").value; //stores the button value
document.getElementById("myDiv").innerHTML = buttonValue; // displays the value as a plain text inside "myDiv" - removing the button input entirely
}
</script>
EDIT:
I've just noticed you had multiple buttons in your page, which will make my previous example wrong. heres something that will make you work easier i think in case you will add extra buttons:
first heres the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li id="id_1"><input type="button" value="Change into Text" onClick="change(1)" id="button_1"></li>
<li id="id_2"><input type="button" value="Change into Text" onClick="change(2)" id="button_2"></li>
<li id="id_3"><input type="button" value="Change into Text" onClick="change(3)" id="button_3"></li>
</ul>
</body>
</html>
<script type="text/javascript">
var id;
function change(id){
var buttonValue = document.getElementById("button_"+id).value;
document.getElementById("id_"+id).innerHTML = buttonValue;
}
</script>
In the HTML part, you can create a list (li) of buttons if that's your layout...
each list will have its own id, in this case id_x that will be used later when you replace its content. each button calls a function change(id) while id is just a unique number for each button.
In the JS part, the change(id) gets the id of the button that was clicked, takes its value, and replaces the innerHTML (content) of the relative list items with a plain text.
Let me know if you still need any other help.
Seems that you are looking for another way to replace the buttons with plain text, well I'll show you the jQuery way.
HTML
<div>
<button id="btn1" class="change-button">A button with some text 1</button>
<button id="btn2" class="change-button">A button with some text 2</button>
<button id="btn3" class="change-button">A button with some text 3</button>
</div>
jQuery
// When we click a button with a "change-button" class
$(".change-button").on("click", function(event){
// First we get the ID value of the clicked button
// example: "btn2"
var buttonId = $(this).attr('id');
// Then we get the html value of the clicked button
// example: "A button with some text 2"
var buttonText = $(this).html();
// We use the function replaceWith, to replace the button to a <span>
// with the buttonText variable we have
$('#' + buttonId).replaceWith("<span>" + buttonText + "</span>");
});
As you can see, it's a lot more cleaner with jQuery. You should try it!
Here is the fiddle so you can test it.
<html>
<script>
function fun()
{
var a = document.getElementById("hello").value;
document.getElementById("ad").innerHTML = a;
}
</script>
<body>
<div id="ad">
<input type="button" value="hello" id="hello" onClick="fun()">
</div>
</body>
</html>
sorry, edited the wrong post

Categories

Resources