如何在jQuery中更改输入名称 [英] How do I change the input name in jQuery

问题描述

这是我目前正在努力实现的目标:

This is what I am currently trying to achieve:

我正在尝试克隆表单并更改输入名称.我该怎么办?

I am trying to clone a form and change the input name. How would I pull this off.

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链接:

This is the jsfiddle link right here:

单击此处获取链接.

PS:我使用的是模板程序，因此jsfiddle看起来有点不好.

我是jQuery的新手，我一直在寻找解决方案，但是我似乎陷入了困境.

I am new to jQuery and I have been searching around a solution but I seem to get stuck with it.

我尝试将.last()与attr编辑一起使用，但这似乎无济于事.

I tried using the .last() with the attr edit but that seems not to do anything.

推荐答案

要更改输入名称，只需使用attr()方法

To change an input name just use attr() method

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

我建议您输入的内容不带ID，因此您应该使用以下方法之一:

and I remarque that you have input without Id so you should use one of those methods:

1/给每个输入一个ID，例如#input1 #input2

1/ give each input an Id for example #input1 #input2

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

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

或

您可以使用eq()

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

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

这篇关于如何在jQuery中更改输入名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！