problem submitting dynamically created input field

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • mitchell
    New Member
    • Oct 2007
    • 18

    problem submitting dynamically created input field

    hi,

    i am having problems while uploading a file.
    i created an input element of file type and appended it to a form.
    after selecting the file when i click on submit the form becomes blank and i again need to select the file.
    and it works in the second attempt

    i cant figure out why its happening
    please help
    here is the code

    //main.php


    Code:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function load()
    {
    	var element=document.createElement("input");
    	element.type="file";
    	element.id="file";
    	element.name="file";
    	var parent=document.getElementById("mailform");
    	parent.appendChild(element);
    	element.click();
    }
    
    </script>
    </head>
    
    <body>
    
    <form name="mailform" id="mailform" method='post' action='upload.php' enctype="multipart/form-data">
    <input type="submit">
    </form>
    <a href="javascript:load();">load</a>
    </body>
    </html>
    //upload.php


    Code:
    Code:
    <?php
    $m='file';
    
    move_uploaded_file($_FILES[$m]["tmp_name"],"upload/" . $_FILES[$m]["name"]);
    ?>
  • mitchell
    New Member
    • Oct 2007
    • 18

    #2
    probem in submitting dynamically created form fields

    hi,

    i m using windows xp and ie6.
    i am having problems while uploading a file.
    i created an input element of file type and appended it to a form.
    after selecting the file when i click on submit the form becomes blank and i again need to select the file.
    and it works in the second attempt

    i cant figure out why its happening
    please help
    here is the code

    //main.php


    Code:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function load()
    {
    	var element=document.createElement("input");
    	element.type="file";
    	element.id="file";
    	element.name="file";
    	var parent=document.getElementById("mailform");
    	parent.appendChild(element);
    	element.click();
    }
    
    </script>
    </head>
    
    <body>
    
    <form name="mailform" id="mailform" method='post' action='upload.php' enctype="multipart/form-data">
    <input type="submit">
    </form>
    <a href="javascript:load();">load</a>
    </body>
    </html>
    //upload.php


    Code:
    Code:
    <?php
    $m='file';
    
    move_uploaded_file($_FILES[$m]["tmp_name"],"upload/" . $_FILES[$m]["name"]);
    ?>

    Comment

    • mitchell
      New Member
      • Oct 2007
      • 18

      #3
      i have already asked this question in another thread
      so please dont answer it.
      the topic is closed

      apologies

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        I've merged the threads.

        The reason for this is the element.click() line. Remove that and it should work.

        click() doesn't work for the input file element in most browsers anyway.

        Comment

        • mitchell
          New Member
          • Oct 2007
          • 18

          #5
          thanks for the reply

          if i remove the click function then how can i upload the file

          ?????/

          please help

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            Originally posted by mitchell
            if i remove the click function then how can i upload the file
            By clicking the browse button, of course.

            Comment

            • mitchell
              New Member
              • Oct 2007
              • 18

              #7
              apologies

              i forgot to tell this.
              i will be using this for mail attachments

              i want that the browse button and the input field remain hidden
              and everything else happens in the background
              thus the user just has to click on load link,select the file and click on submit

              Comment

              • mitchell
                New Member
                • Oct 2007
                • 18

                #8
                i am still stuck up with the problem.
                please help

                Comment

                • acoder
                  Recognized Expert MVP
                  • Nov 2006
                  • 16032

                  #9
                  This link - Styling an input type=file might help you.

                  Comment

                  • mitchell
                    New Member
                    • Oct 2007
                    • 18

                    #10
                    hi

                    this was great help.
                    thanks.

                    i have another issue now.

                    i have done as directed in the link you had given.
                    then i used an onchange event on the file type to trigger the upload function
                    now if i want to attach the file without page reload i need to submit
                    the file name to a hidden frame (or through ajax).

                    but i cant submit the form right now as the user has not completed the form yet
                    (the message part and everything)

                    can u tell me a way by which i can only send the file part
                    and the rest can be send when the user clicks on the send button

                    thanks once again

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032

                      #11
                      Originally posted by mitchell
                      can u tell me a way by which i can only send the file part
                      and the rest can be send when the user clicks on the send button
                      You can upload the file using an iframe, e.g. something like this.

                      Comment

                      • mitchell
                        New Member
                        • Oct 2007
                        • 18

                        #12
                        hi

                        i didnt understand much in the link you had given.
                        but i implemented your idea of iframe

                        i used a hidden iframe and the target attribute of the form to
                        make my multiple file uploader.

                        thanks once again

                        now my last questiont

                        do you consider interaction with server using iframes as ajax???

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032

                          #13
                          Originally posted by mitchell
                          do you consider interaction with server using iframes as ajax???
                          Iframes have been used for this task before Ajax became popular around 2005. Using hidden iframes is not really the same as an XMLHttp request, but you can achieve the same effect with both having their advantages and drawbacks.

                          Comment

                          Working...