I have some text boxes in html which takes value from database based upon that value i want to hide that particular text box i.e if the value is null the text box disappear please help.Searched a lot but still confused as i want that function to run automatically so can't use on-click or on-change method. I have function that check for the value weather that value is null or not then i set that value to the text box. Found a method of changing the type of text box but not working.
readonly>
Hide
You could just do this. Im just setting the visibility to hidden to completely hide it.
<!DOCTYPE html>
<html>
<body>
<textarea id="myP">This is a textarea.</textarea>
<button type="button" onclick="myFunction()">Hide content of textarea</button>
<script>
function myFunction() {
document.getElementById("myP").style.visibility = "hidden";
}
</script>
</body>
</html>
Toggle
Now if you want to toggle you just add another function!
<!DOCTYPE html>
<html>
<body>
<textarea id="myP">This is a textarea.</textarea>
<button type="button" onclick="hide()">Hide content of textarea</button>
<button type="button" onclick="show()">Show content of textarea</button>
<script>
function hide() {
document.getElementById("myP").style.visibility = "hidden"
}
function show() {
document.getElementById("myP").style.visibility = "visible"
}
</script>
</body>
</html>
Related
I'm quite new to all this but I learned quite quickly, as it's really easy in my opinion. I'm trying to make a button hide a <p> tag that another button spawned. How can make the button (At the bottom of code) make the <p> tag disappear?
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>
You have to define the called function and using display:none hide the paragraph
function myFuction() {
document.getElementById('date_button').style.display = 'none'
}
<button type="button" onclick="document.getElementById('date_button').innerHTML = Date();document.getElementById('date_button').style.display='block'">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>
In your case you want to show it again so you need to set its innerHTML to ''. In your case if you will do style.display = 'none'. It will not show <p> again
function myFunction(){
document.getElementById('date_button').innerHTML = '';
}
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFunction()">Click this to hide date.</button>
Try this. I think this can help
function myFuction() {
document.getElementById('date_button').style.display = 'none';
}
In my js function, I want to change the attribute of certain elements inside a div, then I need to pass the html content of that div to another function. However, the html I obtained by using html() method is not changed. How can I get the html after the change? The code is shown below:
function copyDiv() {
//set the content of the textarea
$('#text_field').val("test");
//get the content of the textarea, the content is changed
alert($('#text_field').val());
//get the html content and set it to the new div
//However, this html is not changed
$('#newDiv').html( $('#myDiv').html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<label for="text_field">text: </label>
<textarea class="form-control" id="text_field"></textarea>
</div>
<div id='newDiv'>
</div>
<button type="button" onclick="copyDiv();">test</button>
I've modified your code to copy the value of the textarea to the new textarea after the HTML is duplicated, since this value isn't part of the DOM (and won't come along automatically).
I also removed the ID attribute from the textarea, since you can't have multiple elements on one page with the same ID, which your code was resulting in.
function copyDiv() {
$formControl = $('#myDiv .form-control');
//set the content of the textarea
$formControl.val("test");
//get the content of the textarea, the content is changed
alert($formControl.val());
//get the html content and set it to the new div
$('#newDiv').html( $('#myDiv').html());
$('#newDiv .form-control').val( $formControl.val() );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<label for="text_field">text: </label>
<textarea class="form-control" name="text_field"></textarea>
</div>
<div id='newDiv'>
</div>
<button type="button" onclick="copyDiv();">test</button>
Use jQuery.clone() instead of .html().
Replace this
$('#newDiv').html( $('#myDiv').html());
to be this
$('#newDiv').html( $('#myDiv').clone());
You can try the following code,in case you want to set the content inside the text area you should use this code $('#text_field').text("test"); and set the inner text of the text area.
In case you want to change the value attribute you can use this code $('#text_field').attr("value","test");.The rest of the code is the same.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
<label for="text_field">text: </label>
<textarea class="form-control" id="text_field"></textarea>
</div>
<div id='newDiv'>
</div>
<button type="button" onclick="copyDiv();">test</button>
<script>
function copyDiv() {
//set the content of the textarea
$('#text_field').text("test");
//to set the value attribute of th text area
$('#text_field').attr("value","test");
//get the content of the textarea, the content is changed
alert($('#text_field').text());
//get the html content and set it to the new div
//However, this html is not changed
$('#newDiv').html( $('#myDiv').html());
}
</script>
</body>
</html>
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 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
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
function changeTitle() {
if (document.getElementById('myText').value === "") {
document.getElementById('title').innerHTML = "Welcome to JavaScript";
alert("Enter a valid text title");
return;
} else {
document.getElementById('title').innerHTML = document.getElementById('myText').value;
}
}
</script>
</head>
<body>
<h1 id="title">Welcome to JavaScript</h1>
<p> Hello! This is my first JavaScript example on Microsoft Visual Studio Express Edition 2013.</p>
<p>
<input id="myText" type="text"/>
<input type="submit" onclick="changeTitle();" value="Click me!"/>
</p>
</body>
</html>
In this little example, I want to save the initial innerHTML of the h1 tag (id=title) to a variable after loading the page for the first time.
And then instead of the document.getElementById('title').innerHTML = 'Welcome to JavaScript' which is inside the if statement, I want to substitute that above mentioned variable with the phrase "Welcome to JavaScript".
My main intention is,
wwhenever some one leaves the textbox (id=myText) blank and click on the submit button, script should replace the innerHTML of the h1 tag (id=title) to the initial value that was there in the first page load and pop out that alert box. (Maybe user has changed the innerHTML of the h1 before, but the script should replace it to the initial value that was there in the first page load).
You can declare a hidden input.
<input type="hidden" id="initialTitle" value=""/>
and populate the hidden field value via body onload JS function like.
function setInitialTitle() { document.getElementById('initialTitle').value = document.getElementById('title').innerHTML }
<body onload="setInitialTitle()";>
And in changeTitle() function rewrite if block as.
document.getElementById('title').innerHTML = document.getElementById('initialTitle').value;
Just use onload="changeTitle()"
here is a demo: http://jsfiddle.net/nn007/cKk4U/1/
Try this instead of your body tag....
<body onload="changeTitle();">