CODEWITHSUNDEEP
javascripthtmlcss
micky
micky

Reputation: 15

How to show form data in same div using Javascript?

I am trying show form data within same div after click on submit button but without form.In current code,after click on submit button hidden div is not appearing. Please go through below code which I have tried and refer to image attached of desire output. In which title and description should come in same div in replace of form.

Someone help me out where I am going wrong with code.Thanks. https://commons.wikimedia.org/wiki/File:Lorem_Ipsum_Helvetica.png

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script>
    	function fn(){
    		var fn = document.getElementById("f1").value;
    		var des = document.getElementById("t1").value;
    		
    		var mainDiv = document.getElementById("d2");
    		var div = document.getElementById("d1");
    		if(mainDiv.style.display==="block"){
    			
    			mainDiv.style.display="none";
    			div.style.display="block";
    		}
    		document.getElementById("fn1").innerHTML = fn;
    		document.getElementById("t2").innerHTML = des;
    	}
    </script>
    </head>

    <body>
    <div style ="height:400px; width:500px; border:1px solid black; display:block;" id="d2">
    <form>
    First Name: <input type="text" name="fn" id="f1" /><br /><br />
    Description: <textarea id="t1" rows="5" cols="20"></textarea><br /><br />
    <input type="submit" name="b1" id="b1" value="Add" onclick="add()"  />
    <input type="submit" name="b1" id="b2" value="Cancel" onclick="Cancel()"  />
    </form>
    </div>

    <div style ="height:400px; width:500px; border:1px solid black; display:none;" id="d1">
    	<p><span id="fn1"></span></p>
    	<p><span id="t2"></span></p>
    </div>

    </body>
    </html>

Upvotes: 0

Views: 194

Answers (1)

mattdaspy
mattdaspy

Reputation: 882

Well, few things were wrong.

  1. The if part of the function isn't needed in this case if you're not validating the imput in the field (if you need so, you can comment and I'll add it for you)
  2. The buttons to Add and Cancel were submit type, so, as soon as you click it, even if you had the write code on JS, they'd vanish right after showing, because they'd be submited as a form.
  3. You were calling add() and Cancel() on the onClick events, which haven't been declared in any JS functions.

Well, after all, I just changed the type of the inputs from submit to button, added a CSS part for better view of the elements that you're working with and changed the JavaScript part just to do what you were asking to. See if it helps :

.d2 {
  width: 500px;
  height: 400px;
  border: 1px solid black;
  display: block;
}

.d1 {
  width: 500px;
  height: 400px;
  border: 1px solid black;
  display: none;
}
<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script>
    	function myFunction(){
    		var fn = document.getElementById("f1").value;
    		var des = document.getElementById("t1").value;
    		var fDiv = document.getElementById("d2"); //fDiv stands for "Form Div"
    		var hDiv = document.getElementById("d1"); // hDiv stands for "Hidden Div"
        
        hDiv.style.display = "block";
    		document.getElementById("fn1").innerHTML = fn;
    		document.getElementById("t2").innerHTML = des;
        fDiv.style.display = "none";
        
    	}
    </script>
    </head>

    <body>
    <div name="form" id="d2" class="d2">
      <form>
      First Name: <input type="text" name="fn" id="f1" /><br /><br />
      Description: <textarea id="t1" rows="5" cols="20"></textarea><br /><br />
      <input type="button" name="b1" id="b1" value="Add" onclick="myFunction()"  />
      <input type="button" name="b1" id="b2" value="Cancel" onclick="Cancel()"  />
      </form>
    </div>

    <div name="hidden" id="d1" class="d1">
    	<p><span id="fn1"></span></p>
    	<p><span id="t2"></span></p>
    </div>

    </body>
    </html>

Any questions, you can comment and ask.

Upvotes: 1

Related Questions