www.webdeveloper.com
Results 1 to 15 of 15

Thread: Alert message not displaying in javascript

  1. #1
    Join Date
    Oct 2013
    Posts
    26

    Alert message not displaying in javascript

    HTML Code:
    <?php
    $expression = '';   
    $input      = array( 'a' => 5,    
                         'b' => 10,
                         'c' => 15,
                         'd' => 20); 
    $total = 0;
    $sum   = '';
    // Override default expression and input values
    if(isset($_POST['Calculate']))
    {
        $input      = $_POST['input'];			//input being passed via POST method
        $expression = $_POST['expression'];		//expression being passed via POST method 
    }
    // make sure the users expression is safe to use
    if(preg_match('#^[a-z+-\s]+$#i', $expression))
    {
        $sum = $expression;			//evaluates sum as expression
    	$input_letters = array();	//puts letters into a array
    	$input_operators = array(); //puts operators into a array
    	
    	
    	for ($i = 0; $i < strlen($expression) ; $i++) { //gets string length
    	if (($i % 2) == 0) {
    	$input_letters[] = $expression[$i]; //getting the character for the position i 
    	} else {
    	$input_operators[] = $expression[$i];
    	}
    	}
        // 
    	for ($i = 0 ; $i < sizeof($input_letters); $i++) { //size of= numbers (4)
    	$value = $input[$input_letters[$i]]; //takes the value  from the letters 
    	if ($i == 0) { 
    		$sum += $value; //adds the sum if = 0
    	} else {
    	if ($input_operators[$i-1] == '+') { //checks to see if the operator is +
    	$sum += $value;
    	} else if ($input_operators[$i-1] == '-')  { //checks to see if the operator is -
    	$sum -= $value;
    	}
    	}
    	print_r($value);
    	}
    } else {    
    echo "Error: expression not correct form"; //error message
    }
    ?>
    <form action=""  method="post">     <!--Form begins--> 
        Number A: <input type="text" name="input[a]" value="<?php echo $input['a']; ?>" size=3> <br/>
        Number B: <input type="text" name="input[b]" value="<?php echo $input['b']; ?>" size=3> <br> 
        Number C: <input type="text" name="input[c]" value="<?php echo $input['c']; ?>" size=3> <br> 
        Number D: <input type="text" name="input[d]" value="<?php echo $input['d']; ?>" size=3> <br>
        <br>
        Expression: <input type = "text" name = "expression" value="<?php echo $expression ?>">  = 
    <?php echo $sum; ?><br>
        Sum: <?php echo $sum; ?><br>
        <input type="submit" name="Calculate" /> 
    </form>
    
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    $( "form" ).submit(function( event ) {
    var myExpression = $('[name="expression"]').val();
    if $("$input_letters").validate({
    myExpression: { maxlength: 4 
    				}
            };
    } else {
    alert("Enter only four expressions");
    }
    });
    </script>
    in the code i provided, how would i add a javascript on the bottom check to see that user entered four letters, if they enter more then for expressions, then when submit is clicked, put a alert message saying you cant. it starts in the script section but Im not sure why it isnt working when i click submit after I run it.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    Code:
    var val_is_good=($('input[name="expression"]').val().length==4)?true:false;
    if(!val_is_good){alert('Enter four letters or die!');}

  3. #3
    Join Date
    Oct 2013
    Posts
    26
    thanks, where would I put this coded?

  4. #4
    Join Date
    Oct 2013
    Posts
    26
    Quote Originally Posted by Padonak View Post
    Code:
    var val_is_good=($('input[name="expression"]').val().length==4)?true:false;
    if(!val_is_good){alert('Enter four letters or die!');}
    thanks padonak, where would I put this code? do i erase anything else

  5. #5
    Join Date
    Oct 2013
    Posts
    26
    would it be like this?

    HTML Code:
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    
    $( "form" ).submit(function( event ) {
    var val_is_good=($('input[name="expression"]').val().length==4)?true:false;
    if(!val_is_good){alert('Enter four letters or die!');}
    
    });
    </script>

  6. #6
    Join Date
    Oct 2013
    Posts
    26
    When i put the script, it still runs but it gives me the alert message, is there a way to stop the forum?

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    in case you want to check the length only try this:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>123</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(document).ready(function(){
    
    $("#myform").submit(function(event){
    var val_is_good=($('input[name="expression"]').val().length==4)?true:false;
    if(!val_is_good){alert('Enter four letters or die!');return false;}
    else{return true;}
    });
    
    });
    </script>
    </head>
    <body>
    <form id="myform" action="" method="post">     <!--Form begins--> 
    Number A: <input type="text" name="input[a]" value="1" size=3 /><br/>
    Number B: <input type="text" name="input[b]" value="2" size=3 /><br /> 
    Number C: <input type="text" name="input[c]" value="3" size=3 /><br />
    Number D: <input type="text" name="input[d]" value="4" size=3 /><br />
    <br />
    Expression: <input type="text" name="expression" value="11">  = sum goes here<br />
    Sum: <br />
    <input type="submit" name="Calculate" />
    </form>
    </form>
    </body>
    </html>

  8. #8
    Join Date
    Oct 2013
    Posts
    26
    Ok, so i added your two lines and it gave me a error reguardless if I was posting four letters or not.
    in the expression the user should be able to do this for example, a+b+c+d, but when they do a+b+c+d+d, thats when I want the error message to come up. but if they enter the four characters to it should be fine.

    The code and forum works fine, but it still calculates when you do more then 4 characters, I just want the user to be able to input four $inputs. Im just confused how to write the javascript to do it. but i think yours was correct....

    heres your javascript impleneted into mine. tell me if it works.

    Code:
    <?php
    $expression = '';   
    $input      = array( 'a' => 5,    
                         'b' => 10,
                         'c' => 15,
                         'd' => 20); 
    $total = 0;
    $sum   = '';
    // Override default expression and input values
    if(isset($_POST['Calculate']))
    {
        $input      = $_POST['input'];			//input being passed via POST method
        $expression = $_POST['expression'];		//expression being passed via POST method 
    }
    // make sure the users expression is safe to use
    if(preg_match('#^[a-z+-\s]+$#i', $expression))
    {
        $sum = $expression;			//evaluates sum as expression
    	$input_letters = array();	//puts letters into a array
    	$input_operators = array(); //puts operators into a array
    	
    	
    	for ($i = 0; $i < strlen($expression) ; $i++) { //gets string length
    	if (($i % 2) == 0) {
    	$input_letters[] = $expression[$i]; //getting the character for the position i 
    	} else {
    	$input_operators[] = $expression[$i];
    	}
    	}
        // 
    	for ($i = 0 ; $i < sizeof($input_letters); $i++) { //size of= numbers (4)
    	$value = $input[$input_letters[$i]]; //takes the value  from the letters 
    	if ($i == 0) { 
    		$sum += $value; //adds the sum if = 0
    	} else {
    	if ($input_operators[$i-1] == '+') { //checks to see if the operator is +
    	$sum += $value;
    	} else if ($input_operators[$i-1] == '-')  { //checks to see if the operator is -
    	$sum -= $value;
    	}
    	}
    	print_r($value);
    	}
    } else {    
    echo "Error: expression not correct form"; //error message
    }
    ?>
    <form action=""  method="post">     <!--Form begins--> 
        Number A: <input type="text" name="input[a]" value="<?php echo $input['a']; ?>" size=3> <br/>
        Number B: <input type="text" name="input[b]" value="<?php echo $input['b']; ?>" size=3> <br> 
        Number C: <input type="text" name="input[c]" value="<?php echo $input['c']; ?>" size=3> <br> 
        Number D: <input type="text" name="input[d]" value="<?php echo $input['d']; ?>" size=3> <br>
        <br>
        Expression: <input type = "text" name = "expression" value="<?php echo $expression ?>">  = 
    <?php echo $sum; ?><br>
        Sum: <?php echo $sum; ?><br>
        <input type="submit" name="Calculate" /> 
    </form>
    
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    
    $( "form" ).submit(function( event ) {
    var val_is_good=($('input[name="expression"]').val().length==4)?true:false;
    if(!val_is_good){alert('Enter four letters or die!');}
    
    
    });
    </script>
    thanks

  9. #9
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    sometimes i'm not good with English and could not have understood your question

    try this one

    Code:
    <?php
    $expression = '';   
    $input      = array( 'a' => 5,    
                         'b' => 10,
                         'c' => 15,
                         'd' => 20); 
    $total = 0;
    $sum   = '';
    // Override default expression and input values
    if(isset($_POST['Calculate']))
    {
        $input      = $_POST['input'];			//input being passed via POST method
        $expression = $_POST['expression'];		//expression being passed via POST method 
    }
    // make sure the users expression is safe to use
    if(preg_match('#^[a-z+-\s]+$#i', $expression))
    {
        $sum = $expression;			//evaluates sum as expression
    	$input_letters = array();	//puts letters into a array
    	$input_operators = array(); //puts operators into a array
    	
    	
    	for ($i = 0; $i < strlen($expression) ; $i++) { //gets string length
    	if (($i % 2) == 0) {
    	$input_letters[] = $expression[$i]; //getting the character for the position i 
    	} else {
    	$input_operators[] = $expression[$i];
    	}
    	}
        // 
    	for ($i = 0 ; $i < sizeof($input_letters); $i++) { //size of= numbers (4)
    	$value = $input[$input_letters[$i]]; //takes the value  from the letters 
    	if ($i == 0) { 
    		$sum += $value; //adds the sum if = 0
    	} else {
    	if ($input_operators[$i-1] == '+') { //checks to see if the operator is +
    	$sum += $value;
    	} else if ($input_operators[$i-1] == '-')  { //checks to see if the operator is -
    	$sum -= $value;
    	}
    	}
    	print_r($value);
    	}
    } else {    
    echo "Error: expression not correct form"; //error message
    }
    ?>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style>
    input{text-align:center;}
    input[type=submit]{cursor:pointer;}
    #err{position:absolute;top:70px;left:150px;display:none;font-weight:bold;}
    #err span{color:Crimson;}
    </style>
    <form action=""  method="post">     <!--Form begins--> 
        Number A: <input type="text" name="input[a]" value="<?php echo $input['a']; ?>" size="3" /><br />
        Number B: <input type="text" name="input[b]" value="<?php echo $input['b']; ?>" size="3" /><br />
        Number C: <input type="text" name="input[c]" value="<?php echo $input['c']; ?>" size="3" /><br />
        Number D: <input type="text" name="input[d]" value="<?php echo $input['d']; ?>" size="3" /><br />
        <br>
        Expression: <input type = "text" name = "expression" value="<?php echo $expression ?>">  = <?php echo $sum; ?><br />
        Sum: <?php echo $sum; ?><br />
    	<input type="submit" name="Calculate" />
    	<div id="err"></div>
    </form>
    <script>
    $("form").submit(function(event){
    var re=/^([A-Za-z]{1})+([\+\-]{1})+([A-Za-z]{1})+([\+\-]{1})+([A-Za-z]{1})+([\+\-]{1})+([A-Za-z]{1})$/,
    val_is_good=re.test($('input[name="expression"]').val()),
    err_msg='<span>Enter four letters divided by math operators</span> "+" <span>or</span> "-" <span>!</span>',
    err=$('#err');
    if(!val_is_good){
    err.html(err_msg).fadeIn(800).delay(1000).fadeOut(500,function(){$(this).empty();$('input[name="expression"]').val('').focus();});
    }
    return val_is_good;
    });
    </script>

  10. #10
    Join Date
    Oct 2013
    Posts
    26
    thanks, what does this line do?
    var re=/^([A-Za-z]{1})+([\+\-]{1})+([A-Za-z]{1})+([\+\-]{1})+([A-Za-z]{1})+([\+\-]{1})+([A-Za-z]{1})$/,

  11. #11
    Join Date
    Oct 2013
    Posts
    26
    can you write some comments in the script so I know what is going on, I want to rewrite it on my own and am going to try to follow your good comments on the lines, thank you.

  12. #12
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    Code:
    <script>
    $("form").submit(function(event){
    /* re is a regular expression which matches (i hope lol) a 
    string like "letter math.operator letter math.operator letter math.operator letter" (without spaces, and math.operator can be "+" or "-") */
    var re=/^([A-Za-z]{1})+([\+\-]{1})+([A-Za-z]{1})+([\+\-]{1})+([A-Za-z]{1})+([\+\-]{1})+([A-Za-z]{1})$/,
    /* regularExpression.test(somestring) returns true if it matches and false if not matches the string 
    so we can save the result in the variable val_is_good for futher use*/
    val_is_good=re.test($('input[name="expression"]').val()),
    /* this is just a message */
    err_msg='<span>Enter four letters divided by math operators</span> "+" <span>or</span> "-" <span>!</span>',
    /* this is a shorthand for $('#err') element which is <div id="err"></div> */
    err=$('#err');
    /* actions if not matches */
    if(!val_is_good){
    /* insert message.appear.timeout.disappear and a callback function when disappearing done*/
    err.html(err_msg).fadeIn(800).delay(1000).fadeOut(500,function(){$(this).empty();$('input[name="expression"]').val('').focus();});
    }
    /* this submits the form if format correct (val_is_good=true) or prevent submitting (val_is_good=false) */
    return val_is_good;
    });
    </script>

  13. #13
    Join Date
    Oct 2013
    Posts
    26
    thanks padonak, you explained it very good. I learned alot .

  14. #14
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    you're welcome )) sorry for lame english

  15. #15
    Join Date
    Oct 2013
    Posts
    26
    no problem, reguardless of your english you were a BIG help.

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