Results 1 to 6 of 6
  1. #1
    Join Date
    Sep 2005
    Location
    In canada
    Posts
    3,213

    K javascript experts i can use your help !!

    Hiyall,
    Not a javascript scripter here, can do what i am planning to below with php but want to use client side check on some form fields.

    Ok so here is the situation.

    I got a form with checkboxes to checkout whatever someone wants, and an upload option for certain special items/fields. I want to perfom a form validation check such that when >
    someone checks off an item, and an item requires certain files/documentations to be uploaded for that particular item, the validation checks to see first if "check box is checked" if it is checked than see if "file has been uploaded" if file has not been uploaded it should ask them to upload file for that particular item.

    Do note that the form items are generated via php off a database hence its part of a do while loop spitting out items in order from database.

    I dunno much about javascript and ajax stuff, but was able to find some script to do ajax based file uploads but i cannot get my head around to check if file is uploaded when the item is checked off on client side. Php side i have no issue spitting out the error messages but .......javascript

    Thanks

  2. #2
    Join Date
    May 2009
    Posts
    766
    Well...I wouldn't break your back trying to figure it out. Client-side validation is only as good as the user's inability to disable JavaScript.

    I would have the AJAX script that performs the upload set a local variable on success:

    PHP Code:
    <script>
    var 
    uploaded false;
    var 
    uploadRequired false;

    // call this when user selects an item
    function itemChecked()
    {
      
    // determine if upload is required and set uploadRequired accordingly
    }

    // this would be your ajax function
    function ajax()
    {
      
    // somewhere in here, you should be checking the return status
      
    if (xmlHttp.readyState == 4)
      {
        
    uploaded true// specify that upload was successful
        // you may want to return a code from the upload script that indicates sucess
        // or failure to be more accurate
      
    }
    }

    // finally, interrupt form submission to validate
    function validate()
    {
      if (
    uploadRequired && !uploaded)
      {
        
    alert("You need to upload something");
        return 
    false;
      }
      return 
    true;
    }
    </script>

    <form ... onSubmit="validate()"> 

  3. #3
    Join Date
    Sep 2005
    Location
    In canada
    Posts
    3,213
    Still no luck tried using http://www.the-art-of-web.com/javascript/validate/ checkbox array example, i can get it to say file name and stuff, but cannot figure out how to map one file to specific checkbox so that even when file is upload for some checkbox and is required for another it just does not pass the validation, it keeps passing if someone just uploads just 1 file and not file for each individual checkbox !!

    Dunno if this helps but this is the code that is giving me issues and its in a do while loop and iterates through sql results.

    Code:
    if ($row['letterneeded'] == 1) {
    
    echo '  <td style="width:50px;border-bottom:thin solid #666666;">
             Allowed extensions: pdf, doc, docx.       
    		 <input type="file" name="uploadedfiles[]" class="multi accept-pdf|doc|docx" maxlength="1" class="required"  />
    		 <input type="checkbox"  name="awardnameappliedletter[]" value ="'.str_replace(' ', '',$row['awardname']).'">
            
    		';
    echo '<br/><b>**Letter is Required**<br/>
    </b>';
    }
    Last edited by Energizer Bunny; 11-12-2009 at 02:14 PM.

  4. #4
    Join Date
    Oct 2004
    Location
    Shimonoseki
    Posts
    2,101
    A quick draft. Did not test it, so might yield some ajax errors:

    Here is your Form:
    HTML Code:
    <form action="/script/for/handling/form.php" method="post" enctype="multipart/form-data">
    
    Strawberry: <input type="checkbox" name="wishlist[]" value="Strawberry" id="strawberry" onclick="checkUpload('path/to/php/script/to/check/if/file/is/uploded.php?id=' + this.id, this.id)" />
    Banana: <input type="checkbox" name="wishlist[]" value="Banana" id="banana" onclick="checkUpload('path/to/php/script/to/check/if/file/is/uploded.php?id=' + this.id, this.id)" />
    Bunny: <input type="checkbox" name="wishlist[]" value="Bunny" id="bunny" onclick="checkUpload('path/to/php/script/to/check/if/file/is/uploded.php?id=' + this.id, this.id)" />
    <input type="file" name="burak"   id="burak" />
    <div id="uploadArea"></div>
    </form>

    Here is your JavaScript:
    HTML Code:
    <script language="javascript">
    
    var activeElement = null;
    
    function AJAX_getHTTP(){
    	var response = false;
    	if(window.XMLHttpRequest){
    		response = new XMLHttpRequest();
    	} else if(window.ActiveXObject){
    			try {
    				response = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e) {
    				try {
    					response = new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (e) {
    					response = false;
    				}
    			}
    		}
    		return response;
    }
    
    function AJAX_connect(filename){
    	request = AJAX_getHTTP();
    
    	if(request){
    		request.onreadystatechange = function(){
    			AJAX_response(request);
    		}
    	}
    	request.open("GET", filename, true);
    	request.send();
    }
    
    function AJAX_response(request){
    	if(request.readyState == 4){
    		if(request.status == 200 || request.status == 304){
    			response(request.responseText);
    		}else{
    			alert("AJAX_response error!");
    			return false;
    		}
    	} 
    }
    
    function response(text){
    	if(text == "false") { //AKA file is not uploaded
    		makeDownladField(activeElement);
    	}
    }
    
    function makeDownladField(id){
    	var parent = document.getElementById("uploadArea");
    
    	var fileHolder = document.createElement("span");
    	fileHolder.innerHTML = "<span>Upload " + id + "File: <span>";
    	
    	var file = document.createElement("input");
    	file.type = "file";
    	file.name = "file_" + id;
    	fileHolder.appendChild(file);
    	parent.appendChild(fileHolder);
    }
    
    function checkUpload(url, id){
    	activeElement = id;
    	AJAX_connect(url);
    }
    	
    </script>
    And in your form-handling script, you can check what are you getting:
    PHP Code:
    echo "<pre>";
    print_r($_POST);
    echo 
    "</pre>"
    Closed for winter...

  5. #5
    Join Date
    Sep 2005
    Location
    In canada
    Posts
    3,213
    I will give it a shot today if i get around to working on that script again. For now i put in a php check, but ajax check would be sweeter.

  6. #6
    Join Date
    Sep 2005
    Location
    In canada
    Posts
    3,213
    K tried above code but i am lost as to what is this uploaded.php you are talking about ? Is that what has javascript code to check or is it php code or function ?

    When i click on the option it just asks to upload file, and even if i do not , nothing breaks or unchecks , maybe if there was a javascript function on submit to validate a form field was not left empty and if so it unchecks for that particular check box hmm.. can javascript uncheck a checked box ?

Similar Threads

  1. Currency Experts and Flash Drive Experts!
    By IceCreamMan in forum Web Hosting Lounge
    Replies: 11
    Last Post: 12-05-2006, 11:48 PM
  2. need experts help
    By dondor in forum Web Hosting
    Replies: 23
    Last Post: 11-13-2005, 03:07 AM
  3. javascript function has no properties in javascript console
    By mrblack in forum Programming Discussion
    Replies: 2
    Last Post: 05-25-2005, 02:15 PM
  4. Javascript experts: can you solve this puzzle
    By shiferaw in forum Programming Discussion
    Replies: 1
    Last Post: 07-11-2003, 07:03 PM

Posting Permissions

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