How to Replace and Hide Div Contents Using Javascript

Can you help me to make a javascript function to: (1) show div contents in showarea when the two buttons are clicked, (2) replace content in the showarea if it contains show1/show2 (3) hide the content.

Scenario: When the button SUB button is clicked, it'll show Show1's contents to the ShowArea, but when the DOM button is clicked, it'll replace the contents of ShowArea which is Show1 and display the contents of Show2. But when you click again the DOM button, it will now hide the ShowArea and it's border.

Here is the sample code:

<div id="credentials"> <div id="user"> <button id="button" type="button" onclick="Open('Show1');">SUB</button> <br> <button type="button" onclick="replace('Show1','Show2')">DOM</button> </div> </div> <div id="showarea" style="border: 2px solid #365278"> <div id="studentlogin"> <div id = "Show1"> <form name="form" method="get" action="studenthome.html" onclick="replace()" onsubmit="return validateStudent(this)"> Enter your ID NUMBER<br><input type="text" name="student" id="studentID" /><br> <input type="submit" value="Log-in" > </form> </div> </div> <div id="facultylogin"> <div id = "Show2"> <form name="form" method="get" action="facultyhome.html" onclick="replace()" onsubmit="return validateFaculty(this)"> Enter your FACULTY ID <br><input type="text" name="faculty" id="facultyID" /><br> <input type="submit" value="Log-in" > </form> </div> </div> </div> </div>

These two functions is what I've created. replace function to replace the content and Open to show or hide the div. but the replace() only works for the DOM..

