Convert Jquery to Vanilla Script

Question

Is it possible to rewrite the following code into pure javascript? I don't want to use jquery.

$(function () {
    var aggregateInput = function () {
        var value = ('Website Url: ') + jQuery('input[name="url"]').val() + ' \n  \n' +
            ('Subject: ') + jQuery('input[name="subject"] \n').val() + ' \n  \n' +
            ('Brief Message: ') + jQuery('textarea[name="customer service"] \n  \n').val().replace(/\n/g, '<br/>');
        jQuery('textarea[name="email-message"]').val(value);
    }
    jQuery('.contact-style').on('keyup', aggregateInput);
});

$(document).ready(function () {
    $('.contact-form-button-submit').attr('disabled', true);
    $('.customform-message').keyup(function () {
        if ($(this).val().length != 0) {
            $('.contact-form-button-submit').attr('disabled', false);
        } else {
            $('.contact-form-button-submit').attr('disabled', true);
        }
    })
});

Learn javascript. Check [this websit](http://youmightnotneedjquery.com/). — KooiInc, Oct 16 '22 at 09:23
Yes it is possible. I suppose you tried and got stuck somewhere? What exactly is the trouble? — trincot, Oct 16 '22 at 09:24
You can check this reference link https://youmightnotneedjquery.com/ — Zahid Hasan, Oct 16 '22 at 09:25
What is the selector `'input[name="subject"] \n'` supposed to do? Why is there a newline _in the selector_? I mean, it doesn't change the selector, but it's very odd. — CherryDT, Oct 16 '22 at 09:27

score 0 · Accepted Answer · edited Oct 16 '22 at 09:52

document.addEventListener('DOMContentLoaded', function () {
    var aggregateInput = function () {
        var value = ('Website Url: ') + document.querySelector('input[name="url"]').value + ' \n  \n' +
            ('Subject: ') + document.querySelector('input[name="subject"] \n').value + ' \n  \n' +
            ('Brief Message: ') + document.querySelector('textarea[name="customer service"] \n  \n').value.replace(/\n/g, '<br/>');
        document.querySelector('textarea[name="email-message"]').value = value;
    }
    document.querySelector('.contact-style').addEventListener('keyup', aggregateInput);
});

document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('.contact-form-button-submit').setAttribute('disabled', true);
    document.querySelector('.customform-message').addEventListener('keyup', function () {
        if (this.value.length != 0) {
            document.querySelector('.contact-form-button-submit').setAttribute('disabled', false);
        } else {
            document.querySelector('.contact-form-button-submit').setAttribute('disabled', true);
        }
    });
});

can you please complete the code? – Nirob Saju Oct 16 '22 at 09:39 — Nirob Saju, Oct 16 '22 at 09:39

Convert Jquery to Vanilla Script

1 Answers1