jquery mobile reset not clearing form

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

peter_coopAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
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
 
Michel PlungjanIT ExpertCommented:
Why not
 $("#BRV_brtrv")[0].reset();
?
0
 
peter_coopAuthor Commented:
@mplungian
hi. Still doesn't work. Should this be in a ajax complete? thanks
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
Michel PlungjanIT ExpertCommented:
It should replace the .get(0).reset() you had in your success. Does it work on a pc?
0
 
peter_coopAuthor Commented:
no. but in ordinary jquery it is fine. Just in JQM
0
 
peter_coopAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.