Submit One Field of a Form to a New Window

Discussion in 'Javascript' started by vunet.us@gmail.com, Mar 1, 2007.

  1. Guest

    Hello,
    I have an html form which users fill out and submit. The form contains
    one textarea which I want them to preview before submitting. This,
    probably, means that there will be a link/button saying "Preview" and
    JS will open a new window and submit the form. The new window page
    will get value of one field and display it. I believe this is how it
    should be done.

    Is there a good way someone can recommend me how I can implement this
    or suggest a better way, perhaps.

    Thank you
    , Mar 1, 2007
    #1
    1. Advertising

  2. ASM Guest

    a écrit :
    > Hello,
    > I have an html form which users fill out and submit. The form contains
    > one textarea which I want them to preview before submitting. This,
    > probably, means that there will be a link/button saying "Preview" and
    > JS will open a new window and submit the form. The new window page
    > will get value of one field and display it. I believe this is how it
    > should be done.
    >
    > Is there a good way someone can recommend me how I can implement this
    > or suggest a better way, perhaps.


    I do not understand why a field value has to be shown in a popup ...

    <html>
    <style type="text/css">
    #agree { display: none; }
    </style>
    <script type="text/javascript">
    function $(id) { return document.getElementById(id); }
    function agree() {
    if($('agree').style.display!='block') {
    alert('please use the button to send the form');
    return false;
    }
    return true;
    }
    </script>
    <form onsubmit="return agree()" action="test.htm" >
    <div id="agree">
    <textarea> some text to read </textarea><br>
    <input type=reset value="disagree"
    onclick="$('agree').style.display='none';">
    <input type=submit value="I agree"
    onclick="agrement.value='ok';">
    <input type=hidden name="agrement" value="no">
    </div>
    <p>nom <input name=nom>
    <p>prenom <input name=prenom>

    <p><input type=button value="Send"
    onclick="$('agree').style.display='block';location='#agree';">
    </form>
    </html>


    If JS is disabled nothing will work ...

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Mar 2, 2007
    #2
    1. Advertising

  3. Guest

    On Mar 1, 8:25 pm, ASM <>
    wrote:
    > a écrit :
    >
    > > Hello,
    > > I have an html form which users fill out and submit. The form contains
    > > one textarea which I want them to preview before submitting. This,
    > > probably, means that there will be a link/button saying "Preview" and
    > > JS will open a new window and submit the form. The new window page
    > > will get value of one field and display it. I believe this is how it
    > > should be done.

    >
    > > Is there a good way someone can recommend me how I can implement this
    > > or suggest a better way, perhaps.

    >
    > I do not understand why a field value has to be shown in a popup ...
    >
    > <html>
    > <style type="text/css">
    > #agree { display: none; }
    > </style>
    > <script type="text/javascript">
    > function $(id) { return document.getElementById(id); }
    > function agree() {
    > if($('agree').style.display!='block') {
    > alert('please use the button to send the form');
    > return false;
    > }
    > return true;}
    >
    > </script>
    > <form onsubmit="return agree()" action="test.htm" >
    > <div id="agree">
    > <textarea> some text to read </textarea><br>
    > <input type=reset value="disagree"
    > onclick="$('agree').style.display='none';">
    > <input type=submit value="I agree"
    > onclick="agrement.value='ok';">
    > <input type=hidden name="agrement" value="no">
    > </div>
    > <p>nom <input name=nom>
    > <p>prenom <input name=prenom>
    >
    > <p><input type=button value="Send"
    > onclick="$('agree').style.display='block';location='#agree';">
    > </form>
    > </html>
    >
    > If JS is disabled nothing will work ...
    >
    > --
    > Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    > Stephane Moriaux and his (less) old Mac already out of date


    Oh, it's very easy: I have a textfield where user writes the
    description of the item. It can be a long text value or html. Then I
    want them to preview how it will look like on the page before they
    submit it. So, I just want a new window to be open with that field
    info inside. Your example shows a bit different solution. Thanks for
    your time and help.
    , Mar 2, 2007
    #3
  4. ASM Guest

    a écrit :
    > So, I just want a new window to be open with that field
    > info inside. Your example shows a bit different solution. Thanks for
    > your time and help.


    <html>
    <style type="text/css">
    #viewer { position:absolute;top:20px;border:2px solid #888;
    width:90%;left:5%;height:300px;overflow:auto;
    padding:8px;background:white;display:none;cursor:pointer }
    </style>
    <script type="text/javascript">

    function preview() {
    var t = document.forms[0].userText.value;
    var v = document.getElementById('viewer');
    v.innerHTML = t;
    v.style.display = 'block';
    }
    </script>
    <form>
    <textarea name="userText" style="width:80%;height:200px"></textarea>
    <input value="Preview" onclick="preview();" type=button>
    </form>

    blah

    <div id="viewer" onclick="this.style.display='none';"></div>
    </html>


    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Mar 2, 2007
    #4
  5. Guest

    On Mar 2, 12:33 pm, ASM <>
    wrote:
    > a écrit :
    >
    > > So, I just want a new window to be open with that field
    > > info inside. Your example shows a bit different solution. Thanks for
    > > your time and help.

    >
    > <html>
    > <style type="text/css">
    > #viewer { position:absolute;top:20px;border:2px solid #888;
    > width:90%;left:5%;height:300px;overflow:auto;
    > padding:8px;background:white;display:none;cursor:pointer }
    > </style>
    > <script type="text/javascript">
    >
    > function preview() {
    > var t = document.forms[0].userText.value;
    > var v = document.getElementById('viewer');
    > v.innerHTML = t;
    > v.style.display = 'block';}
    >
    > </script>
    > <form>
    > <textarea name="userText" style="width:80%;height:200px"></textarea>
    > <input value="Preview" onclick="preview();" type=button>
    > </form>
    >
    > blah
    >
    > <div id="viewer" onclick="this.style.display='none';"></div>
    > </html>
    >
    > --
    > Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    > Stephane Moriaux and his (less) old Mac already out of date


    and that would be a good solution indeed, if not something to
    consider:
    I cannot control wheather user enters text or html. if html is
    entered, then would I really have to check for every possible html
    tag, such as <br>, <table>, etc. to preserve plain text line breaks?

    For example, If user enters:
    -this
    -is
    -example
    then the JS innnerHTML shows "-this -is -example", so I need to
    convert line breaks to <br>.
    But if user types "-this <br>-is <br>-example", there will be a break
    with innerHTML.
    What if situation is somehow different than this? Do i need to
    consider every case or it would be just more simple to send it to
    another popup window and display it the way it would really look no
    matter what...?
    , Mar 2, 2007
    #5
  6. ASM Guest

    a écrit :
    > I cannot control wheather user enters text or html. if html is
    > entered, then would I really have to check for every possible html
    > tag, such as <br>, <table>, etc. to preserve plain text line breaks?
    >
    > For example, If user enters:
    > -this
    > -is
    > -example
    > then the JS innnerHTML shows "-this -is -example", so I need to
    > convert line breaks to <br>.
    > But if user types "-this <br>-is <br>-example", there will be a break
    > with innerHTML.
    > What if situation is somehow different than this? Do i need to
    > consider every case or it would be just more simple to send it to
    > another popup window and display it the way it would really look no
    > matter what...?


    you'll have same problems in a new window(*) or in a div in main window.

    You asked about text entered as html (with tags and so on)
    and that works fine in my test.

    Now if you want to display in html some "normal" text it is not same song.
    You can try :

    function preview() {
    var t = document.forms[0].userText.value;
    if(t.indexOf('<')<0) t = '<pre>'+t+'<\/pre>';
    var v = document.getElementById('viewer');
    v.innerHTML = t;
    v.style.display = 'block';
    }

    But probably you'll prefer :

    function preview() {
    var t = document.forms[0].userText.value;
    t = t.replace(/>(\n|\r)/g,'>').replace(/\n|\r/g,'<br>');
    var v = document.getElementById('viewer');
    v.innerHTML = t;
    v.style.display = 'block';
    }



    (*) about the option "opening in a new window", test that :

    <html>
    <script type="text/javascript">
    function preview() {
    truc = window.open('','','width=300,height=300');
    truc.document.open();
    truc.document.write(document.forms[0].userText.value);
    truc.document.close();
    }
    </script>
    <form>
    <textarea name="userText" style="width:80%;height:200px">
    <div style="background:yellow">
    <h1>test</h1>
    <p>to see
    </div>

    an now,
    with some
    return carriages
    </textarea>
    <input value="Preview" onclick="preview();" type=button>
    </form>
    </html>

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Mar 2, 2007
    #6
  7. Guest

    On Mar 2, 6:01 pm, ASM <>
    wrote:
    > a écrit :
    >
    >
    >
    > > I cannot control wheather user enters text or html. if html is
    > > entered, then would I really have to check for every possible html
    > > tag, such as <br>, <table>, etc. to preserve plain text line breaks?

    >
    > > For example, If user enters:
    > > -this
    > > -is
    > > -example
    > > then the JS innnerHTML shows "-this -is -example", so I need to
    > > convert line breaks to <br>.
    > > But if user types "-this <br>-is <br>-example", there will be a break
    > > with innerHTML.
    > > What if situation is somehow different than this? Do i need to
    > > consider every case or it would be just more simple to send it to
    > > another popup window and display it the way it would really look no
    > > matter what...?

    >
    > you'll have same problems in a new window(*) or in a div in main window.
    >
    > You asked about text entered as html (with tags and so on)
    > and that works fine in my test.
    >
    > Now if you want to display in html some "normal" text it is not same song.
    > You can try :
    >
    > function preview() {
    > var t = document.forms[0].userText.value;
    > if(t.indexOf('<')<0) t = '<pre>'+t+'<\/pre>';
    > var v = document.getElementById('viewer');
    > v.innerHTML = t;
    > v.style.display = 'block';
    >
    > }
    >
    > But probably you'll prefer :
    >
    > function preview() {
    > var t = document.forms[0].userText.value;
    > t = t.replace(/>(\n|\r)/g,'>').replace(/\n|\r/g,'<br>');
    > var v = document.getElementById('viewer');
    > v.innerHTML = t;
    > v.style.display = 'block';
    >
    > }
    >
    > (*) about the option "opening in a new window", test that :
    >
    > <html>
    > <script type="text/javascript">
    > function preview() {
    > truc = window.open('','','width=300,height=300');
    > truc.document.open();
    > truc.document.write(document.forms[0].userText.value);
    > truc.document.close();}
    >
    > </script>
    > <form>
    > <textarea name="userText" style="width:80%;height:200px">
    > <div style="background:yellow">
    > <h1>test</h1>
    > <p>to see
    > </div>
    >
    > an now,
    > with some
    > return carriages
    > </textarea>
    > <input value="Preview" onclick="preview();" type=button>
    > </form>
    > </html>
    >
    > --
    > Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    > Stephane Moriaux and his (less) old Mac already out of date


    thank you, that's really helpful
    , Mar 5, 2007
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. D. Shane Fowlkes
    Replies:
    3
    Views:
    612
    S. Justin Gengo
    Feb 24, 2004
  2. Replies:
    2
    Views:
    6,148
  3. Eric
    Replies:
    4
    Views:
    178
    Ray at
    Sep 24, 2003
  4. Replies:
    2
    Views:
    332
  5. Replies:
    3
    Views:
    637
Loading...

Share This Page