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

    Join Date
    Dec 2005
    Posts
    341
    Rep Power
    9

    Need 2 jquery codes to work on same page


    I am trying to setup what would be a tabbed order form witch would also contain a jquery image upload and preview function. However what is happeing is if I just have the jquery code for the tabbed content function the file works but when I add the jquery code for the image upload/preview function the tabbed content function stopps working. Also if I comment out the tabbed content function and just have the image upload and preview function the page works (minus the tabbed content function)

    I am using the code from
    http://www.dynamicdrive.com/dynamici...formwizard.htm

    in order to setup a multi-step tabbed type order form (see the above link for the functionality)

    I then am trying to use the image upload and functionality from
    http://site-o-matic.net

    My ideal I am trying to do is within my order form allow a user to upload and a preview visable of their avatar without the form being reloaded or submitted.

    however the above two scripts do not seem to work when they are both on the same page?

    suggestions??
    thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Posts
    341
    Rep Power
    9

    my code


    if it helps this is my code

    Code:
         <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <!-- Start Form Wizard Code -->
    <script src="js/formwizard.js" type="text/javascript"></script>
    <script type="text/javascript">
         var myform=new formtowizard({
    	formid: 'feedbackform',
    	persistsection: true,
    	revealfx: ['slide', 500]
        })
    </script>
    <link rel="stylesheet" type="text/css" href="css/formwizard.css" /> 
    <!-- End Form Wizard Code -->
    
    <!-- Start Avatar upload/preview code -->
    <script>
        function readURL(input) {
        if (input.files && input.files[0]) {
        var reader = new FileReader();
    
        reader.onload = function (e) {
        $('#img_prev')
        .attr('src', e.target.result)
        .width(150)
        .height(200);
       };
    
        reader.readAsDataURL(input.files[0]);
       }
       }
    </script>
    
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- End Avatar upload/preview code -->
    
    </head>
    
    <body>
    
    <div id='demoWrapper'>
    
    <form id="feedbackform" method='POST' action='*****' enctype="multipart/form-data">
    <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
    
    <fieldset class="sectionwrap">
       <legend>Basic Information</legend>
            First Name:  <input id="firstname" type="text" size="35" /><br />
            Last Name:  <input id="lastname" type="text" size="35" /><br />
    
            Email: <input type='text' name='emailaddr' size='25'>
    </fieldset>
    
    
    <fieldset class="sectionwrap">
        <legend>My Interests</legend>
          Hockey: yes <input type="radio" value='yes' />
                  no <input type="radio" value='no' />
                  
          My Avatar        
    <input type='file' onchange="readURL(this);" />
    <img id="img_prev" src="#" alt="your image" />
    
    <br /><br />
    </fieldset>
    
    
    <fieldset class="sectionwrap">
    <legend>Login Information</legend>
       Username: 
       Password: 
    <input type="submit" name='save' value='Submit' />
    </fieldset>
    
    </form>
    
    </div>
    
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo