Javascript 如何实现我的按钮？_Javascript_Jquery

Javascript 如何实现我的按钮？

javascript jquery

Javascript 如何实现我的按钮？,javascript,jquery,Javascript,Jquery,所以，我正在做一个基于学校的项目，它必须用javascript和jquery完成。然而，这些语言对我来说是很新的，所以对我来说有点困难。我的问题：如何添加我的按钮，以便它可以提交我填写的表单？一把小提琴让你了解它。我想把我的按钮放在绿色的旁边，请不要介意红色的减号按钮。这是正在进行的事情。jsfiddle.net/DanDy/hqy73b0h 下面是我要实现的代码： function submitCSMBtn(target, i) { var submitBtn = $('<butt

所以，我正在做一个基于学校的项目，它必须用javascript和jquery完成。然而，这些语言对我来说是很新的，所以对我来说有点困难。我的问题：如何添加我的按钮，以便它可以提交我填写的表单？一把小提琴让你了解它。我想把我的按钮放在绿色的旁边，请不要介意红色的减号按钮。这是正在进行的事情。jsfiddle.net/DanDy/hqy73b0h

下面是我要实现的代码：

function submitCSMBtn(target, i) {
  var submitBtn = $('<button/>', {
 'class': 'btn btn-info fa fa-download',
 'type': 'submit',
 });

return submitBtn;
}

功能提交CMBTN（目标，i）{
变量submitBtn=$（''{
“类”：“btn btn信息fa下载”，
“类型”：“提交”，
});
返回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;
  }

$（文档）.ready（函数（）{
var-id=0；
var addOpdracht=$（'
不知道这是否是相同的。所以如果你们能帮助我，那就太好了
编辑：我的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>


CMS
你做错了。
附加对象的方法很少
而不是：
function submitCSMBtn(target, i) {
  var submitBtn = $('<button/>', {
 'class': 'btn btn-info fa fa-download',
 'type': 'submit',
 });

return submitBtn;
}

功能提交CMBTN（目标，i）{
变量submitBtn=$（''{
“类”：“btn btn信息fa下载”，
“类型”：“提交”，
});
返回submitBtn；
}

最简单的方法是只附加普通html字符串：
var submitBtn = '<button class=\'btn btn-info fa fa-download\' type=\'submit\'><button />';

//then you can append the html string to element you want to append:
$('#your_element_ID').append(submitBtn);

var submitBtn=''；
//然后，您可以将html字符串附加到要附加的元素：
$（'#您的_元素_ID'）。追加（submitBtn）；
试试这个：
$('<button></button>')
  .addClass('btn-class')
  .attr('type', 'submit')
  .appendTo('form-selector');


显示提交按钮！
你能给我们看一下你的HTML吗？当然：）你想让我编辑我的帖子并把它放进去吗？是的，没有HTML很难看到发生了什么。我希望你不介意我把身体的一部分放到身体的另一部分（因为这很可能是你想要的）.我尝试了你的代码，但它似乎与我的代码不兼容。你需要避开HTML字符串中的单引号。先生，你用各种可能的方式锁定了它。快速提问，是否可以制作一个像“显示/隐藏”这样的按钮一个变成提交按钮的按钮，或者这是不可能的，因为您必须将按钮从表单外部更改为表单内部？这是可能的，但我不建议这样做，因为它们是两个完全不同的按钮，具有完全不同的操作。但是如果您愿意，您可以使用add/removeClass
或attr
等更改按钮的属性好吧，我将以您的知识为依据，并认为这是理所当然的。我感谢您在这方面的帮助和努力！非常感谢@qjnr