|
Dynamically deleting a form field (element) upon submit
By: Bruce Bahlmann - Contributing Author (your
feedback
is important to us!)
In rails development, when creating web forms, a special case may arise when
you want to delete a form element upon submit. For example, lets say
you populate a hidden form field with a bunch of data you have intelligently
placed within a json data structure. Doing this allows your web form
real-time access to this data to manipulate the display. However, one
wouldn't want the web form to just submit all that data back to your web
server. So, what do you do (how do prevent the web form from submitting this
data back to the web server)? The answer is delete the form element (as well
as its contents) before the form is actually submitted to the web server.
The following represents how you might populate an HTML form element with
data in a json format. This is very easy to do with jQuery so here is how
you do that:
[apps/views/_form.html.erb]
<div>
<input id="ud" type="hidden" name="ignore" value="<%= @prospects.to_json %>">
</div>
Since we desire to remove the contents of this form field prior to
submit, we need understand more about the form we are working with as well
as how to interrupt the web form submission process (so as to delete the
unwanted element). Note that in Rails, the
standard web form call (form_for) just populates default values for class
and id fields which make it difficult to select. So this form statement needs to be changed to allow us to do what
we want (reliably select the form whether we are editing or creating new).
[apps/views/_form.html.erb]
<%= form_for(@survey) do |f| %>
Note in modified form declaration below, we introduce the :html element
which allows us to explicitly define a new class, id, or both for our web
form.
[apps/views/_form.html.erb]
<%= form_for(@survey, :html=>{:class=>"form_survey"}) do |f| %>
Once this is set, we simply add a little javascript to enable us to
dynamically remove a specific web form element prior to submitting a web
form.
[apps/views/_form.html.erb]
$(document).ready(function(){
$('.form_survey').submit(function() {
$("#ud").remove();
return true; // continue with submit
});
});
The javascript (jQuery) above, selects the form class we defined earlier,
removes the html form element within that HTML web form that contains
information we do not want to send back to the web server, and then finally
returns true (or allows the submit to continue on its way - as it would
normally). Had we returned false, the javascript would have returned us back
to the web page and not went ahead and fired the submit (which would submit
all the data fields onto the web server).
Can Birds-Eye.Net help you or your Company?
Receive your Birds-Eye.Net articles and white
papers hot off
the presses by adding our RSS feed to your reader.
|
|
|
(C) Copyright Birds-Eye.Net, All rights reserved.
It is against the law to reproduce this content or any portion of it in any form without the explicit written permission of Birds-Eye Network Services, LLC. Federal copyright law (17 USC 504) makes it illegal, punishable with fines up to $100,000 per violation plus attorney's fees.
|