所以，我正在制作一个基于学校的项目，它必须在 javascript 和 jquery 中完成。然而，这些语言对我来说很新，所以对我来说有点困难。我的问题：如何附加我的按钮以便它可以提交我填写的表格？一个让你了解它的小提琴。我希望我的按钮放在绿色按钮旁边，请不要介意红色减号按钮。这是正在进行中的事情。jsfiddle.net/DanDy/hqy73b0h
下面是我要实现的代码：
function submitCSMBtn(target, i) {
var submitBtn = $('<button/>', {
'class': 'btn btn-info fa fa-download',
'type': 'submit',
});
return submitBtn;
}
所有代码，以防您需要将其作为一个整体进行审查：
$(document).ready(function(){
var id = 0;
var addOpdracht = $('<a/>', {
'class': 'btn btn-success',
'id': 'addOpdracht'
}).on('click', function(){
$('form').append(getExerciseBlock(id));
id++;
}).html('<i class="fa fa-plus"></i>');
$('form').append(addOpdracht);
})
function getAddBtn(target, i){
var addBtn = $('<a/>', {
'class': 'btn btn-primary'
}).on('click', function(){
$(target).append(getWordPartInput(i));
}).html('<i class="fa fa-plus"></i>');
console.log(target);
return addBtn;
}
function getExerciseBlock(i){
var eBlock = $('<div/>',{
'id': i,
'class': 'col-md-12, eBlock'
});
$(eBlock).append(getAudioBtn(i), getWordInput(i), getWordPartInput(i),
getAddBtn(eBlock, i));
return eBlock;
}
function getAudioBtn(id, cValue){
cValue = cValue || '';
var audioBtn = $('<a/>', {
'class': 'btn btn-primary'
}).html('<i class="fa fa-volume-up"></i>');
return audioBtn;
}
function getWordInput(id, cValue){
cValue = cValue || '';
var wInput = $('<input/>', {
'class': 'form-group form-control',
'type': 'text',
'name': 'question_takeAudio_exerciseWord[]',
'placeholder': 'Exercise',
'id': 'exerciseGetWordInput'
})
return wInput;
}
function getWordPartInput(id, cValue){
cValue = cValue || '';
var wpInput = $('<input/>', {
'class': 'form-group form-control',
'type': 'text',
'value': cValue,
'placeholder': 'Syllables',
'id': 'SyllablesGetWordPartInput'
});
return wpInput;
}
function submitCSMBtn(target, i) {
var submitBtn = $('<button/>', {
'class': 'btn btn-info fa fa-download',
'type': 'submit',
});
return submitBtn;
}
我正在尝试添加我的提交按钮，以便它提交表单（必须转到 JSON，也许会有不同的方法......只是提供额外的信息）。据我所知，如果没有记错的话，我应该在命令 .on('click', function()) 中使用一些东西，如果没有记错的话，它也应该进入我的 eBlock，但是每当我尝试这样做时，它都会导致我失去功能（例如，添加输入等，但我保留布局）。然而，我一直在环顾四周以清楚地解释 on('click') 函数，因为它对我来说是新的。我发现的是http://api.jquery.com/on/不确定这是否相同。所以如果你们能帮助我，那就太好了！
编辑：我的 HTML 代码也是如此。显然这也需要，抱歉。注意：我只是将代码从正文带到正文，而不是将无用的代码也放入其中。
<body>
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<h2 id="exerciseTitleCMS" class="col-md-8 col-sm-7 col-xs-6">CMS</h2>
<div class="col-md-offset-2 col-md-2">
<h2>
<select class="languageSelector form-control required" id="languageSelector" ></select>
</h2>
</div>
</div>
</div> <!-- end of panel-heading -->
<div class="panel-body">
<div class="jumbotron" id="mainList">
<form class="container-fluid" action="#" method="POST" required>
</form>
</div>
</div> <!-- end of panel-body -->
</div> <!-- end panel-primary -->
</div> <!--end panel-group -->
</div> <!-- end of container-->
</body>
试试这个：
$('<button></button>')
.addClass('btn-class')
.attr('type', 'submit')
.appendTo('form-selector');
但不是动态添加提交按钮，您也可以将按钮放在 HTML 表单中，然后以编程方式在某个事件上显示它：
使用 jQuery：
$(function() {
$('#submit_button').hide();
$('#show_submit_button').on('click', function() {
$('#submit_button').show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='my_form' class='my_form_class'>
<input type='submit' id='submit_button' />
</form>
<button id='show_submit_button'>Show submit button!</button>或者使用 CSS（和 jQuery）：
$(function() {
$('#toggle_submit_button').on('click', function() {
$('#submit_button').toggleClass('hidden_submit_buttton shown_submit_button');
});
});.hidden_submit_button {
display: none;
}
.shown_submit_button {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='my_form' class='my_form_class'>
<input type='submit' id='submit_button' class='hidden_submit_button' />
</form>
<button id='toggle_submit_button'>Show/Hide submit button!</button>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句