我继承了一个包含以下HTML的网页：
<input type="submit" value="1">Submit 1</input>
<input type="submit" value="2">Submit 2</input>
<input type="submit" value="3">Submit 3</input>
我需要更改此代码，以便我可以使用以下代码
<input type="button" onclick="onSubmitClick(1);">Submit 1</input>
<input type="button" onclick="onSubmitClick(2);">Submit 2</input>
<input type="button" onclick="onSubmitClick(3);">Submit 3</input>
<script type="text/javascript">
function onSubmitClick(val) {
// do something with val
$('#myForm').submit();
}
</script>
我的问题是，使用第一个代码，服务器收到＆＃34;值＆＃34; （即1,2,3）。在代码I中，更改为，1,2和3不再绑定到我的服务器代码。我该如何解决这个问题？
答案 0 :(得分：1)
您需要在表单中添加一个值，然后您可以设置该值，并将其发送到您的PHP服务器：
public class FurmolaAdapter extends ArrayAdapter implements Filterable {
List list = new ArrayList<>();
List disp_ls = new ArrayList<>();
public FurmolaAdapter(Context context, int resource) {
super(context, resource);
}
@NonNull
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View row;
row = convertView;
DataHandler handler;
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
row = inflater.inflate(R.layout.formula_item, parent, false);
handler = new DataHandler();
handler.molar = (TextView) row.findViewById(R.id.molar_mass_item);
handler.name = (TextView) row.findViewById(R.id.name_item);
handler.sympol = (TextView) row.findViewById(R.id.symp_item);
row.setTag(handler);
}else {
handler = new DataHandler();
handler.molar = (TextView) row.findViewById(R.id.molar_mass_item);
handler.name = (TextView) row.findViewById(R.id.name_item);
handler.sympol = (TextView) row.findViewById(R.id.symp_item);
row.setTag(handler);
}
FurmolaProvider provider ;
provider = (FurmolaProvider) this.getItem(position);
handler.molar.setText(provider.getMolar() + " ");
handler.molar.setBackground(getContext().getResources().getDrawable (R.drawable.molar_back));
handler.name.setText(provider.getName());
handler.sympol.setText(provider.getSympol());
return row;
}
private int getColor (double mole){
int res = 0;
if (mole > 250 && mole < 500) {
}
return android.R.color.holo_green_dark;
}
@Override
public void add(Object object) {
super.add(object);
list.add(object);
disp_ls.add(object);
}
static class DataHandler {
TextView molar;
TextView sympol;
TextView name;
}
@Override
public int getCount() {
return this.list.size();
}
@Nullable
@Override
public Object getItem(int position) {
return this.list.get(position);
}
@NonNull
@Override
public Filter getFilter() {
Filter filter = new Filter() {
@Override
protected FilterResults performFiltering(CharSequence constraint) {
FilterResults results = new FilterResults();
List filtList = new ArrayList<>();
if (list == null) {
list = new ArrayList(disp_ls);
}
if (constraint == null || constraint.length() == 0) {
// set the Original result to return
results.count = disp_ls.size();
results.values = disp_ls;
} else {
constraint = constraint.toString().toLowerCase();
for(int i=0; i < disp_ls.size() ; i++) {
FurmolaProvider data = (FurmolaProvider) disp_ls.get(i);
String da = data.getSympol() + " " + data.getName() ;
if (da.toLowerCase().contains(constraint)) {
filtList.add(disp_ls.get(i));
}
}
results.count = filtList.size();
results.values = filtList;
}
return results;
}
@Override
protected void publishResults(CharSequence constraint, FilterResults results) {
list = (List) results.values;
notifyDataSetChanged();
}
};
return super.getFilter();
}
}
在此示例中，我使用新的<input type="button" onclick="onSubmitClick(1);">Submit 1</input>
<input type="button" onclick="onSubmitClick(2);">Submit 2</input>
<input type="hidden" name="submit" id="submitid">
<script type="text/javascript">
function onSubmitClick(val) {
// do something with val
$('#submitid').val(val)
$('#myForm').submit();
}
</script>
<script type="text/javascript">
function onSubmitClick(val) {
// do something with val
$('#myForm').submit();
}
</script>
HTML标记创建了一个值。我将其设置为<input>，因此用户无法看到它并且不会更改它（它只能从JavaScript和开发工具中更改）
我给它标记的ID，并使用jQuery hidden函数来设置函数参数的值。
更多信息：
答案 1 :(得分：0)
理想情况下：使用常规提交按钮并逐步增强JavaScript。
如果您需要在JavaScript中执行异步操作，则可能无法执行此操作，在这种情况下：将值存储在表单中的隐藏输入中。
理想情况下，执行此操作时请继续使用常规提交按钮。
例如，因为您已经使用了jQuery：
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div-Equipamento-Produtividade" style="display: none;"></div>答案 2 :(得分：0)
如前所述，看到你正在使用jQuery，还有另一种选择。
您可以编写自定义事件，使用val，然后将其与表单数据合并，然后使用$.ajax请求手动发布。
假设以下HTML：
<form id="myForm" action="http://YourTargetUrl" method="post" accept-charset="utf-8">
<input name="ExampleFormData" type="text">
<input data-type="submit" type="button" value="1">Submit 1
<input data-type="submit" type="button" value="2">Submit 2
<input data-type="submit" type="button" value="3">Submit 3
</form>
我在上面添加data-type="submit"纯粹是为了有一个选择器来定位绑定，你可以做任何方式，类，输入类型等。我把它留给你。
附加输入仅用于显示您可能拥有的所有表单数据照常发布。
使用以下JavaScript，您可以将自定义click事件绑定到按钮，提取所单击按钮的值，使用该值来处理您需要使用的进程，然后手动发布请求，包括val以及表单数据。
$('[data-type=submit]').on('click', function(e, val) {
var $form = $('#myForm');
var val = this.value;
// do somethign with val
var data = $form.serializeArray();
// add val to the post data, using the variable name on the server as "name" for the serialize on the server side to map it to the correct variable.
data.push({
name: "theNameOfYourVariableOnServerReceivingVal",
value: val
});
// Manually execute a post request to the server
// Using the form's action attribute, containing the target URL to post to
// and using $.param to serialize the data array before posting
$.ajax({
type: 'POST',
url: $form[0].action,
data: $.param(data)
});
});
如果您必须按照之前的提交方式重新加载页面，则可以使用此类$.ajax success或complete回调函数。
$.ajax({
type: 'POST',
url: $form[0].action,
data: $.param(data),
success: function() {
location.reload();
}
});
使用ajax调用的好处是，您可以同时使用error回调，处理来自服务器的任何错误，例如在需要的同时在UI上显示它们仅在success请求时重新加载页面。
另一个好处是，您可以根据需要从请求中添加更多数据，逻辑数据以及表单标记之外元素的值。
下面的代码段已注释掉location.reload()，因此您可以看到表单数据的控制台条目。
$('[data-type=submit]').on('click', function(e, val) {
var $form = $('#myForm');
var val = this.value;
// do somethign with val
var data = $form.serializeArray();
// add val to the post data, using the variable name on the server as "name" for the serialize on the server side to map it to the correct variable.
data.push({
name: "theNameOfYourVariableOnServerReceivingVal",
value: val
});
//shows the merged form data to post
console.log(data);
//shows the form data serialized for the request
console.log($.param(data));
// Manually execute a post request to the server
// Using the form's action attribute, containing the target URL to post to
// and using $.param to serialize the data array before posting
$.ajax({
type: 'POST',
url: $form[0].action,
data: $.param(data),
success: function() {
// Only executes when the request was successful
// If you want to reload the page only when a request was successful
// reload it manually on success
//location.reload();
},
error: function() {
// Only executes when the request returns with an error
// If you want to deal with error from the server
// do it in here
},
complete: function() {
// Executes all the time when a request completed, regardless of error or success.
// If you must reload the page everytime, ignoring error
// reload the page manually on complete.
//location.reload();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="" method="post" accept-charset="utf-8">
<input name="ExampleFormData" type="text">
<input data-type="submit" type="button" value="1">Submit 1
<input data-type="submit" type="button" value="2">Submit 2
<input data-type="submit" type="button" value="3">Submit 3
</form>