www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Order Form - JS Alert when all the input fields values are 0

  1. #1
    Join Date
    Jun 2007
    Posts
    25

    resolved [RESOLVED] Order Form - JS Alert when all the input fields values are 0

    Hi Everyone.

    I'm working on a basic ordering form. What i'm trying to achive is to get javascript to return alert when all the inputs fields are with values 0.
    At least 1 of the inputs has to be filled in with value more then 0 in order to proceed with a ordering form.
    I have to mention that products list / input fields are generated dynamicly so their number might vary.

    Basic code:

    Code:
    <form name='packaging' action="packaging.php" method='post'>
    
    <?
    $result = mysql_query("SELECT * FROM packaging_items") or die(mysql_error());
                    while($row=mysql_fetch_array($result)) {
    echo "
    <input type='text' style='width:20px'  name='$row[prodno]' id='$row[prodno]' maxlength='4' value="0" onblur="if (this.value == '') {this.value = '0';}" onfocus="if (this.value == '0') {this.value = '';}" onkeypress='validate(event)' >
    ";
    }
    ?>
    
    </form>
    Any suggetions .. i really have no clue where to start ...

    Thank you in advance

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    there is about 2-3 million threads about form validation at this forum have you tried searching?

  3. #3
    Join Date
    Jun 2007
    Posts
    25
    well, i know there is a lot about a validation, it seems that i have no solution for this one, have admit im not an expert in javascrip too.. soo you ask ... do yo have some link that falls close to my problem ?? thx

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    try this

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Validate</title>
    <style type="text/css">
    body{background-color:#000000;color:#ffffff;font-weight:bold;text-align:center;margin:300px 0px 0px 0px;padding:0px 0px 0px 0px;}
    input[type=text]{width:20px;text-align:center;margin-right:10px;margin-left:10px;}
    .btn{color:#b0c4de;background-color:transparent;font-weight:bold;border:none;cursor:pointer;}
    </style>
    <script type="text/javascript">
    //short for document.getElementById(ID)
    function doc(ID){return document.getElementById(ID);}
    //generating random fields instead of php -------- START
    function randomNumber(m,n){m=parseInt(m);n=parseInt(n);return Math.floor(Math.random()*(n-m+1))+m;}
    function generate_fields(){
    var rnum=randomNumber(3,10);
    for(var i=0;i<rnum;i++){doc('random_fields').innerHTML+='<input type="text" name="prodno_'+i+'" name="prodno_'+i+'" maxlength="4" value="0" onblur="if(this.value==\'\'){this.value=\'0\';}" onfocus="if(this.value==\'0\'){this.value=\'\';}" onkeypress="validate(event)">';}
    }
    //generating random fields instead of php -------- END
    // validating the form
    function validateform(obj){
    var fields=obj.elements,valid=false,mask=/[\d]{1,4}/ig;
    for(var i in fields){
    if(fields[i].type!=='text'){continue;}
    //we need only numbers to be entered thats why we do test using a regexp
    if(fields[i].value!=='0' && mask.test(fields[i].value)){valid=true;break;}
    }
    if(!valid){alert('At least 1 field must be not equal to 0');}
    return valid;
    }
    //generate random fields onload
    window.onload=generate_fields;
    </script>
    </head>
    <body>
    <form name="mf" id="mf" action="" onsubmit="return validateform(this)">
    <div id="random_fields"></div>
    <br /><br /><br />
    <input class="btn" type="submit" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class="btn" type="reset" />
    </form>
    </body>
    </html>

  5. #5
    Join Date
    Jun 2007
    Posts
    25
    Found the solution on another forum.


    function validateForm(){
    var inputs = document.getElementsByTagName('input');
    var noneZeroFound = false;
    for(var i=0;i< inputs.length;i++){
    var input = inputs[i];
    if(input.value != '0'){
    noneZeroFound = true;
    break;
    }
    }
    if(!noneZeroFound ){
    alert('MUST ENTER VALUE...');
    return false;
    }

    return true;
    }

    <form name='packaging' action="packaging.php" method='post' onSubmit="return validateForm()">

  6. #6
    Join Date
    Jun 2007
    Posts
    25
    Thx Padonak - will look into your solution to ...

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    the code from another forum won't work if one of the fields is focused but no value is entered yet, because that code checks only input.value != '0'. the validation i wrote is not full also because it doesn't check all fields format after it finds one field having a digit entered. so my code needs changing too. we do not need to break the loop as it find a field having correct data entered. let it go until it check all the text inputs. this way we'll be sure that the user didn't enter something of wrong format AFTER one field with correct data
    Last edited by Padonak; 05-05-2013 at 10:10 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles