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
Click Here
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
Click Here

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?


6 Years
Discussion Span
Last Post by jayreis

If it helps here is my code

<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]
<link rel="stylesheet" type="text/css" href="css/formwizard.css" /> 
<!-- End Form Wizard Code -->

<!-- Start Avatar upload/preview code -->
    function readURL(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
    .attr('src', e.target.result)


<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!-- End Avatar upload/preview code -->



<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 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 class="sectionwrap">
<legend>Login Information</legend>
<input type="submit" name='save' value='Submit' />



This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.