button won't work in IE 11

Question

I'm having trouble with the button on my form not working in IE 11.

You can view the page at brandinfluencegroup.com/test

I have created the form based on this script http://www.html-form-guide.com/contact-form/contact-form-attachment.html

It also uses styling for the file field which I used one of the suggestions I found here Twitter Bootstrap Form File Element upload button

My code below:

<?PHP
require_once("./include/fgcontactform.php");

$formproc = new FGContactForm();

$formproc->AddRecipient('email@email.com.au'); //<<---Put your email address here

$formproc->SetFormRandomKey('HG9hPBpn9Bn26yg');

$formproc->AddFileUploadField('file','pdf,doc,pages,jpg,jpeg,gif,png,bmp',6024);

if(isset($_POST['submitted']))
{
   if($formproc->ProcessForm())
   {
        $formproc->RedirectToURL("thank-you.php");
   }
}

?>
<!doctype html>
<html class="no-js" lang="en">
<head>

<!-- ========== PAGE TITLE ========== -->
<title>BIG | Brand Influence Group</title>

<!-- ========== META TAGS ========== -->
<meta name="description" content="Brand Influence Group - BIG on you">
<meta name="keywords" content="BIG, brand, influence, group">
<meta charset="utf-8">
<meta name="author" content="ThemesEase">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- ========== VIEWPORT META ========== -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- ========== FAVICON & APPLE ICONS ========== -->
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">

<!-- ========== GOOGLE FONTS ========== -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100" rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' type='text/css'>

<!-- ========== MINIFIED VENDOR CSS ========== -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/bootstrap-select.css">
<link rel="stylesheet" href="styles/vendor.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/custom.css">

<!-- ========== MODERNIZR ========== -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script>
<script type='text/javascript' src='scripts/gen_validatorv31.js'></script>
<script type='text/javascript' src='scripts/fg_captcha_validator.js'></script>
</head>

<body class="dark-header animation">
<form class="notify-div" id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' enctype="multipart/form-data" accept-charset='UTF-8'>
  <input type='hidden' name='submitted' id='submitted' value='1'/>
  <input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
  <input type='text'  class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
  <div><span class='error'><?php echo $formproc->GetErrorMessage(); ?></span><span id='contactus_name_errorloc' class='error'></span><span id='contactus_email_errorloc' class='error'></span></div>
  <input type="text" name="name" placeholder="Name"/>
  <input type="email" name="email" placeholder="Enter your email"/>
  <select name="message" class="selectpicker" data-hide-disabled="true" data-size="10">
    <option selected value="I want to...">I want to...</option>
    <option value="Apply for a position in Brand Activation">Apply for a position in Brand Activation</option>
    <option value="Apply for a position as Influencer">Apply for a position as Influencer</option>
    <option value="Apply for a position as Account Executive">Apply for a position as Account Executive</option>
    <option value="Apply for a position as Account Manager">Apply for a position as Account Manager</option>
    <option value="Apply for a position as Accountant">Apply for a position as Accountant</option>
    <option value="Apply for a position as Weekend warrior">Apply for a position as Weekend warrior</option>
    <option value="Apply for a position as Cricket Coach">Apply for a position as Cricket Coach</option>
    <option value="Apply for a position as Intern">Apply for a position as Intern</option>
    <option value="Other...">Other...</option>
  </select>
  </span><span><input class="btn btn-primary" type="button" value="Upload your cv..." onclick="$(this).parent().find('input[type=file]').click();"/>
  <input  type="file"  name="file" id="file" style="visibility:hidden; width: 1px;" onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))"  />
  <span  class="badge badge-important" ></span></span>
  <button type="image" class="sr-btn white-btn" id="submit" name="submit" value="Send"><span class="bold">Say</span> <span class="italic">hello</span></button>
