Using jquery in phtml got an error: Uncaught ReferenceError: require is not defined

Question

I use jquery in my phtml frontend page like this:

<script>
  require(['jquery', 'jquery/ui'], function($){
     var currentUrl = '<?= $itemEditUrl  ?>';

     $('#link-cusom-campaign').click( function(e) {
       e.preventDefault();
       var check = 1;
       var optionsInput = '';
       $('select[name^="options"]').each(function() {
           if($(this).val() == ''){
              check = 0;
              $("<p style='color:red;' class='alert-empty'>This is a required field</p>").insertAfter(this).delay(3000).fadeOut();
           } else {
             var name = $(this).attr('name');
             var id = parseInt(name.match(/[0-9]+/));
             optionsInput += '<input type="text" name="options['+id+']" value="'+$(this).val()+'"/> ';
           }
       });
       if(check == 1){
          var model = $('#select_18').val();
          var qty = $('#qty').val();
          var getUrl = currentUrl + '?model=' +model+'&qty=' + qty;
          var form = $('<form  action="' + currentUrl + '" method="post">' +
            optionsInput +
            '<input type="text" name="qty" value="' + qty + '" />' +
            '</form>');
          $('body').append(form);
          form.submit();
       }
     });
  });
</script>

all the function work properly, but in my browser console i got an error pointing at require saying :

VM4522:2 Uncaught ReferenceError: require is not defined

Answer 1

Try something like this

requirejs(['require'], function (require) {
    require(['jquery', 'jquery/ui'], function ($) {
        var currentUrl = '<?= $itemEditUrl ?>';

        $('#link-cusom-campaign').click(function (e) {
            e.preventDefault();
            var check = 1;
            var optionsInput = '';
            $('select[name^="options"]').each(function () {
                if ($(this).val() == '') {
                    check = 0;
                    $("<p style='color:red;' class='alert-empty'>This is a required field</p>").insertAfter(this).delay(3000).fadeOut();
                } else {
                    var name = $(this).attr('name');
                    var id = parseInt(name.match(/[0-9]+/));
                    optionsInput += '<input type="text" name="options[' + id + ']" value="' + $(this).val() + '"/> ';
                }
            });
            if (check == 1) {
                var model = $('#select_18').val();
                var qty = $('#qty').val();
                var getUrl = currentUrl + '?model=' + model + '&qty=' + qty;
                var form = $('<form  action="' + currentUrl + '" method="post">' +
                        optionsInput +
                        '<input type="text" name="qty" value="' + qty + '" />' +
                        '</form>');
                $('body').append(form);
                form.submit();
            }
        });
    });
});