提交表单后刷新jQuery Mobile页面

Question

I am trying to do a page refresh after a form is submitted. The page currently shows a list of sql rows based on a specific query. The form alters the status of the columns and thus some items may not meet the criteria to be displayed anymore.

Currently, I have this for the form:

<form action="<?=$_SERVER['PHP_SELF']; ?>" method="post">
<input type=hidden name="potential" value="<?=$assignment['potentialid'];?>"
<fieldset>
    <div data-role="fieldcontain">

        <div class="ui-grid-b">
            <div class="ui-block-a">
                <label for="user_name" class="user_name">User:</label>
            </div>
            <div class="ui-block-b">
                <select name="user_name"><?php  users($name);?></select><br> 
            </div>
        </div> <!-- /close grid -->
        <div class="ui-grid-b">
            <div class="ui-block-a">
                <label for="quadrant" class="quadrant">Change Quadrant:</label>
            </div>
            <div class="ui-block-b">                                
                <select name="quadrant">
                    <option value="<?=$assignment['cf_648']?>" selected><?=$assignment['cf_648']?></option>
                    <option value="1-1 Create">1-1 Create</option>
                    <option value="1-2 Shape">1-2 Shape</option>
                    <option value="1-3 Assess">1-3 Assess</option>
                    <option value="1-4 Formalize">1-4 Formalize</option>
                    <option value="2-1 Determine">2-1 Determine</option>
                    <option value="2-2 Act">2-2 Act</option>
                    <option value="2-3 Serve">2-3 Serve</option>
                    <option value="2-4 Store">2-4 Store</option>
                    <option value="3-1 Feel">3-1 Feel</option>
                    <option value="3-2 Experience">3-2 Experience</option>
                    <option value="3-3 Share">3-3 Share</option>
                    <option value="3-4 Impress">3-4 Impress</option>
                    <option value="4-1 Understand">4-1 Understand</option>
                    <option value="4-2 Prioritize">4-2 Prioritize</option>
                    <option value="4-3 Complete">4-3 Complete</option>
                    <option value="4-4 Communicate">4-4 Communicate</option>
                </select>
            </div>
        </div>
    </div>
    <input type="submit" data-theme="a" name="submit" value="Submit" onClick="window.location.reload(true)" rel="external"></input>
</fieldset>

When this form is submitted, I am getting the jquery mobile "Error Loading page" and for me to actually see the changes I need to hit f5 after the form is submitted. The query is correct and does take effect in the database.

Any suggestions on the best way to refresh this page and that listview that it shows after the form has been submitted?

THANKS!

Answer 1

the problem is in you should handle form submit with js code

<script type="text/javascript">
      function formSubmit() {
          //here you can do whatever you want
      }
</script>
<form method="post" action="javascript:formSubmit();">
    <input type="submit" data-theme="a" name="submit" />
</form>