I'm building a simple website which uses mysql as backend. I have a form which has 2 buttons of which one searches data from db and populates the page using Ajax another button updates the new values to db. Now my problem is i can't use both buttons as 'Submit' button.
我正在构建一个使用mysql作为后端的简单网站。我有一个有两个按钮的表单,其中一个按钮从db搜索数据并使用Ajax填充页面另一个按钮将新值更新为db。现在我的问题是我不能将这两个按钮用作“提交”按钮。
Ajax Method & Html Form:
Ajax方法和Html表单:
<script type="text/javascript">
$(document).ready(function(){
$(document).on('submit', '#update-form', function(){
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : 'search.php',
data : data,
success : function(data){
$(".display").html(data);
}
});
return false;
});
});
</script>
<body>
<div id="update" class="tab-pane fade">
<form id="update-form" role="form" class="container" method="post" action="search.php">
<h3>Update details</h3>
<table class="display">
<tr class="space">
<td><label>File Number:</label></td>
<td><input type="text" class="form-control" name="filenum" required></td>
</tr>
</table>
<button type="submit" class="btn btn-default text-center" name="search_btn" >Search</button>
<button type="submit" class="btn btn-default text-center" name="submit_btn" formaction="update.php">Update</button>
</form>
</div>
</body>
Now i want to know how can i modify above code so that i can use both button as submit.
现在我想知道如何修改上面的代码,以便我可以使用这两个按钮作为提交。
Tried withformaction
but it doesn't work because of Ajax method usage.
尝试使用格式但由于Ajax方法的使用它不起作用。
4 个解决方案
#1
3
You can do this in many ways.
你可以通过很多方式做到这一点。
The first that come to my mind is: change the button type to be button instead of submit and add a onclick attribute
我首先想到的是:将按钮类型更改为按钮而不是提交并添加onclick属性
<button type="button" onclick="submitForm('search.php')">Search</button>
<button type="button" onclick="submitForm('update.php')">Update</button>
Then in your javascript:
然后在你的javascript中:
function submitForm(url){
var data = $("$update-form").serialize();
$.ajax({
type : 'POST',
url : url,
data : data,
success : function(data){
$(".display").html(data);
}
});
}
#2
1
<form id="update-form">
...
...
<button type="button" class="submitForm" formaction="search.php">Search</button>
<button type="button" class="submitForm" formaction="update.php">Update</button>
</form>
And then your JS:
然后你的JS:
$('.submitForm').click(function(){
$.ajax({
method: 'post',
url: $(this).attr('formaction),
data: $("#update-form").serialize(),
...
...
success: function(){ }
});
});
#3
0
In jquery you can trigger a submit. Check this : https://api.jquery.com/submit/
在jquery中,您可以触发提交。检查一下:https://api.jquery.com/submit/
You create a div or other and in jquery you add a listener to this div :
你创建一个div或其他,并在jquery中为这个div添加一个监听器:
<div id="button">Here my button</div>
And in jquery
并在jquery
$('#button').on('click', function(){
$('#update-form').submit()
}
#4
0
$(document).ready(function(){
$(document).on('submit', '#update-form', function(){
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : 'search.php',
data : data,
success : function(data){
$(".display").html(data);
}
});
return false;
});
$(document).on('click', '#update-btn', function(){
var data = $("input[name='filenum']").val(); //Handle how you want
$.ajax({
type : 'POST',
url : 'update.php',
data : data,
success : function(data){
$(".display").html(data);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="update" class="tab-pane fade">
<form id="update-form" role="form" class="container" method="post" action="search.php">
<h3>Update details</h3>
<table class="display">
<tr class="space">
<td><label>File Number:</label></td>
<td><input type="text" class="form-control" name="filenum" required></td>
</tr>
</table>
<button type="submit" class="btn btn-default text-center" name="search_btn" >Search</button>
<button form='forn-is-not-exist' class="btn btn-default text-center" name="submit_btn" id="update-btn" >Update</button>
</form>
</div>
</body>
Check it out
一探究竟
#1
3
You can do this in many ways.
你可以通过很多方式做到这一点。
The first that come to my mind is: change the button type to be button instead of submit and add a onclick attribute
我首先想到的是:将按钮类型更改为按钮而不是提交并添加onclick属性
<button type="button" onclick="submitForm('search.php')">Search</button>
<button type="button" onclick="submitForm('update.php')">Update</button>
Then in your javascript:
然后在你的javascript中:
function submitForm(url){
var data = $("$update-form").serialize();
$.ajax({
type : 'POST',
url : url,
data : data,
success : function(data){
$(".display").html(data);
}
});
}
#2
1
<form id="update-form">
...
...
<button type="button" class="submitForm" formaction="search.php">Search</button>
<button type="button" class="submitForm" formaction="update.php">Update</button>
</form>
And then your JS:
然后你的JS:
$('.submitForm').click(function(){
$.ajax({
method: 'post',
url: $(this).attr('formaction),
data: $("#update-form").serialize(),
...
...
success: function(){ }
});
});
#3
0
In jquery you can trigger a submit. Check this : https://api.jquery.com/submit/
在jquery中,您可以触发提交。检查一下:https://api.jquery.com/submit/
You create a div or other and in jquery you add a listener to this div :
你创建一个div或其他,并在jquery中为这个div添加一个监听器:
<div id="button">Here my button</div>
And in jquery
并在jquery
$('#button').on('click', function(){
$('#update-form').submit()
}
#4
0
$(document).ready(function(){
$(document).on('submit', '#update-form', function(){
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : 'search.php',
data : data,
success : function(data){
$(".display").html(data);
}
});
return false;
});
$(document).on('click', '#update-btn', function(){
var data = $("input[name='filenum']").val(); //Handle how you want
$.ajax({
type : 'POST',
url : 'update.php',
data : data,
success : function(data){
$(".display").html(data);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="update" class="tab-pane fade">
<form id="update-form" role="form" class="container" method="post" action="search.php">
<h3>Update details</h3>
<table class="display">
<tr class="space">
<td><label>File Number:</label></td>
<td><input type="text" class="form-control" name="filenum" required></td>
</tr>
</table>
<button type="submit" class="btn btn-default text-center" name="search_btn" >Search</button>
<button form='forn-is-not-exist' class="btn btn-default text-center" name="submit_btn" id="update-btn" >Update</button>
</form>
</div>
</body>
Check it out
一探究竟