function replace(id,content) { var container = document.getElementById(id); container.innerHTML = content; } function Open(idMyDiv){ var objDiv = document.getElementById(idMyDiv); if( == "inline"){ = "none"; } else { = "inline"; }


-------------Problems Reply------------

I'm assuming this is 'homework assignment' and thus just going to hint: Node.replaceChild() If you're using a library like jQuery: jQuery.replaceWith()

Category:javascript Views:6 Time:2017-09-03

Related post

  • why print dialog is not opened in IE when printing a dive content using javascript? 2011-11-27

    I want to print a dive content using javascript and jquery and using following code: n ='M80Print.aspx', '_blank', 'status=no,toolbar=no,menubar=yes,height=400px,width=640px'); n.document.write($('#<%=Print.ClientID %>').html()); n

  • How to read and write into file using JavaScript 2009-02-25

    Can anybody give the sample code to read and write the file using JavaScript? --------------Solutions------------- For completeness, the OP does not state he is looking to do this in a browser (if he is, as has been stated, it is generally not possib

  • How to replace characters, inside specific tag using javascript 2010-11-19

    I need to replace characters inside specific tag using javascript when page loads. I have a big list of characters to be replaced. so it will be fast and should work with major browsers. example:- <p> The quick brown fox jumps over the lazy dog

  • How to show and hide DIV based on URL. in Javascript 2010-09-24

    I have two URL's url 1 = url 2 = I want to show a div(left) when PAGE URL is In the page form.php I wrote the following code: <script> $(function(){ var loc

  • How to replace " and \ from text files using Java? 2011-02-20

    I'm using replace and replaceAll Java functions to replace strings in text files. I've some issues with some symbols occurring in my text file, such as " and \ Let's say I have to remove the " from "blablabla", what should i use ? I'm currently using

  • How to check when a div resizes, using Javascript or Jquery 2010-11-19

    So I've got a web applcation in the midst of wireframing, but I've run into an issue that requires a technical solution before I can solidify this model; that being: Fig. #1 User creates new 'text-field' element (a div with a max-width.) User then be

  • How to replace p tag to br using javascript 2011-06-16

    How would I replace this: <p class='abc'>blah blah</p> afdads With this: blah blah <br/> Using (vanilla?) JavaScript? Thanks! Updated Content $content = $_REQUEST['content']; $content = preg_replace('/<p[^>]*>/', '', $conte

  • How to disable and enable HTML table using javascript? 2011-10-26

    I want to know how can I disable and enable the highlighting on an HTML table using javascript by clicking an html button. Here are my codes: tabletest.html <html> <head> <script type="text/javascript"> function disableTable() { doc

  • How to replace an element by textarea using javascript 2011-12-29

    What I am making is basically is a user profile that has a text box for description added by the user about himself/herself. Although I have a separate page where the user can edit the profile, but I want to provide a feature that when a user hovers

  • How to change a label's contents using Javascript? 2011-05-05

    I have a label that holds a value and a text box into which I will enter a number. I have another label, which should dynamically give the difference between the two as I type the number in the text box. How do I do this using Javascript? I tried:

  • How to enable and disable back button using JavaScript 2011-12-30

    I am using VS 2010. I use two links to go back/forward between pages. Code: <a href="#" onclick="history.go(-1);return false"><img src="Images/back.jpg" /></a> <a href="#" onclick="history.go(1);return false"><img src="Imag

  • How to replace invalid characters in XML using Javascript or PhP 2010-06-16

    Need help here for the following: Running PhP, javascript, MySQL, XML. 1) Retrieving file from MySQL and stored it onto XML file. 2) Use javascript function to load XML file (that stored those data). 3) It produces invalid characters in XML file. STE

  • How to Change show different divs dynamically using javascript 2012-02-16

    I am new to javascripting and jquery. I am drawing charts using flot in which i have 2 Bar graphs... My first bar graph <div id="bar1" style="width:600px;height:300px;"></div> $(function () { var css_id = "#bar1"; var data = [ {label: 'fo

  • How to check and run math expression using Javascript 2010-03-10

    I'm trying to make a Javascript function that will take a mathematical expression and apply it to a predefined number, for example: var myNum = 10; function EQ(eq){ // code here } For example the input should me something like this: EQ("*100/10"); //

  • How to pause and resume CSS3 animation using JavaScript? 2011-04-27

    I've tried to google and look from this forum a solution for my problem but no luck so far. I would like to pause my CSS3 animation (image slide show) by clicking a picture and also resume to the same animation by clicking a picture. I know how to pa

  • how to replace text in the body using javascript 2011-11-14

    I have the following code to replace all instances of "onAppDeactivate" with "onAppActivate" in the entire body of the document, but it doesn't seem to be working at all. Any ideas? var pageSource = document.body.getElementsByTagName("script"); var r

  • How to remove and hide using jquery? 2013-04-12

    Can someone please tell me how to remove and hide a event using jquery ? Actually currently I have using the jquery bellow and its working fine but its just removing the event but not hiding it please can you modify it for me ? function delData(id){

  • show and hide div every 1min 2009-07-13

    How to show and hide div every 1min in jquery --------------Solutions------------- Give a look to the setInterval core function and to the jQuery's Effects/toggle function: setInterval(function(){$('#myDiv').toggle();}, 60000); Try this: setInterval(

  • Load a remote XML into a web page and access its content via JavaScript 2012-02-29

    I'd like to know if it's possible to load a remote XML file through the <script> tag, and access the content using JavaScript. As the XML is a result of an external website (I'm using TheTVDb API), I can't load it using AJAX. I'm looking for so

  • Using JQuery how to show and hide different div's onClick event 2009-05-27

    I would like to show a div based on the Onclick event of an link. First Click - Show div1 Second Click - Hide remaining div's and Show div2 Third Click - Hide remaining div's and show div3 Fourth Click - Hide remaining div's and show div1 => repea

  • How can I use jQuery to show and hide DIVs based on checkboxes in a submitted form from a different page? 2010-07-21

    I need to submit a form on one page, and show and hide DIVs on the receiving page based on what checkboxes were checked. The script also needs to display different messages for no checkboxes being checked, some checkboxes being checked, or all checkb

  • How to Get a html page content using Inet in vb6 and put the content in a TextBox? 2011-04-06

    How to Get a html page content using Inet in vb6 and put the content in a TextBox ? --------------Solutions------------- Try sample code in Retrieving Data Using Visual Basic article. Try this: Function GetHTMLCode(Optional strURL As String) As Strin

  • How does one create a div that uses iconCls to draw icons? 2012-03-20

    How can I generate a div that uses iconCls to populate the equivalent of an icon as that div's content? Eg { xtype:button, iconCls: 'refresh', iconMask: true, } Will generate a button with the refresh icon. As far as I know, Ext & Sencha generate

  • how to create and download excel document using 2009-03-13

    How to create and download excel document using ? The purpose is to use xml, linq or whatever to send an excel document to a customer via a browser. Edit : Use case The customer load a gridview ( made with ajax framework ) in a browser, the g

Copyright (C), All Rights Reserved.

processed in 0.099 (s). 11 q(s)