Internationalization of html browse button using fake button and text field

Question

In order to internationalize I used fake button technique. When I try the fake button everything happens fine except that form does not submit.

It only submits when I click the actual browse button and select the file.

Can some one throw some light on this behaviour.

<html>
   <script>
     function triggerFileUpload() 
     { 
        try{
          document.getElementById("theFile").click();
        }catch(e){
         alert(e);
        }
     } 

      function setHiddenValue() 
      { 
        document.getElementById("dummyField").value = document.getElementById   ("theFile").value; 
       } 
   </script>
<body>
<div id="dummyDiv">
<form action="http://www.google.com">
<input type="Text" disabled="disabled" class="inputField" id="dummyField"/>
<input type="button" class="inputField" value="Buscar Archivo" onclick="triggerFileUpload()"/>
</div>
<div id="uploadDiv" style="display: block;">
<input type="file" id="theFile" name="theFile" onchange="setHiddenValue()"/>
</div>
<input type="submit" value="submit"/>
</form>

</body>
</html>

The code never did submit it.

Jay
– Jay

2012-09-20 03:52:50 +00:00
Commented Sep 20, 2012 at 3:52 — Jay
– Jay, Commented Sep 20, 2012 at 3:52
Jay. Can you elaborate more on the statement.

Madhur
– Madhur

2012-09-20 04:22:04 +00:00
Commented Sep 20, 2012 at 4:22 — Madhur
– Madhur, Commented Sep 20, 2012 at 4:22

Madhur · Accepted Answer · 2012-09-25 08:54:22Z

Although the above behavior still remains unanswered but I was able to achieve the localization of File upload control -

    <html>
<head>
<link rel="stylesheet" href="browse.css" type="Text/css"/>
 <script>
  function openBrowse(){
   document.getElementById("realBrowse").click();
  }
  function populateFakeField(){
   document.getElementById("fakeBrowseField").value=document.getElementsByName("q")[0].value;
  }
 </script>
</head>
<body>
 <form action="https://www.google.co.in/search">
    <input type="Text" id="fakeBrowseField"/>
    <!-- The fileinput-button span is used to style the file input field as button -->
    <span class="btn btn-success fileinput-button">
        <span>Buscar Archivo</span>
        <input type="file" name="q" multiple="" onchange="populateFakeField()">
    </span>

  <input type="submit" value="submit"/>
 </form>
</body>
</html>

The browse.css

    .fileinput-button {
    position: relative;
    overflow: hidden;
    float: left;
    margin-right: 4px;
}
.fileinput-button input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    border: solid transparent;
    border-width: 0 0 100px 200px;
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-transform: translate(-300px, 0) scale(4);
    direction: ltr;
    cursor: pointer;
}
.btn-success {
    background-color: #5bb75b;
    border-color: #51a351 #51a351 #387038;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}


.btn {
    display: inline-block;
    padding: 4px 10px 4px;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 18px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #d4d0c8;
    border: 1px solid #cccccc;
    /*border: 0;*/
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-color: #d4d0c8 #d4d0c8 #bfbfbf;
    border-bottom-color: #b3b3b3;

}

Collectives™ on Stack Overflow

Internationalization of html browse button using fake button and text field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related