Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    inserting html (form elements) into javascript

    Hi,
    I know very little about javascript. the following script echos out column width after a user drags the columsn of a table.
    The output says something like: "Column widths: 112px; 256px; 320px; 15px"
    I would like to capture the output into a form, so the user can submit it to databse, and system will remember settings if they reload the screen:
    Code:
    $(function(){	
    
    		var onSampleResized = function(e){
    			var columns = $(e.currentTarget).find("th");
    			var msg = "columns widths: ";
    			columns.each(function(){ msg += $(this).width() + "px; "; })
    			$("#sample2Txt").html(msg);
    			
    		};
    Now this line:
    Code:
    columns.each(function(){ msg += $(this).width() + "px; "; })
    seems to echo out the widths of each column. How can I have each value get echoed into a separate input box (type=text)? Then when user submits the form, I will use php to process form and get the values into a database.
    Last edited by jeff5656; 07-06-2013 at 01:11 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Well, putting them into a single <input> would be trivial. And if you then just split the single input on the semicolon in your PHP code, you'd be done.

    The problem with putting it into separate <input>s is you won't know ahead of time how many columns there are (or perhaps you do in the specific, but the code in general wouldn't). It's certainly possible to handle that, but why bother when doing the split (using explode() function) is so simple in PHP? (Note that you will ignore the last element of the array created by explode(), as this is nothing useful after the last semicolon.)

    So:
    Code:
    ...
    <input type="hidden" name="columnWidths" id="columnWidths" />
    ...
    $(function(){	
    		var onSampleResized = function(e){
    			var columns = $(e.currentTarget).find("th");
    			var msg = "";
    			columns.each(function(){ msg += $(this).width() + "px; "; })
    			$("#columnWidths").val(msg);
    		};
    ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jeff5656 (07-06-2013)

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    I do what Old Pendant is describing quite a bit and it works very well. Assemble all the data from the inputs from a 'phony' form, one that does not actually get submitted, or even have a submit button, into JS array, the array becomes the value of a hidden input to a real form which gets submitted by a JS function, if any textboxes are involved they are part of the real form because their data might corrupt the array. When the array arrives at the server it is just a comma separated list, which can be 'exploded' just as OP describes. Very clean simple code.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    jeff5656 (07-06-2013)

  • #4
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    That worked beautifully. Now here is another question:

    How do I take this form:

    <form>
    <input type="hidden" name="columnWidths" id="columnWidths" />
    </form>

    and automatically submit it as soon as the hidden columnWidths has those values in there?
    I realize there is something like "onselect" for dropdowns in a form; is there one for type="hidden"?

    Update - I just saw Drdos' reply so thats just what I want to do - but how do I automaticcally submit the form as soon as that hidden form element gets a value?

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    if I understand correctly, you would give your form an ID and submit it at the end of your onSampleResized function

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    In other words, as Xelawho said:
    Code:
    <form id="hiddenForm">
    <input type="hidden" name="columnWidths" id="columnWidths" />
    </form>
    
    ...
    document.getElementById("hiddenForm").submit();
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Actually when I do this:

    <form method="post" id="hiddenForm">
    <input type="hidden" name="columnWidths" id="columnWidths" />
    </form>
    <script type="text/javascript">
    document.getElementById("hiddenForm").submit();
    </script>

    the page continues to auto-relaod forever until I hit break! Any way to make it submit ONLY if the hidden field gets populated with a value?

    Or perhaps better, how do I get the submit button to display ONLY if the hidden field receives the value? So if a user changes the column width a form button will appear saying "make changes permanent"
    Last edited by jeff5656; 07-06-2013 at 01:16 PM.

  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Code:
    <form method="post"  action="./index.php" id="hiddenForm">
    <input type="hidden" name="columnWidths" id="columnWidths" />
    <p class="form_button" onclick="doSubmit();">Submit Form</p>
    </form>
    <script type="text/javascript">
    function doSubmit()
    {
    // put other tasks here
    document.getElementById("hiddenForm").submit();
    }
    </script>
    Last edited by DrDOS; 07-06-2013 at 03:11 PM.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Ummm...I meant add the submit to the end of the other code:
    Code:
    $(function(){	
    		var onSampleResized = function(e){
    			var columns = $(e.currentTarget).find("th");
    			var msg = "";
    			columns.each(function(){ msg += $(this).width() + "px; "; })
    			$("#columnWidths").val(msg);
                            document.getElementById("hiddenForm").submit();
    		};
    BUT! But that is going to submit the form every time the column widths are changed. Probably not what you want.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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