我使用PHP运行最终更新表的SQL命令。现在我使用maskedinput.js插件使用以下格式格式化电话号码：(999) 999-9999。
我想要做的是，在提交之前，将电话格式化为数字。很自然地，我认为我会处理表单的on submit事件，然后使用RegEx设置输入＆＃39;值只返回数字。但是，on submit事件永远不会被解雇。
我尝试将onsubmit元素的form属性设置为如下函数：
<form id="update_business" method="post" onsubmit="format()" action="assets/php/update_business.php">
......但永远不会被解雇。所以，我尝试设置提交jQuery函数，如下所示：
$('#update_business').on('submit', function(e) {...});
......但它也没有开火。所以，我尝试首先通过文档设置事件处理程序，如下所示：
$(document).on('submit', '#update_business', function(e) {...});
......但它也没有开火！在这一点上，我搜索了无数的stackoverflow帖子，为什么事件永远不会触发，但我找不到任何解决我问题的东西。
更新
我的提交按钮的标记是：
<button class="btn btn-success" type="submit">Save</button>
更新＃2
在实施Abdulla Nilam的建议时我的表格的标记：
$(document).ready(function(){
// format the phone numbers
$('input[type="tel"]').mask('(999) 999-9999');
// setup the toolbar that the richtext editor will use
var toolbar = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[ 'link', 'image', 'video', 'formula' ],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
];
// setup the rich text editor for the signature
var editor = new Quill('#signature', {
modules: {
formula: true,
syntax: true,
container: '#signature.toolbar-container',
toolbar: toolbar
},
placeholder: 'signature',
theme: 'snow'
});
// form submission
function onSubmit( form ){
var data = JSON.stringify( $(form).serializeArray() );
console.log( data );
return false; //don't submit
}
$('#update_business').submit(function() {
alert('here');
return true; // Must
});
/*$('#update_business').submit(function() {
// remove any non-digits from the telephone inputs
$('input[type="tel"]').text(function(index, text){return text.replace(/^D/, '');});
// set the text of the hidden signature field
$('#hidden_signature').text(editor.root.innerHTML);
return true;
});*/
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="//cdn.quilljs.com/1.3.5/quill.min.js"></script>
<link href="//cdn.quilljs.com/1.3.5/quill.snow.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form id="update_business" method="post" action="assets/php/update_business.php">
<input class="form-control" type="hidden" name="return_url" required="required" value="profile.php" />
<fieldset>
<legend>Business Information</legend>
<input class="form-control" type="hidden" name="business_id" required="required" id="business_id" value="<?php echo $profile->business_id; ?>" />
<div class="form-group">
<label for="business_name">Business Name</label>
<input class="form-control" type="text" name="business_name" required="required" id="business_name" value="<?php echo $profile->name; ?>" />
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="phone">Phone Number</label>
<input class="form-control" type="tel" name="phone" required="required" id="phone" value="<?php echo $profile->phone; ?>" />
</div>
<div class="form-group col-md-6">
<label for="fax">Fax Number</label>
<input class="form-control" type="tel" name="fax" required="required" id="fax" value="<?php echo $profile->fax; ?>" />
</div>
</div>
</fieldset>
<fieldset>
<legend>Address Information</legend>
<div class="form-group">
<label for="address">Address</label>
<input class="form-control" type="text" name="address" required="required" id="address" value="<?php echo $profile->address; ?>" />
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="city">City</label>
<input class="form-control" type="text" name="city" required="required" id="city" value="<?php echo $profile->city_name; ?>" />
</div>
<div class="form-group col-md-4">
<label for="state">State</label>
<select class="form-control" name="state" id="state">
<?php
$states = include('assets/php/get_states.php');
foreach ($states as &$state) {
echo '<option value="' . $state['state_id'] . '"' . ($state['abbreviation'] == $profile->abbreviation ? 'selected="selected"' : '') . '>' . $state['abbreviation'] . "</option>\n";
}
?>
</select>
</div>
<div class="form-group col-md-4">
<label for="zip">Zip Code</label>
<input class="form-control" type="text" name="zip" required="" pattern="\d{5}" id="zip" value="<?php echo $profile->code; ?>" />
</div>
</div>
</fieldset>
<fieldset>
<legend>Signature</legend>
<div class="form-group">
<label>Signature</label>
<div class="form-control" aria-describedby="signature_help" id="signature" style="min-height: 25rem;">
<div class="toolbar-container"></div>
<div class="editor-container h-25"></div>
</div>
<input type="hidden" name="signature" id="hidden_signature" />
<small id="signature_help" class="form-text text-muted">Signatures are not updated immediately, instead they must first be approved for compliance.</small>
</div>
</fieldset>
<button class="btn btn-success" type="submit">Save</button>
</form>
答案 0 :(得分：2)
表格
<form id="update_business" method="post" action="assets/php/update_business.php">
在同一页的底部
$('#update_business').submit(function() {
alert('here');
return true; // Must
});
确保在各自的页面上加载jQuery
答案 1 :(得分：0)
试试这个......
function onSubmit( form ){
var data = JSON.stringify( $(form).serializeArray() ); // <-----------
console.log( data );
return false; //don't submit
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit='return onSubmit(this)'>
<input name='user' placeholder='user'><br>
<input name='password' type='password' placeholder='password'><br>
<button type='submit'>Try</button>
</form>