Question

I have a generic out of box web part page. I have added a content editor web part on that page that links to a HTML file because I want to build my own custom form via HTML.

Here is the HTML file.

<!DOCTYPE html>
<style>
    .field{
        padding: 4px;
        margin: 1px;
    }
    .field label{
        display: inline-block;
        width: 160px;
        margin-left: 5px;
    }
    .field select{
        display: inline-block;
    }
</style>
<html>
<head>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

    <script>
        $(document).ready(function(){
            $("#ItemTypeSelect").append(new Option('test', 'test'));
        });
    </script>
</head>

<body>
    <div class="field">
        <label>Item Type:</label>
        <select id="ItemTypeSelect" name="ItemType"></select>
    </div>
    <div class="field">
        <label>Manufacturer:</label>
        <select name="Manufacturer"></select>
    </div>
    <div class="field">
        <label>Model:</label>
        <select name="Model"></select>
    </div>
    <div class="field">
        <label>Serial Number(s):</label>
        <select multiple='multiple' name="SerialNumber"></select>
    </div>
</body>


</html>

On page load, my scripts are not working, and I'm not receiving any runtime errors in the console. I have also tried adding a script editor to my page and put the scripts that you see above in the script editor and they are still not working without any errors in console.

How do I get scripts to work in an HTML file or script editor for a form inside a content editor?

Was it helpful?

Solution

You need to add type attribute to your script tag, like given below:

<script type="text/javascript">console.log('In.');</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top