Solved

jquery mobile reset not clearing form

Posted on 2011-09-03
6
936 Views
Last Modified: 2012-06-27
I am confused as to why this code does not clear a form on success. I am using the form in a data-role="collapsible" and it should work. Can someone tell me if I need to add anything else to enable this to reset after success call. Thanks
$(function() {

 $("#BRV_brtrv").submit(function() {

   var send = $(this).serialize();

    $.ajax({
      type: "POST",
      url: "boxrtrvajax.php",
      cache: false,
      data: send,
      success: function (data) {

      if (data == 'No data'){

       $('#brtv-result').addClass("result_msg").html('Please fill in all fields');
      }
      else
      {
      $('#brtv-result').addClass("result_msg").html("You have successfully retrieved: "+data);
      $("#BRV_brtrv").get(0).reset(); <-- this is the problem area -->

      }
     },
     error:function (xhr, ajaxOptions, thrownError){
      jAlert('There was an exception thrown somewhere');
      alert(xhr.status);
      alert(thrownError);
     }
   });
   return false;
  });
});

form

<form method="post" id="BRV_brtrv" action="">

<div data-role="fieldcontain">
 <label for="BRV_brtrvrb">Requested By *</label>
 <input type="text" name="BRV_brtrvrb" id="BRV_brtrvrb" value="<?php echo $_SESSION['name']; ?>" />
</div>

<div data-role="fieldcontain">
 <fieldset data-role="controlgroup" data-type="horizontal">
  <legend>Service Type *</legend>
   <input type="radio" name="BRV-id-service-type" id="BRV-brtrv-standard-service" value="standard" />
   <label for="BRV-brtrv-standard-service">Standard</label>
   <input type="radio" name="BRV-id-service-type" id="BRV-brtrv-rapid-service" value="rapid" />
   <label for="BRV-brtrv-rapid-service">Rapid</label>
  </fieldset>
</div>

<div data-role="fieldcontain">
   <label for="BRV-brtrv-department">Department *</label>
    <select name="BRV-brtrv-department" id="BRV-brtrv-department" class="select" data-inline="true" data-native-menu="false">
     <option>Choose Department</option>
      <?php
        while($row = mysql_fetch_array( $BRVdept_result ))
    {
        $value=$row['name'];
        $caption=$row['name'];
        echo "<option value=\"", $value, "\">", $caption, "</option>";
        }
    ?>
     </select>
</div>

<div data-role="fieldcontain">
   <label for="BRV-brtrv-address">Address *</label>
    <select name="BRV-brtrv-address" id="BRV-brtrv-address" class="select" data-inline="true" data-native-menu="false">
     <option>Choose Address</option>
      <?php
        while($row = mysql_fetch_array( $BRVaddr_result ))
        {
        $value=$row['address1_com']. " ". $row['address2_com']. " ". $row['address3_com']. " ". $row['town_com']. " ". $row['postcode_com'];
        $caption=$row['address1_com']. " ". $row['address2_com']. " ". $row['address3_com']. " ". $row['town_com']. " ". $row['postcode_com'];
        echo "<option value=\"", $value, "\">", $caption, "</option>";
        }
        ?>
    </select>
</div>

<div data-role="fieldcontain">
   <label for="BRV-brtrv-slider">No of Boxes *</label>
     <input type="range" name="BRV-brtrv-slider" id="BRV-brtrv-slider" data-track-theme="a" value="0" min="0" max="10" />
</div>

<div id="BRVbrtrv_boxnumber" data-theme="b"></div>

<div id="brtv-result"></div>
<div id="BRV-brtrv-submitDiv" data-role="fieldcontain">
     <input name="BRV-brtrv-submit" id="BRV-brtrv-submit" type="submit" value="Retrieve Box" data-inline="true" />
</div>
</form>

+++options tried+++

$(':input','#BRV_brtrv')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');


$("input[type=range]").val(5).slider("refresh");
      $("input[type='checkbox']").attr("checked",false).checkboxradio("refresh");
      $("input[type='radio']").attr("checked",false).checkboxradio("refresh");
      $('#BRV-brtrv-department').selectmenu('refresh');

$(':input,:select', '#BRV_brtrv').removeAttr('checked').removeAttr('selected');

document.getElementById('BRV_brtrv').reset();

$('#BRV_brtrv').get(0).reset();

Open in new window

0
Comment
Question by:peter_coop
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36477642
Why not
 $("#BRV_brtrv")[0].reset();
?
0
 

Author Comment

by:peter_coop
ID: 36477713
@mplungian
hi. Still doesn't work. Should this be in a ajax complete? thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36477730
It should replace the .get(0).reset() you had in your success. Does it work on a pc?
0
Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

 

Author Comment

by:peter_coop
ID: 36477763
no. but in ordinary jquery it is fine. Just in JQM
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 36478241
I do not recognise your usage of data-role.

Try this

http://stackoverflow.com/questions/680241/blank-out-a-form-with-jquery

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file, SELECT', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$(':input', '#myFormId').removeAttr('checked').removeAttr('selected');
0
 

Author Closing Comment

by:peter_coop
ID: 36478267
thank you. if you get a chance, could you checkout this question I have raised. totally stumping me why it is not working. thanks

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27290128.html
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question