jQuery 提交方法适用于 Android 但不适用于 iOS
jQuery submit method works on Android but not on iOS
我在 PWA 中有一个小表单,它会在单击单选按钮后立即提交。它适用于 Mac/Chrome(用于测试)和 Android/Chrome,但不适用于 iOS/Safari。
表格是
<form name="changeavail" method="post">
<input type="radio" id="stat" name="availability" value="Station" <?php echo $statchkd ?> /> <label for="stat">To station</label><br><br>
<input type="radio" id="rv" name="availability" value="RV" <?php echo $rvchkd ?> /> <label for="rv">To RV</label><br><br>
<input type="radio" id="not" name="availability" value="Not available" <?php echo $notchkd ?> /> <label for="not">Not available</label><br>
<input type="hidden" name="MM_avail" value="changeavail" />
</form>
而 javascript 是
$(document).ready( function() {
$("form[name=changeavail] input").on("change", function() {
alert("I hate iOS!");
$("form[name=changeavail").submit();
alert("I still hate iOS!");
});
});
在 Android 我看到了警报和表单提交。在 iPhone 或 iPad 上,我只看到第一个警报,没有其他任何反应。
试试这个
const ua = navigator.userAgent,
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
$(function() {
$("#container").on(event, '[name=availability]', function(e) {
e.target.form.submit();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="changeavail" method="post">
<div id="container">
<label><input type="radio" name="availability" value="Station" <?php echo $statchkd ?> /> To station</label><br><br>
<label><input type="radio" name="availability" value="RV" <?php echo $rvchkd ?> /> To RV</label><br><br>
<label><input type="radio" name="availability" value="Not available" <?php echo $notchkd ?> /> Not available</label><br>
</div>
<input type="hidden" name="MM_avail" value="changeavail" />
</form>
或没有脚本(我假装从php检查过)
[type=submit] {
width: 130px;
font-size: 13px;
text-align: center;
line-height: $sw-height;
white-space: nowrap;
text-transform: uppercase;
opacity: 0.8;
justify-content: center;
align-items: center;
background-color: lightblue;
color: darkblue;
background-position: center;
border: 2px solid #C0C2BF !important;
padding: 0 10px;
margin-bottom: 10px;
}
[type=submit].checked {
font-weight: bold;
border: 2px solid black !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="changeavail" method="post">
<div id="container" class="bold_option_value">
<input type="submit" name="availability" value="Station" class="<?php echo $statchkd ?> checked" /><br/>
<input type="submit" name="availability" value="RV" class="<?php echo $rvchkd ?>" /><br/>
<input type="submit" name="availability" value="Not available" class="<?php echo $notchkd ?>" /><br/>
</div>
<input type="hidden" name="MM_avail" value="changeavail" />
</form>
我在 PWA 中有一个小表单,它会在单击单选按钮后立即提交。它适用于 Mac/Chrome(用于测试)和 Android/Chrome,但不适用于 iOS/Safari。
表格是
<form name="changeavail" method="post">
<input type="radio" id="stat" name="availability" value="Station" <?php echo $statchkd ?> /> <label for="stat">To station</label><br><br>
<input type="radio" id="rv" name="availability" value="RV" <?php echo $rvchkd ?> /> <label for="rv">To RV</label><br><br>
<input type="radio" id="not" name="availability" value="Not available" <?php echo $notchkd ?> /> <label for="not">Not available</label><br>
<input type="hidden" name="MM_avail" value="changeavail" />
</form>
而 javascript 是
$(document).ready( function() {
$("form[name=changeavail] input").on("change", function() {
alert("I hate iOS!");
$("form[name=changeavail").submit();
alert("I still hate iOS!");
});
});
在 Android 我看到了警报和表单提交。在 iPhone 或 iPad 上,我只看到第一个警报,没有其他任何反应。
试试这个
const ua = navigator.userAgent,
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
$(function() {
$("#container").on(event, '[name=availability]', function(e) {
e.target.form.submit();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="changeavail" method="post">
<div id="container">
<label><input type="radio" name="availability" value="Station" <?php echo $statchkd ?> /> To station</label><br><br>
<label><input type="radio" name="availability" value="RV" <?php echo $rvchkd ?> /> To RV</label><br><br>
<label><input type="radio" name="availability" value="Not available" <?php echo $notchkd ?> /> Not available</label><br>
</div>
<input type="hidden" name="MM_avail" value="changeavail" />
</form>
或没有脚本(我假装从php检查过)
[type=submit] {
width: 130px;
font-size: 13px;
text-align: center;
line-height: $sw-height;
white-space: nowrap;
text-transform: uppercase;
opacity: 0.8;
justify-content: center;
align-items: center;
background-color: lightblue;
color: darkblue;
background-position: center;
border: 2px solid #C0C2BF !important;
padding: 0 10px;
margin-bottom: 10px;
}
[type=submit].checked {
font-weight: bold;
border: 2px solid black !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="changeavail" method="post">
<div id="container" class="bold_option_value">
<input type="submit" name="availability" value="Station" class="<?php echo $statchkd ?> checked" /><br/>
<input type="submit" name="availability" value="RV" class="<?php echo $rvchkd ?>" /><br/>
<input type="submit" name="availability" value="Not available" class="<?php echo $notchkd ?>" /><br/>
</div>
<input type="hidden" name="MM_avail" value="changeavail" />
</form>