SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    if fields isnt empty run the rest of the code.

    Hi, First Post here : )

    I am building some JS and would like to share my limitation. This is the code:

    Code JavaScript:
       <script language = "Javascript">
        function onComposeSubmit() {
            var formDOMObj = document.Login;
            var TrocaImagem
            if (formDOMObj.email.value == "" || formDOMObj.anexo.value == "" )
                alert("<%response.write Idioma.Item(Session("Idioma")&"_10")%>")
                TrocaImagem= "1"
            else
               TrocaImagem="0"
                return true;
            return false;
    		// change button
    		if TrocaImage="1"
    	        document.getElementById("submitButtonDiv").style.display = "none";    
    		    if (navigator.appName == "Microsoft Internet Explorer") {
    			    document.getElementById("progressBar").innerHTML = "";
    			    document.getElementById("progressBar").style.display = "block";
    			    document.getElementById("progressBar").innerHTML = "<img src='img/progressbar.gif' alt='Progress Bar'>";
    		    } else {
    			    document.getElementById("progressBar").style.display = "block";        
    		    }
    		else
        }
    	</script>

    Things I am trying to Do:

    - Check if email field isn't empty and check if the anexo field isn't empty. Actually I would like to have it separeted but I dunno how to do this.

    - If email and anexo isn't empty run the change button part of the code, witch will change the submit button for a progressbar.gif image. Actually this part of the code works great but without the field validation above.

    Any help is greatfully helpfull
    (sorry the chunk english)

    Thanks in advanced.

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code will never reach the end of the function because you always return a Boolean.

    Code JavaScript:
            if (formDOMObj.email.value == "" || formDOMObj.anexo.value == "" ) // If this returned true then run the following code
                alert("<%response.write Idioma.Item(Session("Idioma")&"_10")%>")
                TrocaImagem= "1"
            else // otherwise execute this
               TrocaImagem="0"
                return true; // -- function ends here
     
     
    //The following never gets executed
     
     
            return false; 
     
            // change button
            if TrocaImage="1"
                document.getElementById("submitButtonDiv").style.display = "none";   
                if (navigator.appName == "Microsoft Internet Explorer") {
                    document.getElementById("progressBar").innerHTML = "";
                    document.getElementById("progressBar").style.display = "block";
                    document.getElementById("progressBar").innerHTML = "<img src='img/progressbar.gif' alt='Progress Bar'>";
                } else {
                    document.getElementById("progressBar").style.display = "block";       
                }
            else

    You need to add curly bracers to where the if statement should execute or the else statement. Then take it from there.

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really appreciate the help, but I dunno how to reach the final code from now on... can u please give me a little more help on this?

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to let know javascript or any langauge for that matter where the statement starts and ends. When talking if and else statements, you usually do it by curly bracers.

    When your function is done, is it suppose to return a boolean value? If not then you don't need the last return false.

    You need to learn to compare and assign values as well as structuring your if and else statements correctly.

    Code JavaScript:
    <script language = "Javascript">
        function onComposeSubmit() {
            var formDOMObj = document.Login;
            var TrocaImagem //You missed a semi colon here. You need to let javascript know the line ends at the semicolon
            if (formDOMObj.email.value == "" || formDOMObj.anexo.value == "" ) {
                alert("<%response.write Idioma.Item(Session("Idioma")&"_10")%>") //Missing semicolon
                TrocaImagem= "1"//Missing semicolon
            }
            else {
               TrocaImagem="0"//Missing semicolon
                return true;
            }
            return false; //If you need this, then it should go at the end, because you still have more code to execute
            // change button
            if TrocaImage="1" //Why does this if statement look totally different from every other if statement?
                                    //Should be something like (if TrocaImage == 1)...etc...
     
                document.getElementById("submitButtonDiv").style.display = "none";   
                if (navigator.appName == "Microsoft Internet Explorer") {
                    document.getElementById("progressBar").innerHTML = "";
                    document.getElementById("progressBar").style.display = "block";
                    document.getElementById("progressBar").innerHTML = "<img src='img/progressbar.gif' alt='Progress Bar'>";
                } else {
                    document.getElementById("progressBar").style.display = "block";       
                }
                //Your return false should be here
     
            else {} // Else do what? If it's not going to do anything then don't include this. 
        }
        </script>

    When you use "return" the function ends there and nothing else gets executed.



    The way you had your if statement setup works only if you have ONE line

    Code JavaScript:
    var number = 1;
     
    if (number == 1)
     alert('The number matches!');
    //Anything after here gets executed outside the if statement
     
    if (number == 1) {
     alert('The number matches!');
     alert('I\'m still inside the if statement!');
    }
    alert('Now I\'m outside of it!');
    Any decent IDE will help you with syntax errors. Hope this helps debug your problem.

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, with your gracefull help I could make the code work at last in some way. Now the code is:

    Code JavaScript:
    <script language = "Javascript">
        function onComposeSubmit()
    	{
            var formDOMObj = document.Login;
            var TrocaImagem;
            if (formDOMObj.emailfrom.value == "" || formDOMObj.emailto.value == "" || formDOMObj.anexo.value == "" )
            	{
    	            alert("<%response.write Idioma.Item(Session("Idioma")&"_10")%>");
    	            TrocaImagem = 1;
            	}
            else
            	{
    				TrocaImagem = 0;
    			}
     
            if (TrocaImagem == 1)
            	{
    				document.getElementById("submitButtonDiv").style.display = "none";   
    				if (navigator.appName == "Microsoft Internet Explorer")
    					{
                    		document.getElementById("progressBar").innerHTML = "";
                    		document.getElementById("progressBar").style.display = "block";
                    		document.getElementById("progressBar").innerHTML = "<img src='img/progressbar.gif' alt='Progress Bar'>";
    		            }
    				else
    					{
    	            	    document.getElementById("progressBar").style.display = "block";       
    					}
    			}
    	}
    </script>

    Now when I click in submit in my form
    Code HTML4Strict:
    <form id="Login" name="Login" ENCTYPE="multipart/form-data" action="uploadTester.asp?Idioma=<%response.write Session("Idioma")%>" method="post" onSubmit="onComposeSubmit()">

    It ask me to check if the emailfrom field is empty, but click in ok it already start the second part of the script and load the div. It should only load the div after all the validation is completed.

    Can I count with you again?

    Thanks,

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look at this line:

    if (TrocaImagem == 1)

    That says, if the variable TrocaImagem is equal to one then run the code inside the statement.

    When you run this function, the first if statement checks whether some fileds are empty or not. If they are, it assigns the value of one to TrocaImagem, otherwise it assigns one.

    Basically you need to switch those two values around or change the second if statement to be zero, ie:

    if (TrocaImagem == 0)

  7. #7
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, u r right.

    Thanks man, the code is now working.. for some reason I couldn't use the submit button in the form, so I create an image and add the onClick function to it. So the code is:

    Code JavaScript:
    <script language = "Javascript">
        function onComposeSubmit()
    	{
            var formDOMObj = document.Login;
            var TrocaImagem;
            if (formDOMObj.emailfrom.value == "" || formDOMObj.emailto.value == "" || formDOMObj.anexo.value == "" )
            	{
    	            alert("<%response.write Idioma.Item(Session("Idioma")&"_10")%>");
    	            TrocaImagem = 0;
            	}
            else
            	{
    				TrocaImagem = 1;
    			}
     
            if (TrocaImagem == 1)
            	{
    				document.getElementById("submitButtonDiv").style.display = "none";   
    				if (navigator.appName == "Microsoft Internet Explorer")
    					{
                    		document.getElementById("progressBar").innerHTML = "";
                    		document.getElementById("progressBar").style.display = "block";
                    		document.getElementById("progressBar").innerHTML = "<img src='img/progressbar.gif' alt='Progress Bar'>";
                    		document.forms["Login"].submit();
    		            }
    				else
    					{
    	            	    document.getElementById("progressBar").style.display = "block";       
                    		document.forms["Login"].submit();
    					}
    			}
    	}
    </script>

    I am looking for a better way to improve this part of the code:
    Code JavaScript:
            if (formDOMObj.emailfrom.value == "" || formDOMObj.emailto.value == "" || formDOMObj.anexo.value == "" )
            	{
    	            alert("<%response.write Idioma.Item(Session("Idioma")&"_10")%>");
    	            TrocaImagem = 0;
            	}

    So when I activate the function it should pop up an alert with X warning lines, each line for each field. So if 3 fields are empty, display an alert with 3 lines, if 2 fields is empty display 2 lines.

    At this point of the code is it hard to archive this mod?

    Thanks again dude.

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    var errors; //We're gonna use this later
     
    for(i in formDOMObj) { //traverse through the objects
        if (formDOMObj[i].value == '') { // check the value of that object to see if it's empty
            errors += 'Error: ' +formDOMObj[i]+ ' is empty'; //Concatenate the errors
        }
    }
     
    if (errors != '') { // If the variable errors is not empty, do an alert of what's inside
        alert(errors);
    }

  9. #9
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mmm, i received an error telling me

    'value' is null or isn't an object.
    (dunno if this is the right translation from portuguese to english)

    does it make some sense?

    this is the code:

    Code JavaScript:
    <script language = "Javascript">
        function onComposeSubmit()
    	{
            var formDOMObj = document.Login;
            var TrocaImagem;
    		var errors;
    		for (i in formDOMObj)
    			{ 
    				if (formDOMObj[i].value == '')
    				{
    		        	errors += 'Error: ' +formDOMObj[i]+ ' is empty';
    		        	TrocaImagem = 0;
    			    }
    			}
     
    		if (errors != '')
    		{
    		    alert(errors);
    		}
            else
    		{
    			TrocaImagem = 1;
    		}
            if (TrocaImagem == 1)
            	{
    				document.getElementById("submitButtonDiv").style.display = "none";   
    				if (navigator.appName == "Microsoft Internet Explorer")
    					{
                    		document.getElementById("progressBar").innerHTML = "";
                    		document.getElementById("progressBar").style.display = "block";
                    		document.getElementById("progressBar").innerHTML = "<img src='img/progressbar.gif' alt='Progress Bar'>";
                    		document.forms["Login"].submit();
    		            }
    				else
    					{
    	            	    document.getElementById("progressBar").style.display = "block";       
                    		document.forms["Login"].submit();
    					}
    			}
    	}
    </script>

    Thanks again.

  10. #10
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On line:

    var formDOMObj = document.Login;

    Make sure your form has:

    <form name="Login">
    </form>

    Also move TrocaImagem = 0; into the if statement if (errors != ''). Don't place it inside the loop because it will keep reassigning the value zero to the variable when all you need to do is set it once.

  11. #11
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, i have name="Login" and id="Login"

    And for the other piece of advice I change the code, but no luck:

    Code JavaScript:
    <script language = "Javascript">
        function onComposeSubmit()
        {
            var formDOMObj = document.Login;
            var TrocaImagem;
            var errors;
            for (i in formDOMObj)
                {
                    if (formDOMObj[i].value == '')
                    {
                        errors += 'Error: ' +formDOMObj[i]+ ' is empty';
                    }
                }
     
            if (errors != '')
            {
                alert(errors);
                TrocaImagem = 0;
            }
            else
            {
                TrocaImagem = 1;
            }
            if (TrocaImagem == 1)
                {
                    document.getElementById("submitButtonDiv").style.display = "none";   
                    if (navigator.appName == "Microsoft Internet Explorer")
                        {
                            document.getElementById("progressBar").innerHTML = "";
                            document.getElementById("progressBar").style.display = "block";
                            document.getElementById("progressBar").innerHTML = "<img src='img/progressbar.gif' alt='Progress Bar'>";
                            document.forms["Login"].submit();
                        }
                    else
                        {
                            document.getElementById("progressBar").style.display = "block";       
                            document.forms["Login"].submit();
                        }
                }
        }
    </script>

    I tried to use just this piece of code you post:

    Code JavaScript:
    var errors; //We're gonna use this later
     
    for(i in formDOMObj) { //traverse through the objects
        if (formDOMObj[i].value == '') { // check the value of that object to see if it's empty
            errors += 'Error: ' +formDOMObj[i]+ ' is empty'; //Concatenate the errors
        }
    }
     
    if (errors != '') { // If the variable errors is not empty, do an alert of what's inside
        alert(errors);
    }

    But it show the same 'value' is null thing.

    I dunno but before we used: formDOMObj.emailfrom.value and now we used formDOMObj[i].value, so I think there was a 'point' there like: formDOMObj.[i].value but I was wrong hehehe

    I you got some toughts about it, please let me know
    again, thanks for the big help.

  12. #12
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change the line:

    formDOMObj[i].value == ''

    to

    formDOMObj[i].name.value == ''

  13. #13
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but it didn't work. Now the error is: name.value is null or not an object.

    Could it be easy to do it field by field instead of an array?

    Thanks again.

  14. #14
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now you REALLY GOT MY BRAIN GOING!

    Code:
        var formDOMObj = document.Login;
        var formLength = formDOMObj.elements.length;
        var errors = ''; //We're gonna use this later 
        
        for(i = 0; i < formLength; i++) {
            if (formDOMObj.elements[i].value == '')
            errors += formDOMObj.elements[i].name + ' is empty';
        }
        if (errors != '') {
            alert(errors);
        }
    Cheers.

  15. #15
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I changed the code a little bit 'cause I have some optional fields in the forms... but the actual code are showing an 'undefined', see:



    This is the code I am using now, and I can't see why the 'undefined' are showing.

    Code JavaScript:
    <script language = "Javascript">
        function onComposeSubmit()
        {
            var formDOMObj = document.Login;
            var TrocaImagem;
            var errors;
     
        	if (formDOMObj.emailto.value == '')
        	errors += formDOMObj.emailto.name + ' is empty\n';
     
        	if (formDOMObj.emailfrom.value == '')
        	errors += formDOMObj.emailfrom.name + ' is empty\n';
     
        	if (formDOMObj.anexo.value == '')
        	errors += formDOMObj.anexo.name + ' is empty\n';
     
    	    if (errors != '')
    	    	{
    	            alert(errors);
    	            TrocaImagem = 0;
    	        }
    	    else
    	        {
    	            TrocaImagem = 1;
    	        }
    	        if (TrocaImagem == 1)
    	            {
    	                document.getElementById("submitButtonDiv").style.display = "none";   
    	                if (navigator.appName == "Microsoft Internet Explorer")
    	                    {
    	                        document.getElementById("progressBar").innerHTML = "";
    	                        document.getElementById("progressBar").style.display = "block";
    	                        document.getElementById("progressBar").innerHTML = "<img src='img/progressbar.gif' alt='Progress Bar'>";
    	                        document.forms["Login"].submit();
    	                    }
    	                else
    	                    {
    	                        document.getElementById("progressBar").style.display = "block";       
    	                        document.forms["Login"].submit();
    	                    }
    	            }
        }
    </script>

    Thanks again ^^

  16. #16
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it! Thanks, working like a charm now... much appreciated.


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
  •