using javascript to write to same html page

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • sanou
    New Member
    • Jul 2006
    • 19
    #1

    using javascript to write to same html page

    Javascript and html form question...

    I created a html page with a form called MyForm

    I enter values X and Y into MyForm

    For onclick, I reference a function in the header called GetCoord() that is supposed to print X and Y. I don't want X and Y to be printed out in an alert window. I don't want to create a new webpage that would display X and Y. I don't want to use frames.

    Instead I want my html page to update itself automatically. So after submitting MyForm, I want the form to stay there and for the webpage to be udpated by printing out X and Y.

    Is this possible?
    Tags: None
    • sanou
      New Member
      • Jul 2006
      • 19
      #2
      Maybe this is involves some sort of dynamic update?

        Comment

        • jay_dev
          New Member
          • Jul 2006
          • 10
          #3
          sure it is use a div tag
          first it shouldbe hidden then when you're ready to print what you want
          put it inside it then show it
          Some Code
          <div id='div1' style="display: none"></div>
          when X and Y are to be printed
          you should call a javascript function to do that as follows

          function printXY()
          {

          document.getEle mentById('div1' ).innerHTML=' what you want to print'
          document.getEle mentById('div1' ).style.display ='block'
          }
          Last edited by jay_dev; Aug 4 '06, 02:57 PM.

            Comment

            • rickdog
              New Member
              • Aug 2006
              • 1
              #4
              you can also use document.write( ). if the writing is being done by a dynamically allocated object, the writing will happen in the space that it was allocated in, else it will be appended to the document.

                Comment

                • ajay dhingra
                  New Member
                  • Jan 2007
                  • 2
                  #5
                  Originally posted by jay_dev
                  sure it is use a div tag
                  first it shouldbe hidden then when you're ready to print what you want
                  put it inside it then show it
                  Some Code
                  <div id='div1' style="display: none"></div>
                  when X and Y are to be printed
                  you should call a javascript function to do that as follows

                  function printXY()
                  {

                  document.getEle mentById('div1' ).innerHTML=' what you want to print'
                  document.getEle mentById('div1' ).style.display ='block'
                  }



                  thanx
                  ur help is realy appreciable..

                  ajay

                    Comment

                    • pyrao
                      New Member
                      • Sep 2013
                      • 1
                      #6
                      <!DOCTYPE html>
                      <head>
                      <link href="bootstrap-3.0.0/dist/css/bootstrap.min.c ss" rel="stylesheet ">
                      <script>
                      function val1(){

                      var name1=document. getElementById( 'name').value;
                      var class1=document .getElementById ('clas').value;
                      var age1=document.g etElementById(' age').value;
                      document.getEle mentById('disp' ).style.display ='block'

                      document.getEle mentById('n').i nnerHTML= name1;
                      document.getEle mentById('c').i nnerHTML=class1 ;
                      document.getEle mentById("a").i nnerHTML=age1;

                      }

                      </script>
                      </head>

                      <body>
                      <form class="containe r" >
                      <div class="form-group ">
                      <div class="row">
                      <div class="col-md-1 col-md-offset-1">
                      <label class="label-control" >name</label>
                      </div>
                      <div class="col-md-8">
                      <input type="text" class="form-control" id="name">
                      </div>
                      </div>

                      </div>
                      <div class="form-group form-inline">
                      <div class="row">
                      <div class="col-md-1 col-md-offset-1">
                      <label >class</label>
                      </div>
                      <div class="col-md-8 ">
                      <input type="text" class="form-control" id="clas">
                      </div>
                      </div>
                      </div>
                      <div class="form-group form-inline">
                      <div class="row">
                      <div class="col-md-1 col-md-offset-1">
                      <label >age</label>
                      </div>
                      <div class="col-md-8">
                      <input type="text" class="form-control" id="age">
                      </div>
                      </div>
                      </div>
                      <div class="form-group form-inline">
                      <div class="row">
                      <button type="submit" class="btn btn-warning btn-block" onclick= "val1()">submit </button>
                      </div>
                      </div>
                      </form>

                      <div class="well well-sm" id="disp" style="display: none;">
                      <p id="n"></p><br>
                      <p id="c"></p><br>
                      <p id="a"></p><br>

                      </div>

                      </body>








                      thisismycode todispaly the elements. but if i click submit button the text blinks once.The text has to be displyed.

                        Comment

                        Previous template Next
                        Working...