how do i get clone input values in javascript [duplicate]

Question

Hi here i have one button , when I click that add element button two input field will come like one by one for this i have used clone() function .here my problem is after given some values for each input files and click the submit button i got only one field value . here is my code

<html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
    $(document).ready(function(){
            $('#btn1').click(function(){
            var $div = $('div[id^="trace-div"]:last');
            var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
            var $klon = $div.clone().prop('id', 'trace-div'+num );

                  $klon.find("input[name='t1_x_axis']").attr("id", "x_axis_t"+num).val("");
                $klon.find("input[name='t1_y_axis']").attr("id", "y_axis_t"+num).val("");
                $div.after( $klon);

        });
    }); 
    function chartsubmitbtn(){
        var clones = $("input:text").clone();
        //var str = JSON.stringify(clones);
        console.log(clones.val());
        return true;
    }

    </script>

    <body>
    <button type = "button" id = "btn1" > Add element</button>
    <div id = "trace-div1">
    <h4><b>Trace 1 </b></h4>
      <form>
          <table>
              <tbody>
                 <tr>
                     <td><label>X Axis:  </label></td>                                               
                     <td><input type="text" name="t1_x_axis" id="x_axis_t1" size="50"></td>                                         
                  </tr>                                                                             
                  <tr>
                     <td><label>Y Axis:  </label></td>
                     <td><input type="text" name="t1_y_axis" id="y_axis_t1" size="50"></td>
                  </tr>
              </tbody>
          </table>
       </form>  
  </div> 
  <button type="button" id="chart-report-submit"  onclick="chartsubmitbtn();">Submit</button>

    </body>
</html>

Note:if i don't use val() in console.log() it is giving json data.from that how can i get my values . Thanks

PHP overwrites multiple form parameters with the same name, unless you use the “special syntax” using square brackets to make it create arrays, see duplicate for details. — 04FS
– 04FS, Commented Sep 20, 2019 at 9:00
Thanks for your response ,here i need those input values in chartsubmitbtn() when i click the submit button .becz i want send those value data into controller(codeigniter) using ajax call .Thanks — murala sandeep
– murala sandeep, Commented Sep 20, 2019 at 9:13

Abito Prakash · Accepted Answer · 2019-09-20 09:09:11Z

0

Not able to understand your exact requirement, but in the clones variable you are using you are getting an array of HTMLCollection objects. So you can convert it into a normal array using [...clones] and then iterate over it to print all the values in the console.

function chartsubmitbtn() {
   var clones = $("input:text").clone();
   [...clones].forEach(item => console.log(item.value));
   return true;
 }

Hope this helps :)

answered Sep 20, 2019 at 9:09

Abito Prakash

4,8002 gold badges16 silver badges28 bronze badges

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

4 Comments

murala sandeep Over a year ago

Hi @Prakash Thanks for your response .your code is working for me but in the end i am getting this http://,, before and after this word three empty spaces , why it is coming ?

Abito Prakash Over a year ago

Hi @sandeep. Can you explain a bit more on how you want the data in chartsubmitbtn as in this case we can have many input fields.

murala sandeep Over a year ago

HI @Prakash ,i got the ans from your code Thanks no issues nw

Abito Prakash Over a year ago

Glad to help :)

Collectives™ on Stack Overflow

how do i get clone input values in javascript [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related