#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    3
    Rep Power
    0

    Get iterated id value for form validation


    Hi all!!! I have just joined this forum so Greetings to everyone!

    I have a form in which I have a for-loop in php to generate multiple text fields.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <form id="form1" name="form1" method="post" action="">
      <p>
        <?php 
    for ($i=1;$i<=3;$i++){
    ?>
            <input type="text" name="textfield<?php echo $i; ?>" id="textfield<?php echo $i; ?>" />
        </br>
      <?php  } ?>
      </p>
      <p>
        <input type="submit" name="button" id="button" value="Submit" />
      </p>
    </form>
    </body>
    </html>
    Since I need to validate the input fields, I do not know how to use the document.getElementById('textfield<?php echo $i; ?>').
    I know this is wrong, and I may need to get something like getElementById('textfield'+$i) ... I have tried a lot but I am an absolute beginner in Javascript and so am clueless!!!

    Do I aslo need to use a for loop in the javascript file to generate the $i or something????

    Can anyone help me please?

    Thanks in advance!
    Last edited by 786aslamkhan; February 24th, 2014 at 11:39 AM. Reason: typo error sorry!!!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    184
    You would do something along these lines:
    Code:
    <script>
    var error_count;
    function checkVal()
    {
    error_count = document.getElementById("inputFields").getElementsByTagName("input").length;
    var txtFields = document.getElementById("inputFields").getElementsByTagName("input");
     for(i=0;i<txtFields.length;i++){
      if(txtFields[i].value.length == 0){
       alert("Missing A Value In \"textfield" + Number(i+1) + "\" !");
      }
      else {
       error_count = error_count - 1;
      }
     }
     if(error_count == 0){
      document.getElementById("someForm").onsubmit = function(){
       return true;
      }
     }
    }
    </script>
    
    <form id="someForm" action="#" method="post" onsubmit="return false">
     <span id="inputFields">
      <p>
       <input type="text" name="textfield1"/>
      </p>
      <p>
       <input type="text" name="textfield2"/>
      </p>
      <p>
       <input type="text" name="textfield3"/>
      </p>
     </span>
     <input type="submit" onclick="checkVal()"/>
    </form>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    3
    Rep Power
    0
    @web_loone08: Thanks a million for your time, advice, code and that you viewed my post and responded to help and teach me!

    I am trying to firstly understand it... this treasure of advice and code... so that I maybe able to adapt it.

    Thank you for pointing me in the right direction! I really appreciate it! I am in the process of "getting it" and will give you my feedback as soon as I can.

    Thank you!!!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    3
    Rep Power
    0
    @web_loone08: Thank you for your interest, time and advice. I have worked a lot at various alternatives including using javascript libraries and have decided to use one of them.

    I am grateful for your help and have learnt a lot from you!

IMN logo majestic logo threadwatch logo seochat tools logo