www.webdeveloper.com
Results 1 to 5 of 5

Thread: display for without using pop up

Hybrid View

  1. #1
    Join Date
    Dec 2010
    Posts
    36

    display for without using pop up

    Hi, having fun with Javascrip again!! Can anyone tell me how to display information from a form using Javascript but without having o use a pop up? I wan to display the information ideally on another page I have created but if not on the same page. At the moment when you click the form it opens a pop up window.

    This is my script....

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    function displayHTML(form) {
    var inf = form.htmlDeserve.value;
    var inf2 = form.htmlWant.value;
    var inf3 = form.htmlCan.value;
    var inf4 = form.htmlWill.value;
    var inf5 = form.htmlAm.value;


    win = window.open("", 'popup', 'toolbar = yes, status = no');
    win.document.write("" + "<b>" + "I deserve to be " + "</b>" + inf + "<br>" + "<b>" + "I want to be " + "</b>" + inf2 + "<br>" + "<br>" + "<b>" + "I can be " + "</b>" + "<br>" + "<b>" + "I will be " + "</b>" + inf3 + "<br>" + "<B>" + "I am " + "</b>" + inf4 + "<br>" + "<b>" + "3. " + "</b>" + inf5 + "<br>" + "<br>" + "<br>" + "If you are happy with your Action Plan then click on the button below to print it" + "<html><head><title>popup</title></head><body><br><br>" + "<a href='print.html' onclick='window.print();return false;'>" + "<img src='images/printer.png' height='100px' width='100px'></a></body></html>" + "");
    }
    // End -->
    </script>



    my form....

    <form id="form2" name="form1" method="post" action="">
    <h1>I deserve to be
    <label for="textfield7"></label>
    <input type="text" name="htmlDeserve" id="textfield7" />
    </h1>
    <h1>I want to be
    <label for="textfield8"></label>
    <input type="text" name="htmlWant" id="textfield8" />
    </h1>
    <h1>I can be
    <label for="textfield9"></label>
    <input type="text" name="htmlCan" id="textfield9" />
    </h1>
    <h1>I will be
    <label for="textfield10"></label>
    <input type="text" name="htmlWill" id="textfield10" />
    </h1>
    <h1>I am
    <label for="textfield11"></label>
    <input type="text" name="htmlAm" id="textfield11" />
    </h1>
    <p>
    <input type="button" value=" view " onclick="displayHTML(this.form)">
    </p>
    <label for="textfield12"></label>
    </form>

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    If you want it on the same page (which wouldn't actually submit the form, thereby it won't populate a database, or anything) you could use a DIV layer that initially loads "style.display='none';" and shove it into a corner and make it small. Upon form submit, give it a higher zIndex, make it "style.display='';", make it larger, and then populate the innerHTML with the form values.

    ^_^

  3. #3
    Join Date
    Dec 2010
    Posts
    36
    sorry I don't understand? I'm very new to Javascript and non of what you said made sense sorry. Can you explain it in simplistic terms? What is style.display and where do I put it in the code? Do I need to remove any code? Sorry im still learning :-(

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    First, gut the contents of the JavaScript function, but leave the function open and close where it is (populate it, later.)

    Second, at the bottom of the document, but still within the BODY tag, put a tiny, hidden DIV and give it an id. Put another form inside it. Use this form to actually submit the data.
    HTML Code:
    <div id="popupInfo" style="z-index:-10; top:0px; height:1px; width:1px; display:none;">
    <form name="form3" id="form3" method="post" action="">
    <h1>I deserve to be
    <label for="textfield7"></label>
    <input type="text" name="htmlDeserve" id="textfield7" />
    </h1>
    <h1>I want to be
    <label for="textfield8"></label>
    <input type="text" name="htmlWant" id="textfield8" />
    </h1>
    <h1>I can be
    <label for="textfield9"></label>
    <input type="text" name="htmlCan" id="textfield9" />
    </h1>
    <h1>I will be
    <label for="textfield10"></label>
    <input type="text" name="htmlWill" id="textfield10" />
    </h1>
    <h1>I am
    <label for="textfield11"></label>
    <input type="text" name="htmlAm" id="textfield11" />
    </h1>
    <p>
    <input type="submit" value=" Submit " name="submitBtn">
    </p>
    </form>
    </div>
    Then the function:
    Code:
    function displayHTML(thisForm) {
    document.form3.htmlDeserve.value = document.form2.htmlDeserve.value;
    document.form3.htmlWant.value = document.form2.htmlWant.value;
    document.form3.htmlCan.value = document.form2.htmlCan.value;
    document.form3.htmlWill.value = document.form2.htmlWill.value;
    document.form3.htmlAm.value = document.form2.htmlAm.value;
    var pui = document.getElementById("popupInfo");
    pui.style.display = '';
    pui.style.height = '100px';
    pui.style.width = '100px';
    pui.style.zIndex = 10;
    }
    This is untested, but it should work.

    ^_^

  5. #5
    Join Date
    Dec 2010
    Posts
    36
    That is great it works :-)

    Is there a way of doing it so the information isnt displayed in a form. I wanted to have the sentences one on top of the other then I can put a print button in to pint that section only. I was going to use that div code wher you can tell it not to show the form once it has been submitted. I just need to know how to display the information insentences rather than in a form.

    Sorry im a pain I know, I owe you a drink lol!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles