Alex
Reputation: 127
jQuery form returns blank page when submitted
I have created forms before and they usually work, but I am new with jquery and I am wondering if there is something different here. When I submit the form by hitting the "Submit" button, it directs me to "strategyreview.php", but the page is blank. I know the page is not normally blank because I can load it directly just fine.
Please help.
Form: strategy.php
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>jQuery.noConflict();</script>
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Glegoo:400,700' rel='stylesheet' type='text/css'><!--Glegoo -->
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'><!--Abel -->
<style>
#title {
font-size: 4vh;
}
</style>
<form action="strategyreview.php" method="post">
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-a" id="title">
<h3 class="title">Strategy Testing</h3>
</div>
<div class="ui-body ui-body-a">
<!--Strategy Title -->
<h3 class="ui-bar ui-bar-a ui-corner-all">New Strategy</h3>
<div class="ui-body ui-body-a ui-corner-all">
<div class="ui-field-contain">
<label>Strategy Name</label>
<input name="strategyname" type="text" class="form-control" placeholder="Monthly Low Risk" required>
</div>
</div>
<!--Initial Spread Criteria:-->
<h3 class="ui-bar ui-bar-a ui-corner-all">Spread Criteria</h3>
<div class="ui-body ui-body-a ui-corner-all">
<div class="ui-field-contain">
<div class="ui-field-contain">
<label>Symbols:</label>
<select name="symbols" multiple="multiple" data-native-menu="false" style="width:50px;">
<option>Symbols</option>
<option value="1">NFLX</option>
<option value="2" selected="selected">SPY</option>
<option value="3" selected="selected">SPX</option>
<option value="2" selected="selected">SPY</option>
<option value="3" selected="selected">SPX</option>
<option value="2" selected="selected">SPY</option>
<option value="3" selected="selected">SPX</option>
<option value="2" selected="selected">SPY</option>
<option value="3" selected="selected">SPX</option>
</select>
</div>
<div class="ui-field-contain">
<label>Spread Types:</label>
<select name="spreadtype" multiple="multiple" data-native-menu="false" style="width:50px;">
<option>Spread Types</option>
<option value="Bull Put" selected="selected">Bull Put</option>
<option value="Bear Call" selected="selected">Bear Call</option>
</select>
</div>
</div>
</div>
<!--Entry Criteria:-->
<h3 class="ui-bar ui-bar-a ui-corner-all">Entry Criteria</h3>
<div class="ui-body ui-body-a ui-corner-all">
<div class="ui-field-contain">
<div data-role="rangeslider" data-track-theme="a" data-theme="b">
<label>Expiration Distance:</label>
<input name="expirationdistancelow" min="0" max="100" value="0" type="range" />
<label for="range-7b">Rangeslider:</label>
<input name="expirationdistancehigh" min="0" max="100" value="35" type="range" />
</div>
</div>
<label>
<input type="checkbox" name="includeweeklyexpirations">Include Weekly Expirations
</label>
<div class="ui-field-contain">
<label>Maximum Delta:</label>
<input type="range" name="entrymaximumdelta" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="0.25" value="0.08" step="0.01">
</div>
<div class="ui-field-contain">
<div data-role="rangeslider" data-track-theme="a" data-theme="b">
<label>Spread Width:</label>
<input name="spreadwidthlow" min="0" max="25" value="5" type="range" />
<label for="range-7b">Rangeslider:</label>
<input name="spreadwidthhigh" min="0" max="25" value="15" type="range" />
</div>
</div>
<div class="ui-field-contain">
<label>Minimum Distance (%):</label>
<input type="range" name="entryminimumdistance" class="singleslider" data-track-theme="a" data-theme="b" min="5" max="50" value="12" step="0.01">
</div>
<div class="ui-field-contain">
<label>Minimum Premium:</label>
<input type="range" name="entryminimumpremium" class="singleslider" data-track-theme="a" data-theme="b" min="0.05" max="1" value="0.25" step="0.01">
</div>
<label>
<input type="checkbox" name="entryminimumpremiumtrigger" checked>Enable Minimum Premium Criteria</label>
<div class="ui-field-contain">
<label>
Minimum Target Profit (%):</label>
<input type="range" name="entryminimumprofit" class="singleslider" data-track-theme="a" data-theme="b" min="1" max="10" value="2" step="0.25">
</div>
<label>
<input type="checkbox" name="entryminimumprofittrigger">Enable Minimum Profit Criteria</label>
<div class="ui-field-contain">
<label>Minimum Short Leg Volume:</label>
<input type="range" name="entryminimumshortlegvol" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="500" value="10" step="5">
</div>
<label>
<input type="checkbox" name="entryminimumshortlegvoltrigger" checked>Enable Minimum Short Leg Volume</label>
<div class="ui-field-contain">
<label>Minimum Long Leg Volume:</label>
<input type="range" name="entryminimumlonglegvol" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="1000" value="10" step="5">
</div>
<label>
<input type="checkbox" name="entryminimumlonglegvoltrigger" checked>Enable Minimum Long Leg Volume</label>
</div>
<!--Exit Stop Loss Criteria:-->
<h3 class="ui-bar ui-bar-a ui-corner-all">Exit Criteria</h3>
<div class="ui-body ui-body-a ui-corner-all">
<div class="ui-field-contain">
<label>Minimum Short Leg Volume:</label>
<input type="range" name="exitminimumshortlegvol" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="1000" value="10" step="5">
</div>
<label>
<input type="checkbox" name="exitminimumshortlegvoltrigger" checked>Enable Minimum Short Leg Volume</label>
<div class="ui-field-contain">
<label>Minimum Long Leg Volume:</label>
<input type="range" name="exitminimumlonglegvol" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="1000" value="10" step="5">
</div>
<label>
<input type="checkbox" name="exitminimumlonglegvoltrigger" checked>Enable Minimum Long Leg Volume</label>
</div>
<!--Exit Stop Loss Criteria:-->
<h3 class="ui-bar ui-bar-a ui-corner-all">Exit Stop Loss Criteria</h3>
<div class="ui-body ui-body-a ui-corner-all">
<div class="ui-field-contain">
<label>Maximum Delta:</label>
<input type="range" name="exitmaximumdelta" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="0.25" value="0.08" step="0.01">
</div>
<label>
<input type="checkbox" name="exitmaximumdeltatrigger">Enable Maximum Delta</label>
<div class="ui-field-contain">
<label>Maximum Distance:</label>
<input type="range" name="exitmaximumdistance" class="singleslider" data-track-theme="a" data-theme="b" min="10" max="100" value="25">
</div>
<label>
<input type="checkbox" name="exitmaximumdistancetrigger">Enable Maximum Distance</label>
<div class="ui-field-contain">
<label>Stop Loss Multiplier:</label>
<input type="range" name="exitstoplossmultiplier" class="singleslider" data-track-theme="a" data-theme="b" min="2" max="10" step="0.5" value="3">
</div>
<label>
<input type="checkbox" name="exitstoplossmultipliertrigger" checked>Enable Stop Loss Multiplier</label>
</div>
<!--Exit Early Criteria:-->
<h3 class="ui-bar ui-bar-a ui-corner-all">Exit Early Criteria</h3>
<div class="ui-body ui-body-a ui-corner-all">
<div class="ui-field-contain">
<label>Acceptable Premium To Leave Behind:</label>
<input type="range" name="earlyexitpremiumloss" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="0.1" value="0.05" step="0.01">
</div>
<label>
<input type="checkbox" name="earlyexitpremiumlosstrigger">Enable Premium To Leave Behind</label>
<div class="ui-field-contain">
<label>Acceptable Profit To Leave Behind (%):</label>
<input type="range" name="earlyexitprofitloss" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="1.0" value="0.5" step="0.1">
</div>
<label>
<input type="checkbox" name="earlyexitprofitlosstrigger">Enable Profit to Leave Behind</label>
<div class="ui-field-contain">
<label><span class="dropt" title="Close early if at least this many days left">
Minimum Days Remaining:</span></label>
<input type="range" name="earlyexitminimumdays" class="singleslider" data-track-theme="a" data-theme="b" min="1" max="10" value="5" step="0.1">
</div>
<label>
<input type="checkbox" name="earlyexitminimumdaystrigger">Enable Minimum Days Remaining</label>
</div>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<input type="reset" value="Reset">
</div>
<div class="ui-block-b">
<input type="submit" name="submit" value="Submit">
</div>
</div>
</div>
</div>
Page Submitted to: strategyreview.php
<?php
$symbol="";
$delta=0.08;
$distance=12;
$premium=0.25;
$daysToExpiration=35;
$spread=15;
$mininterest = 20;
$monthly = "yes";
$monthlyCheck = "checked";
$menuCheck = "checked";
$minvolume=0;
if(isset($_POST['update'])){
echo "Set values.";
} else {
echo "No values set.";
}
echo "words words strat review";
$strategyname = $_POST['strategyname'];
$symbols = $_POST['symbols'];
$spreadtype = $_POST['spreadtype'];
$expirationdistancelow = $_POST['expirationdistancelow'];
$expirationdistancehigh = $_POST['expirationdistancehigh'];
$includeweeklyexpirations = $_POST['includeweeklyexpirations'];
$entrymaximumdelta = $_POST['entrymaximumdelta'];
$spreadwidthlow = $_POST['spreadwidthlow'];
$spreadwidthhigh = $_POST['spreadwidthhigh'];
$entryminimumdistance = $_POST['entryminimumdistance'];
$entryminimumpremium = $_POST['entryminimumpremium'];
$entryminimumpremiumtrigger = $_POST['entryminimumpremiumtrigger'];
$entryminimumprofit = $_POST['entryminimumprofit'];
$entryminimumprofittrigger = $_POST['entryminimumprofittrigger'];
$entryminimumshortlegvol = $_POST['entryminimumshortlegvol'];
$entryminimumshortlegvoltrigger = $_POST['entryminimumshortlegvoltrigger'];
$entryminimumlonglegvol = $_POST['entryminimumlonglegvol'];
$entryminimumlonglegvoltrigger = $_POST['entryminimumlonglegvoltrigger'];
$exitminimumshortlegvol = $_POST['exitminimumshortlegvol'];
$exitminimumshortlegvoltrigger = $_POST['exitminimumshortlegvoltrigger'];
$exitminimumlonglegvol = $_POST['exitminimumlonglegvol'];
$exitminimumlonglegvoltrigger = $_POST['exitminimumlonglegvoltrigger'];
$exitmaximumdelta = $_POST['exitmaximumdelta'];
$exitmaximumdeltatrigger = $_POST['exitmaximumdeltatrigger'];
$exitmaximumdistance = $_POST['exitmaximumdistance'];
$exitmaximumdistancetrigger = $_POST['exitmaximumdistancetrigger'];
$exitstoplossmultiplier = $_POST['exitstoplossmultiplier'];
$exitstoplossmultipliertrigger = $_POST['exitstoplossmultipliertrigger'];
$earlyexitpremiumloss = $_POST['earlyexitpremiumloss'];
$earlyexitpremiumlosstrigger = $_POST['earlyexitpremiumlosstrigger'];
$earlyexitprofitloss = $_POST['earlyexitprofitloss'];
$earlyexitprofitlosstrigger = $_POST['earlyexitprofitlosstrigger'];
$earlyexitminimumdays = $_POST['earlyexitminimumdays'];
$earlyexitminimumdaystrigger = $_POST['earlyexitminimumdaystrigger'];
echo "$strategyname<br>";
?>
Upvotes: 1
Views: 819
Answers (2)
Iceman
Reputation: 6145
Add data-ajax = "false" to the form tag like
<form action="strategyreview.php" method="post" data-ajax = "false">
Upvotes: 0
Jacob Mulquin
Reputation: 3608
The form doesn't appear to be working because of the way jQuery Mobile handles form submits. The page hasn't actually changed even though the URL, etc is different.
Add data-ajax="false" to the form tag to prevent jQuery mobile from handling the form submit through AJAX.
Upvotes: 1
Related Questions
- Jquery Ajax form submit to PHP returns empty response
- PHP form submission returns blank
- jQuery .submit() - No Response
- jQuery/HTML/PHP - Why does my form submit not work?
- php ajax based form displaying blank page
- Basic form submission with jquery/ajax not working
- JQuery/PHP form not Submiting
- Jquery - Form doesn't submit
- jquery/ajax form submission not working
- HTML/JQuery form not posting to PHP