How do I change the input name in jQuery

Question

This is what I am currently trying to achieve:

What it looks like I am 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>

This is the jsfiddle link right here:

Click here for the link.

PS: I am using a templater so the jsfiddle will look kinda bad.

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

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

change the name to what ?

elreeda
– elreeda

2016-01-05 22:14:23 +00:00
Commented Jan 5, 2016 at 22:14 — elreeda
– elreeda, Commented Jan 5, 2016 at 22:14

elreeda · Accepted Answer · 2017-10-05 11:31:28Z

10

To change an input name just use attr() method

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

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

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

or

you can use 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

edited Oct 5, 2017 at 11:31

answered Jan 5, 2016 at 22:19

elreeda

4,6072 gold badges22 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jstuartmilne · Accepted Answer · 2016-01-05 22:14:25Z

3

To change any attribute including name you can do this

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

Hope it helps

answered Jan 5, 2016 at 22:14

jstuartmilne

4,5181 gold badge22 silver badges30 bronze badges

Comments

Jonathan Zúñiga · Accepted Answer · 2016-01-05 22:15:27Z

2

Try this: $('input[name="0angle"]').attr('name', 'new-name');

answered Jan 5, 2016 at 22:15

Jonathan Zúñiga

6453 gold badges13 silver badges25 bronze badges

Collectives™ on Stack Overflow

How do I change the input name in jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related