Hello i am having some technical issues with my HTML code and javascript so to begin.
i have the <P id="One">and i need once you click the All courses input to redirect you to another page and completly disapear himself using javascript.
<p id="One" >
<input type="button" onclick="allCourses()" value="All Courses" />
<input type="button" onclick="" value="1st Year" />
</p>
and the Javascript i am using is
function allCourses(){
document.getElementById("One").innerHTML="";
var input = document.createElement('button');
var value = document.createTextNode("Go to Google");
input.appendChild(value);
//input.type = "button";
//input.onclick="location.href = 'www.yoursite.com';
//input.value="Go to Google";
var element = document.getElementById("One");
element.appendChild(input);
}
function Google(){
location.href = 'www.yoursite.com';
}
The button works like charm but as soon i attack the onclick attr it doesn't do nothing!
Related
Hi i would like few textboxes disabled when a textbox contains a specific text and i click a button.
Here is what I have:
button:
<div id="itemRows1">
<label ></label><input type="hidden" name="add_name1" /><input onclick="addRow1(this.form); " type="button" id="dodaj1" value="Dodaj tip droge in količino" class="btn btn-primary" />
</div>
<br>
</div>
script:
<script>
var dis1 = document.getElementById("preiskavoopr1");
dis1.onchange = function () {
if (this.value == "SKP" ) {
document.getElementById("dolgnaziv").disabled = true;
var x = document.getElementsByClassName("form-control1");
var i = 0;
for (i = 0; i < x.length; i++) {
x[i].disabled = true;
}
} else {
document.getElementById("dolgnaziv").disabled = false;
}
}
</script>
The button is adding more fields dinamicaly and is working as expected.
The text box with the id preiskavoopr1 is a drop down with 2 values and is OK.
When i select a value SKP in the dropdown the text boxes with ClassName("form-control1"); has to become disabled and that is working. But when i click on the button 2 more text boxes with the ClassName("form-control1"); appears not disabled but they should be.
Hope i explained well enough.
It looks like you are trying to add onclick methods to <input> elements which disguised into a button because you added class="btn btn-primary" to it.
Change your button to
<button onclick="addRow()" class="btn btn-primary">Button Text</button>
I would like to clear a text box when a radio button above the text box is selected.
I have tried this:
function clearThis(target){
target = document.getElementById(target);
target.value = "";
}
<input type="radio" name="not_req" id="clear_req" value=""
title="Click here to clear the No Auth need flag"><span id="clear" onclick = 'clearThis("claims")' >Clear
The box I would like to clear is
<input type="text" size="5" name="auth_for" id="claims" value="{$prior_auth->get_auth_for()}" title="Set the number of times no auth can be used">
Took most of this from http://jsfiddle.net/BMrUb/ but I can see that the example is clearing the adjacent text box. I would like to clear a text box not adjacent to the radio button.
As Gerald said place your onclick="" in the <input type="radio" ... >, not in the <span>.
The problem is that it's the sibling input element that needs its value clearing, not the span, even though you only want it to clear when people click on the span element. So the example code below does this. You're also best off decoupling your javascript from your HTML by using event listeners (and not using the old-fashioned onclick attribute).
var clearSpanEl = document.getElementById("clear");
clearSpanEl.addEventListener("click", function(e) {
var inputEl = e.target.previousElementSibling;
inputEl.value = "";
}, false);
<input type="text" name="search" id="search" value="I can be cleared" />
<span id="clear">Clear results</span>
I've forked your JSFiddle here, so you can see it working.
I got a form with a list of games I'm asking people to add that they've played.
It says "Add Game" with a hyperlink which has an event handler onClick which directs to a JavaScript function - it only does this once but I want it to do this as many times as the user decides to add games - without any limits - how can this be done?
Here are the screen shot images followed by the code:
http://i59.tinypic.com/16jk1nt.png
http://i59.tinypic.com/2zzntoo.png
Here's the JavaScript code for the above images:
function addFields1(){
var container = document.getElementById("container1");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
container.appendChild(document.createTextNode("Add Game"));
var input = document.createElement("input");
input.type = "text";
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
Here's the HTML form for the above JavaScript code:
<input type="text" id="member1" name="member1" value="">Add Game<br />
Add Game
<div id="container1"/>
When I click the "Add Game" hyperlink, it enters a blank input box only once while I want it to enter it as many times as I keep on clicking the "Add Game" hyper link. Also, I would like the "Add Game" hyper link to replicate itself every time I click that link.
<html>
<script>
function addFields1(){
var container = document.getElementById("container1");
//remove button
var addGameButton = document.getElementById("filldetails");
container.removeChild(addGameButton);
//create and insert input/text
var input = document.createElement("input");
input.type = "text";
container.appendChild(input);
container.appendChild(document.createTextNode("Add Game"));
container.appendChild(document.createElement("br"));
//create and insert button
addGameButton = document.createElement("a");
addGameButton.id="filldetails"
addGameButton.href="#";
addGameButton.onclick=function(){addFields1();};
addGameButton.text="Add Game";
container.appendChild(addGameButton);
}
</script>
<body>
<form>
<div id="container1">
<input type="text" id="member1" name="member1" value="">Add Game<br />
Add Game
</div>
</form>
</body>
</html>
Html input field is inside anchor tag like so ..
<a id="brand" onclick="myFunction()" class="brand" ><input id="mytext" onclick="myFunction()" type="hidden" value="Anchor Title">Anchor Title</a>
Javascript uses set attribute
<script>
function myFunction() {
document.getElementById("brand").innerHTML = "";
document.getElementById("mytext").setAttribute("type", "text");
var elem = document.getElementById("mytext");
elem.value = "Edit Title";
document.getElementById("brand").innerHTML = elem.value;
}
</script>
ACTUAL RESULTS
Anchor title is cleared on click
But, the input field is still hidden
Wanting To Achieve
Anchor title cleared on click
Input text field appears
User inputs text
Text from input becomes anchor title
Input field becomes hidden again
I think you should remove the line:
document.getElementById("brand").innerHTML = "";
(I don't know but maybe you delete the input element by that.)
Notice that when you do document.getElementById("brand").innerHTML = ""; you are deleting all things there are between <a id="brand"> and </a>, in this case the <input> line.
My solution:
<html>
<script>
function myFunction1() {
var elem1 = document.getElementById("mytext1")
elem1.setAttribute("type", "text");
elem1.value="Edit Title";
document.getElementById("mytext2").innerHTML = "";
}
function myFunction2() {
var elem1 = document.getElementById("mytext1")
elem1.setAttribute("type", "hidden");
document.getElementById("mytext2").innerHTML = elem1.value;
}
</script>
<a id="brand" onclick="myFunction1()" class="brand" >
<input id="mytext1" onchange="myFunction2()" type="hidden" value="Anchor Title">
<span id="mytext2">Anchor Title</span>
</a>
</html>
Im writing a game of sorts that presents you with multiple options. Once you choose your option, all buttons, including your selection, should disappear and you move on to the next round. I have a script that allows this to be done, however for each round of buttons I would have to rewrite it to adhere to the new set of buttons. To save from having to repeat myself each time, I'm trying to get a universal script that will accomplish this
HTML
<input type="button" class="btn" id="getUp" name="answer" value="get up" onclick="this.style.display='none'; hideSleepIn(); " />
<input type="button" class="btn" id="sleepIn" name="answer" value="sleep in" onclick="this.style.display='none'; hideGetUp();" />
JavaScript
var hidden = false;
var click = onClick;
function hideSleepIn()
{
hidden = !hidden;
if(getUp === click)
{
document.getElementById('getUp').style.visibility = 'visible';
}
else
{
document.getElementById('sleepIn').style.visibility = 'hidden';
}
}
Try replacing
document.getElementById('getUp').style.visibility = 'visible';
with this
document.getElementById("getUp").style.display = 'none';
I worked the current script I was using to hide the divs, to also hide/ show the buttons on the page
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
<input type="button" class="unhidden" id="firstPath" value="get up" onclick="unhide('getUpText'); unhide('firstPath2'); unhide('firstPath');" />
text
<input type="button" class="unhidden" id="firstPath2" value="sleep in" onclick="unhide('sleepInText'); unhide('firstPath'); unhide('firstPath2');" />
text