CODEWITHSUNDEEP
javascriptphpjqueryjquery-mobilemobile
Larry
Larry

Reputation: 43

Prevent form reset on submit with jQuery Mobile

I'm trying to accomplish when submitting a form it does not refresh and reset all the values. I am trying to get it to keep the fields, so we don't have to type the info all back in for multiple entries of the same order.

I'm not sure what all you need, here is most of the source of the index.

You can view it at http://vslan.net/pbs

<html>
<head>
<title>Premium Beverage Supply</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="themes/premium_beverage_supply.css" />
  <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css" /> 
 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">        </script> 


<script src="script/jqm.autoComplete-1.5.2-min.js"></script>
<script src="script/code.js"></script> 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">



</head>
<body>
<? include("manage_posts.php"); ?>


    <div data-role="page" class="" data-quicklinks="true" data-history="false" id="mainPage">
        <div class="ui-header ui-bar-e" data-swatch="e" data-theme="e" data-form="ui-bar-e" data-role="header" role="banner" data-position="fixed">
<h1 style="text-align:left; margin-left:10px;">Premium Beverage Supply</h1>
<a href="#positionWindow" data-transition="slidedown" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all ui-btn-right" data-rel="popup" data-position-to="window"> </a>

</div>
<div data-role="popup" id="positionWindow" data-theme="f"  data-history="false">
    <ul data-role="listview" data-inset="true" style="min-width:210px;">
        <li data-role="list-divider">MENU OPTIONS</li>
        <li data-icon="delete"><a href="pass.php">Clear Submissions</a></li>
        <li data-icon="action"><a href="export.php" data-rel="external" data-ajax="false">Export to Excel</a></li>
    </ul>
</div>
<div role="main" class="ui-content jqm-content" id="myHome">
<form method='post' id="my_form">


<div data-role="tabs" id="tabs" data-form="ui-body-f" data-theme="f" data-swatch="f">
  <div data-role="navbar" data-form="ui-body-f" data-theme="f" data-swatch="f" class="ui-btn-f">
<ul>
  <li><a href="#one" data-ajax="false" data-theme="f">Form</a></li>
  <li><a href="display_posts.php?id=0" data-ajax="false" data-theme="f">Submissions</a>    </li>
</ul>
  </div>
  <div id="one" class="ui-body-f ui-content ui-btn-f" data-theme="f" data-swatch="f">

//start of the form----------------------

<div class="ui-field-contain" class="ui-btn-f">

<select name="rep" id="rep" data-native-menu="false" data-form="ui-btn-up-f" data-theme="f" required>
    <option value="">Representative</option>        
    <option value="Dale">Dale</option>
    <option value="Dan">Dan</option>
    <option value="Ron">Ron</option>
    <option value="Scott">Scott</option>
</select>
</div>


<label for="slider-s">Number of Samples:</label>
<input name="sample" id="sample" value="0" min="0" max="6" data-highlight="true" type="range" class="ui-shadow-inset ui-body-f ui-corner-all ui-slider-input  ui-bar-f " data-form="ui-body-f" data-theme="f" required>



<label for="textinput-2">Account Info:</label>
<input name="account" id="account" placeholder="Name" value="" type="text" class="input" data-form="ui-body-f" data-theme="f" required>
<input name="accountcity" id="accountcity" placeholder="City" value="" type="text" class="input" data-form="ui-body-f" data-theme="f" required data-required-msg="City is required.">
<input name="accountcontact" id="accountcontact" placeholder="Contact" value="" type="text" class="input" data-form="ui-body-f" data-theme="f">


<label for="textinput-2">Search Sample:</label>
<input type="text" id="items" name="items" placeholder="Item Sampled">
<ul id="suggestions" data-role="listview" data-inset="true"></ul>






<div data-role="collapsible" data-theme="f" data-swatch="f" class="ui-btn-f" data-form="ui-btn-f">
<h4>Other Expenses</h4>
<label for="text-basic">Supplier Name:</label>
<input name="suppliername" id="suppliername" value="" type="text" class="input" data-form="ui-body-f" data-theme="f">
<label for="text-basic">Expense:</label>
<input name="expense" id="expense" value="" type="text" class="input" data-form="ui-body-f" data-theme="f">
</div>  
<br>

<a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-theme="e" data-swatch="e" class="ui-btn ui-btn-e ui-corner-all" data-form="ui-btn-up-e">Submit Request</a>
<div data-history="false" data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="e" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="e" class="ui-corner-top">
    <h1>Submission</h1>
</div>
<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content" data-history="false">
    <h3 class="ui-title">Are you sure you want to submit this form?</h3>

    <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="e">Cancel</a>
    <a href="javascript:{}" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="e" onclick="document.getElementById('my_form').submit(); return false;" data-ajax="false">Submit</a>
</div>
</div>




 </div>
</div>

</div>
</div>
</form>
</body>
</html>

Upvotes: 0

Views: 1640

Answers (2)

1Bladesforhire
1Bladesforhire

Reputation: 360

You could use onsubmit return false for the form.

    <form onsubmit="return false;" method='post' id="my_form">

try that directly on the form

Upvotes: 2

Robert Anderson
Robert Anderson

Reputation: 1256

I would consider applying a javascript framework such as Knockout.js or Angular.js to your View.

There are some good tutorials for Knockout and can be found here: http://learn.knockoutjs.com/

Basically it allows you to easily bind your model data to your view, that way when you do the postback, you will retain the values in your view.

I recommend Knockout in your situation as it may be easier to apply to your page to begin with. Angular is also great, but has more features to learn. Otherwise without these frameworks you have to manually write more of jQuery to bind your model to the view. The frameworks make it easier to manage.

Upvotes: 0

Related Questions