Preventing form elements from being submitted

Discussion in 'Web Design and Development' started by Doctor Q, Aug 1, 2011.

  1. Doctor Q Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #1
    I have a web page with a form with text elements and textarea elements. Some of these input elements are used to change data in other input elements, for example, imagine that you fill in a zip code in one field it sets the state name in another field, even though you can edit the state name directly as well. (I'm simplifying; it's a very complicated form with hundreds of input elements and lots of JavaScript controlling interactions among them, like a tax form.)

    There's a lot of data on the form, so for performance reasons when the user submits the form I want some of the input elements to be submitted but not others, without the user seeing anything change. With my zip code example, let's say I want the state name to be submitted to the server but not the zip code.

    To distinguish input elements that are to be submitted from input elements not to be submitted I can assign style classes or use a JavsScript array with the element names.

    Approaches I ruled out

    I could program the server code to ignore unwanted elements but that defeats the performance improvement I'm after.

    I can't put the elements I want in one <form> and the other elements in another <form> because they are intermixed all over the page, not in separate sections of the page.

    I could put the elements on two separate Z layers, but I don't see any way to get the layout to come out right since elements flow across and down the page.

    I can't have jQuery simply remove the unwanted elements from the page in reaction to the Submit action because the user would see the page collapse.

    If I set the unwanted elements to "disabled" they won't submit, but the user can't edit them. If I wait until the user clicks Submit and then change them to "disabled", they dim visibly on the screen.

    I don't know a way to put something on the form that looks and acts like a text field or textarea without it being a form element. And of course each browser has its own visible style for form elements.

    I assume it's illegal to omit the name attribute or use name="" on elements that I'm not interested in, even if that would prevent them from being submitted with the form.

    When the user clicks Submit I could have JavaScript construct a duplicate copy of the form, with only the wanted elements, and submit that form instead of the original one. But copying all that data would itself cause a performance hit.

    So?

    Does anybody have an idea about what approach might I take to doing what I want? Or is it impossible?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I'm not completely convinced there would be a substantial performance hit by having all of the form fields be included in the submit. It only changes the length of the HTTP POST message. I say that not knowing the exact details of the page.

    I can think of a JavaScript solution, but it has the downside that JavaScript would be required in order to use it. If that's OK, keep reading. Essentially, use AJAX. You can do POST messages with AJAX and manually determine what elements get included. If you're using jQuery, see the post function here, http://api.jquery.com/jQuery.post/. For generic JavaScript see this page as a starting off point, http://www.javascriptkit.com/dhtmltutors/ajaxgetpost2.shtml
     
  3. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #3
    The page stores all of its data 2 or 3 times so users can view/edit it in multiple ways. I want only one copy transmitted because the page has a lot of data over thousands of fields.

    JavaScript is already heavily used. I'm assuming the solution involves JavaScript or jQuery.

    Since it's an AJAX call, how do I deal with the results coming back? The server is expecting a normal POST, after which it constructs and sends the resulting page. Do I need to change the server code or will it not know the difference compared to a normal form submission?

    Thanks for the advice!
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Thousands might start to make a performance problem. I feel sorry for the user that has to fill it in :)

    The server sees the AJAX POST in the same way as a form-only POST. You can however add an extra variable such as &method=ajax, or something similar, if you want it to act a little differently (there's some other techniques that can be taken advantage of, but this technique is simple and straight forward). If the page being posted to tries a redirect or something, that won't work with AJAX, it will just ignore that (I think).

    The jQuery post function will let you determine if the post was a success however. You can make a follow-up GET request to retrieve "results" of the POST. Be sure to look over the 'success' option in the post. When I do POST, I generally never care about it afterwards so I don't have direct experience with this situation. Sounds like an ideal situation for a test page to see what you can make happen.
     
  5. kasakka macrumors 68000

    Joined:
    Oct 25, 2008
    #5
    Since PHP 5.2 you can easily send back JSON with PHP. Essentially you just
    PHP:
    echo json_encode($string_array_or_object);
    Just remember to add ,'json' at the end of the POST request so it expects JSON data back.

    Code:
    var dataToSend = $('form#myForm').serialize();
    $.post('controller/method',dataToSend,function(data) {
    if(data) {
     alert(data.result);
    }
    },'json');
    I usually just send back a { result: true } or false to determine if the sending was successful.

    Honestly you'll probably have a bigger performance hit sending parts of the form several times than sending the whole damn form once at the end.
     
  6. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #6
    I would just ignore that value in PHP. That wouldn't toll on the system at all. Hell, you could even setup an array of values and check against those.

    PHP:
    $array = ['zip','house'];
    Then in your submission...

    PHP:
    foreach ($array as $a) {
        if(
    $_POST[$a]) {
            
    // do nothing    
        
    } else {
            
    // put your submission code here
        
    }
    }
    Easy peasy
     
  7. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #7
    Thanks! It was both simpler and more complicated than I expected!
     

Share This Page