JQuery Concat All Input Values-VBForums
Results 1 to 2 of 2

Thread: JQuery Concat All Input Values

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    8,884

    JQuery Concat All Input Values

    Basically I have 0 or more <div> elements that have the following markup:
    HTML Code:
    <div>
      <header>
        <input class="btnClose" type="button" value="X" />
        <label> New Driver</label>
      </header>
      <main>
        <label>* Full Name</label>
        <input class="txtName" required="required" type="text" />
        <label>* Date of Birth</label>
        <input class="txtDOB" required="required" type="date" />
        <label>License</label>
        <input class="txtLicense" type="text" />
      </main>
    </div>
    What I'm wanting to do is return a string of each <div> with the label, followed by the next input's value on their own separate line. So if I have 2 <div> and the values are:
    David D.
    08/12/1991
    ABC123

    Shaggy H.
    01/01/2016
    empty

    Then the string returned would be:
    Full Name: David D.
    Date of Birth: 08/12/1991
    License: ABC123

    Full Name: Shaggy H.
    Date of Birth: 01/01/2016

    I don't know if it is possible to do it within a few lines or if I'm going to have to loop through each div, then loop through each label and each input.

  2. #2
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,634

    Re: JQuery Concat All Input Values

    Sorry for the late response! Was not here in the forums recently.

    Anyway, this would be one way to accomplish it:

    jQuery:
    Code:
    $(function(){
      $('#btnConcat').on('click', function(){
        var strFinalOutput = '';
        
        $('#input_div div').each(function(){      
          var n = $(this).find('main *').length / 2;
          var strOutput = '';
          for(var i = 0; i < n; i++)
          {
            var in_element = $(this).find('main input').eq(i);
            var lbl_text = $.trim( $(this).find('main label').eq(i).text().replace('*', '') );
            if( $.trim( in_element.val() ) != '' )
              strOutput += lbl_text + ': ' + $(in_element).val() + '<br>';          
          }
          
          strFinalOutput += strOutput + '<br><br>';
        });
        
        $('#result').html( strFinalOutput );
      });
    });
    HTML:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
      
      <div id="input_div">
        <div>
          <header>
            <input class="btnClose" type="button" value="X" />
            <label> New Driver</label>
          </header>
          <main>
            <label>* Full Name</label>
            <input class="txtName" required="required" type="text" />
            <label>* Date of Birth</label>
            <input class="txtDOB" required="required" type="date" />
            <label>License</label>
            <input class="txtLicense" type="text" />
          </main>
        </div>
    
        <div>
          <header>
            <input class="btnClose" type="button" value="X" />
            <label> New Driver</label>
          </header>
          <main>
            <label>* Full Name</label>
            <input class="txtName" required="required" type="text" />
            <label>* Date of Birth</label>
            <input class="txtDOB" required="required" type="date" />
            <label>License</label>
            <input class="txtLicense" type="text" />
          </main>
        </div> 
      </div>
      
      <br>
      <hr>
      
      <button id="btnConcat">OUTPUT</button>
      
      <div id="result"></div>
    </body>
    </html>


    I have been trying to post this reply for more than an hour now! And because of some SPAM prevention system of the forum, my response is not getting saved!

    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.