</form>
<script type='text/javascript'>
// <![CDATA[

    var frmvalidator  = new Validator("contactus");
    frmvalidator.EnableOnPageErrorDisplay();
    frmvalidator.EnableMsgsTogether();
    frmvalidator.addValidation("name","req","Please provide your name");

    frmvalidator.addValidation("email","req","Please provide your email address");

    frmvalidator.addValidation("email","email","Please provide a valid email address");

    frmvalidator.addValidation("message","maxlen=6048","The message is too long!(more than 2KB!)");

    frmvalidator.addValidation("file","file_extn=jpg;jpeg;gif;png;bmp","Upload images only. Supported file types are: jpg,gif,png,bmp");
// ]]>
</script> <br/>
<br/>
</div>
</div>
</div>
<!-- end row -->

</div>
<!-- end container -->
</section>
<!-- end section --> 

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
<script>
            // (function(b, o, i, l, e, r) {
            //  b.GoogleAnalyticsObject = l;
            //  b[l] || (b[l] =
            //      function() {
            //          (b[l].q = b[l].q || []).push(arguments)
            //      });
            //  b[l].l = +new Date;
            //  e = o.createElement(i);
            //  r = o.getElementsByTagName(i)[0];
            //  e.src = 'https://www.google-analytics.com/analytics.js';
            //  r.parentNode.insertBefore(e, r)
            // }(window, document, 'script', 'ga'));
            // ga('create', 'UA-XXXXX-X');
            // ga('send', 'pageview');
        </script> 
<script src="scripts/vendor.js"></script> 
<script src="scripts/main.js"></script>
</body>
</html>

Which event handlers fire? You can check by writing to console in each handler. — mm759, Aug 23 '16 at 13:06
Thanks for your reply! I guess I need more experience in this. I am not very experienced in javascript, mainly just HTML and CSS. Do you mean while testing in IE? — Steph Graham, Aug 24 '16 at 02:00
Example: onclick="console.log('click'); $(this).parent().find('input[type=file]').click();" and onchange="console.log('change'); $(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))" — mm759, Aug 24 '16 at 06:15

score 1 · Accepted Answer · answered Aug 23 '16 at 22:21

1

This is likely to happen because of Internet Explorer blocking ActiveX Controls, as soon as I just open Internet Explorer, it shows a bar saying this:

If I don't press anything, then the button wont work, and that bar message also disappears after 1 or 2 minutes, so after a while you might not notice that the message was there at the beginning.

Also I think this happens because of you working locally, this shouldn't happen if the site is at a trusted domain.

Hope this helps, Leo.

answered Aug 23 '16 at 22:21

Leo

956
8
24

Hi! Thanks for taking the time to test this out and replying to my question! The problem is happening on the testing server, if you go to brandinfluencegroup.com/test you will see what I mean... – Steph Graham Aug 24 '16 at 01:56
Hi Steph, I already went into that page, and the input file button works fine in Internet Explorer 11 and Internet Explorer 10, the problem is when you click it, nothing happens and the file explorer doesn't show up right? If that's the case, I strongly suggest to check to see if ActiveX controls are enabled, also if you have those enabled, I can't figure another thing that maybe causing this, you should also test it on another computer to see what I mean. Leo. – Leo Aug 25 '16 at 00:03
Thanks again for your response! It's happening for my client, do I need to tell them to change their browser settings? – Steph Graham Aug 25 '16 at 02:52
If so is there a better solution than how I have done this, as I guess we can't always expect users to have the correct browser settings? – Steph Graham Aug 25 '16 at 02:54
Sorry I just re-read your message and no it's not the file explorer but the submit button that's not working for the client. The file upload appears to work but the submit button does nothing when clicked... – Steph Graham Aug 25 '16 at 12:56
Yes well, I already did that on IE 11, and it showed this message: "Thanks, we'll be sure to get in touch!" What OS are you using? It seems fine to me. – Leo Aug 25 '16 at 18:27

button won't work in IE 11

1 Answers1