Preventing form elements from being submitted

[Doctor Q]

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?

 

[angelwatt]

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

 

[Doctor Q]

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.

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.

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

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!

 

[angelwatt]

Thousands might start to make a performance problem. I feel sorry for the user that has to fill it in

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?

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.

 

[kasakka]

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!

Since PHP 5.2 you can easily send back JSON with PHP. Essentially you just

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.

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.

 

[7on]

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.

$array = ['zip','house'];

Then in your submission...

foreach ($array as $a) {
	if($_POST[$a]) {
		// do nothing	
	} else {
		// put your submission code here
	}
}

Easy peasy

 

[Doctor Q]

Thanks! It was both simpler and more complicated than I expected!