Как изменить имя входа в JQuery

Question

Это то, что я в настоящее время пытаюсь достичь:

Я пытаюсь клонировать форму и изменить имя входа. Как бы это сделать?

JS:

$(document).ready(function() { 
var counter = 0; 
var MAX_FIELDS = 3; 
var MIN_FIELDS = 1; 
var form = $('.force-group'); 

$('#add').on('click', function(e) { 
    if (counter < MAX_FIELDS) { 
     //$(".form-group").clone().appendTo("#forceForm"); 
     $.each(form, function(i) { 
      var clone = $('.force-group').first().clone(); 
      clone.children().val(""); 

      $(this).parent().append(clone); 
      if (counter == 0) { 
       $("b:eq(1)").html("<b> Force 2</b>"); 
      }; 
      if (counter == 1) { 
       $("b:eq(3)").html("<b> Force 3</b>"); 
      }; 
      if (counter == 2) { 
       $("b:eq(5)").html("<b> Force 4</b>"); 
      }; 

     }); 
     counter++; 
    }; 
}); 

HTML:

<#import "template.ftl" as layout /> 
    <@layout.template title="Force" js="/js/force.js" css="/css/force.css"> 

<h3 class = "text-center">Total Force</h3> 
<hr> 

<div class="col-md-6 col-md-offset-3 col-xs-8 col-xs-offset-2"> 
    <div class="force-selector input_fields_wrap"> 
     <a id = 'add' href="#" class="btn btn-primary col-md-5">Add Force</a> 
     <a id = 'remove' href="#" class="btn btn-warning col-md-5 col-md-offset-2">Remove Force</a> 
    </div> 
</div> 
<div class="col-md-6 col-md-offset-"> 
    <div class="col-xs-12"> 
     <div class = "well" id="force-input"> 
      <form id = "forceForm" class = "form-horizontal" method = "POST" autocomplete="off"> 
       <fieldset> 
        <h4 class="text-center" id="form-title"><strong>Input</strong></h4> 
        <div class="form-group force-group"> 
         <label class = "control-label col-md-2"><b>Force 1</b></label> 
         <label class = "control-label col-md-2">Magnitude</label> 
         <div class = "col-md-3 force-info"> 
          <input type = "text" class="form-control" name="0force" autocomplete="off"> 
         </div> 
         <label class = "control-label col-md-2">Angle</label> 
         <div class = "col-md-3 force-info"> 
          <input type = "text" class="form-control" name="0angle" autocomplete="off"> 
         </div> 
        </div> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 
<div class = "col-md-5"> 
    <table id = "forceChart" class="table table-striped table-hover"> 
     <thead> 
     <tr class="table"> 
      <th class="head-pad">Total Force</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr class="table"> 
      <td class="pad">Net Force:</td> 
     </tr> 
     </tbody> 
     </thead> 
     <tbody> 
     <tr class="table"> 
      <td class="pad">Direction:</td> 
     </tr> 
     </tbody> 
     <tfoot></tfoot> 
    </table> 
</div> 
<div class = "col-md-4 col-md-offset-4 col-xs-6 col-xs-offset-3"> 
    <div class="form-group"> 
     <div class = "col-md-6 col-xs-offset-3"> 
      <input id = "calculate" class = "btn btn-success btn-block" type="submit" value="Calculate!"> 
     </div> 
    </div> 
</div> 

Это jsfiddle ссылка здесь:

Click here for the link.

PS: Я использую templater, поэтому jsfiddle будет выглядеть как-то плохо.

Я новичок в jQuery, и я искал решение, но я, похоже, застрял в нем.

Я пробовал использовать .last() с редактированием attr, но это ничего не делает.

Answer 1

Чтобы изменить название входа просто использовать метод атра()

$('input').attr('name', 'yourNewname'); 

и я повторяю, что у вас есть вход без Id, поэтому вы должны себе один из этих методов:

1/дает каждый вход идентификатор, например #input1#input2

$('#input1').attr('name', 'yourNewname1'); // change the name of first input 

$('#input2').attr('name', 'yourNewname2'); // change the name of first input 

или

можно использовать уравнение()

$('input').eq(0).attr('name', 'yourNewname1'); // change the name of first input 

$('input').eq(1).attr('name', 'yourNewname2'); // change the name of first input 

Answer 2

Для изменения любого атрибута, включая имя, которое вы можете сделать это

$('#myInputFieldId').attr('name','new_name') 

Надеется, что это помогает

Answer 3

Попробуйте это: $('input[name="0angle"]').attr('name', 'new-name');