• Registered: 2011-10-21
  • Posts: 1

Topic: Reset form fields after they have changed with a remote_function

Hello, i have a form with some text fields and a radio button with two options. One of the two options when chosen causes some other text fields to be addede to the form by a remote_function call.

Here's the code:


<%= start_form_tag :action=>'edit_rule', :id=>@rule.id %>


<%= text_field 'rule', 'opt', { :style => 'width: 100%;' }  %>

<%= text_field 'rule', 'par', { :style => 'width: 100%;' }  %>


<%= radio_button_tag 'opt_notifications_type', 'default', true, :onclick => remote_function(:update => "custom_notifications",
                    :url => { :action => :show_custom_notifications, :id => 'default' }) %><label for="opt_notifications_type">Default</label><br/>
                <%= radio_button_tag 'opt_notifications_type', 'custom', false, :onclick => remote_function(:update => "custom_notifications",
                    :url => { :action => :show_custom_notifications, :id => 'custom' }) %><label for="opt_notifications_type">Custom</label>


<div id="custom_notifications">
</div>


<input type="submit" value="Save">
<input type="reset" value="Reset">

<% end_form_tag %>



The problem is that if i click the reset button every text_field is reset in the correct way.

Even the radio button reset itself, however if the div was modified by a remote_function call it doesn't reset itself.

Is there a way to force the reset to some element modified by a remote_function call?

Thanks in advance for the help.

Last edited by stratio (2011-10-21 11:35:51)

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: Reset form fields after they have changed with a remote_function

The problem is that the reset only affects that which is in the form when the DOM is originally created. 

You could do several things

1)  Just update the entire form, with the new elements inserted where appropriate, so that everything you want to reset is in the form. 

2) Make separate forms, each with a reset,  so that the div id=custom_notifications contains it's own form and reset button.

3) You could use JavaScript to manually reset the new elements added in the custom_notifications.  You'd have to manually construct the JavaScript, and send it back along with the HTML when updating the div,  the JavaScript would have to fire on the form's reset event.

Last edited by BradHodges (2011-10-21 15:42:44)

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: Reset form fields after they have changed with a remote_function

I noticed you're using rails 2.X (remote_function)

If you go the JavaScript route, I looked and found something in my own code that is similar to what you'd need to do,  but it's using Builder::XmlMarkup.   I use Builder::XmlMarkup all he time to construct HTML in the controller, it's pretty handy. 

Assuming you are using jquery, you could do something like this:

    xm = Builder::XmlMarkup.new
    xm.input(:name=>"yourform[a_name]",:id=>"anid",:type=>"text",:value=>"ENTER YOUR NAME")     
    xm.input(:name=>"yourform[another_name]",:id=>"anid2",:type=>"text",:value=>"ENTER YOUR ADDRESS")     
    xm.script(:type=>"text/javascript") {
      xm << "$('#yourform').bind('reset',function() {"
      xm << "$('#anid').val('ENTER YOUR NAME');"
      xm << "$('#anid2').val('ENTER YOUR ADDRESS');"
      xm << "});"
    }
    render(:text=>xm)

If you don't like the idea of ignoring the view helpers,  you could do this:

    xm = Builder::XmlMarkup.new
    xm << @template.text_field_tag 'a_name','ENTER YOUR NAME',:name=>'yourform[a_name]':id=>'anid')     
    xm << @template.text_field_tag 'another_name','ENTER YOUR ADDRESS',:name=>'yourform[another_name],:id=>'anid2')
    xm.script(:type=>"text/javascript") {
      xm << "$('#yourform').bind('reset',function() {"
      xm << "$('#anid').val('ENTER YOUR NAME');"
      xm << "$('#anid2').val('ENTER YOUR ADDRESS');"
      xm << "});"
    }
    render(:text=>xm)

I'm not sure if @template is still kosher in 3.X, besides I think pure XmlMarkup is easier to look at. 

If you're tempted to try and use the form helpers,  don't,  there is no way to pass the context of the form block , it's only in scope in the view, you can't ship it to the controller.

You're stuck hand crafting the element names and ids.  But I've never tried to solve this in 3.X so maybe there is a way now?

Last edited by BradHodges (2011-10-21 15:37:39)

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.