SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post I am having trouble in this serializeArray

    Hi, i have this inside in my form,my problem is that i could not get the value of the textfield having id's asset1

    HTML Code:
      <form id="myform">
           <div><input type="text" name="a"></div>
          <div><input type="text" name="b"></div>
          <div><input type="text" name="c"></div>
          <div><input type="text" name="d"></div>
        
           <div>
               <div id="mytable">
                    <tr>
                         <th>firstname</th>  <th>lastname</th>   <th>address</th>
                    </tr>
                     <!----this is created dynamically--------->
                     <tr><td><input type="text" id="asset1"></td><td><input type="text" id="asset2"></td><td><input type="text" id="asset3"></td></tr>
                     <tr><td><input type="text" id="asset1"></td><td><input type="text" id="asset2"></td><td><input type="text" id="asset3"></td></tr>
                      <tr><td><input type="text" id="asset1"></td><td><input type="text" id="asset2"></td><td><input type="text" id="asset3"></td></tr>
              
               </div>
          </div>
     </form><!--------End of my form ------->
    this is how i serialize..and i tried to alert the values.


    Code:
      var allasset1 = $('#asset1').serializeArray();
    
       $.each(allasset1,function(n,v)({
              alert(v.value);
     });
    Can you help me please on this.I am confuse...

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    The problem is that ids are meant to be unique to a page.
    Use a class instead:

    HTML Code:
    <tr><td><input type="text" class="asset1"></td><td><input type="text" class="asset2"></td><td><input type="text" class="asset3"></td></tr>
    <tr><td><input type="text" class="asset1"></td><td><input type="text" class="asset2"></td><td><input type="text" class="asset3"></td></tr>
    <tr><td><input type="text" class="asset1"></td><td><input type="text" class="asset2"></td><td><input type="text" class="asset3"></td></tr>
    Code JavaScript:
    $(".asset1").each(function(){
      console.log($(this).val());
    });

    You might also want to take a look at your mark-up.
    Using tables for layout purposes is not normally a good idea.
    Your code snippet is also missing the <table></table> tags.

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi jemz,

    The problem is that ids are meant to be unique to a page.
    Use a class instead:

    HTML Code:
    <tr><td><input type="text" class="asset1"></td><td><input type="text" class="asset2"></td><td><input type="text" class="asset3"></td></tr>
    <tr><td><input type="text" class="asset1"></td><td><input type="text" class="asset2"></td><td><input type="text" class="asset3"></td></tr>
    <tr><td><input type="text" class="asset1"></td><td><input type="text" class="asset2"></td><td><input type="text" class="asset3"></td></tr>
    Code JavaScript:
    $(".asset1").each(function(){
      console.log($(this).val());
    });

    You might also want to take a look at your mark-up.
    Using tables for layout purposes is not normally a good idea.
    Your code snippet is also missing the <table></table> tags.

    Hi pullo thank you it's working,it must be class...you are right i can see now all values.

    Using tables for layout purposes is not normally a good idea.
    What should i used instead of table?

    Your code snippet is also missing the <table></table> tags.
    Sorry my bad, I forgot the table tag.

    By the way pullo is that okay that i also used serialize for my form,and then i also used the serializeArray to get all the values of my asset1 ?
    please correct me if i am wrong


    Thank you again pullo for helping me

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    Quote Originally Posted by jemz View Post
    Hi pullo thank you it's working,it must be class...you are right
    I like it when people say that

    Quote Originally Posted by jemz View Post
    What should i used instead of table?
    CSS

    the way pullo is that okay that i also used serialize for my form,and then i also used the serializeArray to get all the values of my asset1 ?
    Well serialize is used to encode a set of form elements as a string for submission and serializeArray is used to encode a set of form elements as an array of names and values.

    So no, it's probably not ideal to be using both.

    What exactly are you trying to do?

    Can you give me a short example (but please don't dump 2000 lines of unformatted code on me ).

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What exactly are you trying to do?
    Okay the scenario here is that i have a form it has 8 textfields but i put only 4 for an example..it has also have table as you can see in my example,..and then inside my form i have a button that will trigger to create dynamically row for my table,and this row have 3 textfields actually it is 5 textfield i just put only 3 as for example.if the user will continue pressing the add button it will create another row having 3 textfield etc...so after the user filled all the textfields in my form...the user will click submit button with an id of Onsub,then it will send to my php via jquery.ajax...the reason is that i used serializeArray because in my php i could not get all the post values in my asset...but the other using serialize i have no problem getting the post values like the a,b,c,d textfield.

    HTML Code:
     <form id="myform">
           <div><input type="text" name="a"></div>
          <div><input type="text" name="b"></div>
          <div><input type="text" name="c"></div>
          <div><input type="text" name="d"></div>
        
           <div>
                <div 
                   <input type="submit" value="" id="addasset_row">
               </div>
               <div id="mytable">
                 <table id="myassettble">
                    <tr>
                         <th>firstname</th>  <th>lastname</th><th>address</th>
                    </tr>
                     <!----this is created dynamically--------->
                     <tr><td><input type="text" class="asset1" name="assname" ></td><td><input type="text" class="asset2" name="asslastname"></td><td><input type="text" class="asset3"  name="assage"></td></tr>
                     <tr><td><input type="text" class="asset1" name="assname" ></td><td><input type="text" class="asset2" name="asslastname" ></td><td><input type="text" class="asset3" name="assage"></td></tr>
                      <tr><td><input type="text" class="asset1" name="assname" ></td><td><input type="text" class="asset2" name="asslastname"></td><td><input type="text" class="asset3" name="assage"></td></tr>
                  </table>
               </div>
          </div>
    
          <div>
                 <input type="submit" name="submit" value="Submit"  id="Onsub"/>
                  <input type="reset" value="Cancel"   />
           </div>
     </form><!--------End of my form ------->


    Code:
        $(function(){
                   $('#addasset_row').click(function(e){
                       e.preventDefault();
    
                        $('#myassettble tr:last').after('<tr><td><input type="text" class="asset1" name="assname" ></td><td>' +
                            '<input type="text" name="asslastname" class="asset2"></td><td><input type="text" name="assage" class="asset3"></td>');
                           
                   });
                });
    For submitting the form
    Code:
      $('#Onsub').click(function(e){
          //perform jQuery ajax here in submitting the form...
       //using serialiaze and serializeArray();
        
    });


    but please don't dump 2000 lines of unformatted code on me
    I hope i did not

    CSS
    Okay you mean to change to DIV instead of table ?

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo,

    So no, it's probably not ideal to be using both.
    yes, this not good to use both serialize and serializeArray..


    I fixed it now i use this name="asset[]" and serialize only, this will send array to post...

    And in my serverside script i just use foreach to extract all the values.
    i think i am in the right way.


    I like it when people say that


    Thank you for helping me always...

  7. #7
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo,..how do i checked this if one of the textbox is empty during submitting the form via jquery.ajax.,..I want to check the textbox asset1[] if it is empty..how to do this in javascript.

    Thank you in advance.

    HTML Code:
      <!--creaated dynamically-->
      <tr><td><input type="text" class="asset1" name="asset1[]"></td><td><input type="text"  class ="asset2" name="asset2[]"></td><td><input type="text" class="asset3" name="asset3[]"></td></tr>
    
    <!---->

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    Try this:

    Code JavaScript:
    $("#myForm").on("submit", function(){
      if($(".asset1").val() === ""){
        // Do stuff ...
      }
    });

  9. #9
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi jemz,

    Try this:

    Code JavaScript:
    $("#myForm").on("submit", function(){
      if($(".asset1").val() === ""){
        // Do stuff ...
      }
    });
    Hi pullo, Thank you for the reply ..i have something to say what if it is created dynamically this way..

    HTML Code:
     <tr><td><input type="text" class="asset1" name="asset1[]"></td><td><input type="text"  class ="asset2" name="asset2[]"></td><td><input type="text" class="asset3" name="asset3[]"></td></tr>
     <tr><td><input type="text" class="asset1" name="asset1[]"></td><td><input type="text"  class ="asset2" name="asset2[]"></td><td><input type="text" class="asset3" name="asset3[]"></td></tr>
     <tr><td><input type="text" class="asset1" name="asset1[]"></td><td><input type="text"  class ="asset2" name="asset2[]"></td><td><input type="text" class="asset3" name="asset3[]"></td></tr>
    I have now 3 rows,how do i checked those textbox having class "asset1" if it is empty

    Thank you in advance.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    The way I showed you didn't work?
    Even if those elements are added dynamically, I would have thought they would submit with the form.

    If what I posted didn't work, can you post enough code that I can recreate your problem (e.g. add input elements etc).

  11. #11
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, your code works but it only get the first textbox whose class is "asset1"

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Ok, well post some code so that I can reproduce your error and I'll have a look.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,895
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    Actually, I'm being stupid.
    If you have more than one element of that class, then what I posted cannot work.

    Try this instead:

    Code JavaScript:
    $("#myForm").on("submit", function(){
      $(".asset1").each(function(){
        // Do stuff with each element of the class asset.
        // e.g. console.log($(this).val())
      })
    });

  14. #14
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,096
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi jemz,

    Actually, I'm being stupid.
    If you have more than one element of that class, then what I posted cannot work.

    Try this instead:

    Code JavaScript:
    $("#myForm").on("submit", function(){
      $(".asset1").each(function(){
        // Do stuff with each element of the class asset.
        // e.g. console.log($(this).val())
      })
    });

    Hi pullo, your code works thank you so much...


Bookmarks

Posting Permissions

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