I am having trouble in this serializeArray

JavaScript
1

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


  <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.


  var allasset1 = $('#asset1').serializeArray();

   $.each(allasset1,function(n,v)({
          alert(v.value);
 });

Can you help me please on this.I am confuse…

2

Hi jemz,

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

<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>

$(".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

Hi pullo thank you it’s working,it must be class…you are right :slight_smile: 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 :slight_smile:

Thank you again pullo for helping me :slight_smile:

4

Hi jemz,

I like it when people say that :slight_smile:

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

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.

 <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 ------->


    $(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


  $('#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 :slight_smile:

CSS

Okay you mean to change to DIV instead of table ?

6

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. :slight_smile:
i think i am in the right way.

I like it when people say that

:slight_smile:

Thank you for helping me always…:slight_smile:

7

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.:slight_smile:


  <!--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

Hi jemz,

Try this:

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

Hi pullo, Thank you for the reply :)…i have something to say what if it is created dynamically this way…


 <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

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

Hi pullo, your code works but it only get the first textbox whose class is “asset1”

12

Ok, well post some code so that I can reproduce your error and I’ll have a look.

13

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:

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

Hi pullo, your code works :slight_smile: thank you so much…