Member Avatar for jayreis

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?

suggestions??
thanks

  • 1 Contributor
  • 1 Reply
  • 145 Views
  • 13 Minutes Discussion Span
  • Latest Post Latest Post by jayreis
Member Avatar for jayreis

If it helps here is my 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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.