Solved

jquery mobile reset not clearing form

Posted on 2011-09-03
6
931 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
  • 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how to pick specific file from ftp 13 39
JavaScript export function not working in IE 15 36
JavaScript: Issue with onClick 5 36
Enter key on html form page 11 48
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

911 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now