Can someone help me convert this jQuery code into vanilla JavaScript?

Question

Can someone help me convert this jQuery code into vanilla JavaScript?

Hey, I'm facing an issue where I can't use jQuery. Can someone assist me in converting these 3 selectors to JavaScript? I tried using document.getElementById('FeedbackLightBox_txtName').value; but it didn't work as expected.


    <script type="text/javascript">
    function SetButtonStatus() {
        var tb1 = document.getElementById('FeedbackLightBox_txtName').value;
        var tb2 = document.getElementById('FeedbackLightBox_txtMessage').value;
        var tb3 = document.getElementById('FeedbackLightBox_txtEmail').value;
        if (tb1.length >= 5 && tb2.length >= 5 && tb3.length >= 5)
            makeBtn();
        else
        $('#FeedbackLightBox_btnSubmit')[0].control.set_enabled(false);
    }
    function makeBtn() {
        $('#FeedbackLightBox_btnSubmit')[0].control.set_enabled(true);
    }
    function ClearValues(sender, args) {
        $('#FeedbackLightBox_txtName').val('');
        $('#FeedbackLightBox_txtMessage').val('');
        $('#FeedbackLightBox_txtEmail').val('');
        args.set_cancel(true);
        return false;
    }
</script>

javascript

Answer 1

Answer №1

Is this what you're looking for?

document.getElementById('SubmissionButton').control.set_enabled(false);

document.getElementById('NameInputField').value = '';

Just For Your Information

When you mention

$('#SubmissionButton')[0] // it provides access to the HTML element object, similar to saying `document.getElementById('Subm..)`.

Answer 2

Is this what you're looking for?

document.getElementById('SubmissionButton').control.set_enabled(false);

document.getElementById('NameInputField').value = '';

Just For Your Information

When you mention

$('#SubmissionButton')[0] // it provides access to the HTML element object, similar to saying `document.getElementById('Subm..)`.

Answer 3

Answer №2

Uncertain of the location where .control.set_enabled(false); is defined within the element, but I presume you are aware.

function ConfirmButtonStatus() {
        var input1 = document.getElementById('FeedbackLightBox_txtName').value;
        var input2 = document.getElementById('FeedbackLightBox_txtMessage').value;
        var input3 = document.getElementById('FeedbackLightBox_txtEmail').value;
        if (input1.length >= 5 && input2.length >= 5 && input3.length >= 5) {
                activateButton();
        } else {
            document.getElementById("FeedbackLightBox_btnSubmit").control.set_enabled(false);
        }
}
function activateButton() {
        document.getElementById("FeedbackLightBox_btnSubmit").control.set_enabled(true);
}
function ResetValues(sender, information) {
        document.getElementById("FeedbackLightBox_txtName").value = '';
        document.getElementById("FeedbackLightBox_txtMessage").value = '';
        document.getElementById("FeedbackLightBox_txtEmail").value = '';
        information.set_cancel(true);
        return false;
}

Answer 4

Uncertain of the location where .control.set_enabled(false); is defined within the element, but I presume you are aware.

function ConfirmButtonStatus() {
        var input1 = document.getElementById('FeedbackLightBox_txtName').value;
        var input2 = document.getElementById('FeedbackLightBox_txtMessage').value;
        var input3 = document.getElementById('FeedbackLightBox_txtEmail').value;
        if (input1.length >= 5 && input2.length >= 5 && input3.length >= 5) {
                activateButton();
        } else {
            document.getElementById("FeedbackLightBox_btnSubmit").control.set_enabled(false);
        }
}
function activateButton() {
        document.getElementById("FeedbackLightBox_btnSubmit").control.set_enabled(true);
}
function ResetValues(sender, information) {
        document.getElementById("FeedbackLightBox_txtName").value = '';
        document.getElementById("FeedbackLightBox_txtMessage").value = '';
        document.getElementById("FeedbackLightBox_txtEmail").value = '';
        information.set_cancel(true);
        return false;
}

Answer 5

Answer №3

It appears that you have a form structured like this:

<form id="FeedbackLightBox_form" onsubmit="return validate(this)" action="">
  Name: <input name="FeedbackLightBox_txtName"><br>
  Message: <teaxtArea name="FeedbackLightBox_txtMessage"></textarea><br>
  Email: <input name="FeedbackLightBox_txtEmail"><br>
  <input type="submit" id="FeedbackLightBox_btnSubmit">  <input type="reset">
</form>

If you want to ensure that something is entered in each field before submission, the validation process would look like this:

function validate(form) {
  var control, controls = form.controls;
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    control = controls[i];
    if (control.type != 'submit' && control.value.length < 5) {
      return false;
    }
  }
}

The unnecessary clearForm function can be omitted if you include a reset button, but here it is anyway:

function clearForm() {
  document.getElementById('FeedbackLightBox_form').reset();
}

Likewise, the oddly named makeBtn function can be simplified as follows:

function makeBtn() {
    document.betElementById('FeedbackLightBox_btnSubmit').disabled = false;
}

Perhaps it would make more sense to rename it to enableBtn?

Answer 6

It appears that you have a form structured like this:

<form id="FeedbackLightBox_form" onsubmit="return validate(this)" action="">
  Name: <input name="FeedbackLightBox_txtName"><br>
  Message: <teaxtArea name="FeedbackLightBox_txtMessage"></textarea><br>
  Email: <input name="FeedbackLightBox_txtEmail"><br>
  <input type="submit" id="FeedbackLightBox_btnSubmit">  <input type="reset">
</form>

If you want to ensure that something is entered in each field before submission, the validation process would look like this:

function validate(form) {
  var control, controls = form.controls;
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    control = controls[i];
    if (control.type != 'submit' && control.value.length < 5) {
      return false;
    }
  }
}

The unnecessary clearForm function can be omitted if you include a reset button, but here it is anyway:

function clearForm() {
  document.getElementById('FeedbackLightBox_form').reset();
}

Likewise, the oddly named makeBtn function can be simplified as follows:

function makeBtn() {
    document.betElementById('FeedbackLightBox_btnSubmit').disabled = false;
}

Perhaps it would make more sense to rename it to enableBtn?

Answer 7

Answer №4

It seems like jQuery is specifically being used here to retrieve HTML elements, which could lead to redundancy. To optimize your code, consider defining these elements as global variables before your functions or passing them as arguments to prevent duplication.

var input1 = document.getElementById('FeedbackLightBox_txtName');
var input2 = document.getElementById('FeedbackLightBox_txtMessage');
var input3 = document.getElementById('FeedbackLightBox_txtEmail');
var button = document.getElementById('FeedbackLightBox_btnSubmit');

function CheckInputStatus() {
    if (input1.value.length >= 5 && input2.value.length >= 5 && input3.value.length >= 5)
        enableButton();
    else
        button.control.set_enabled(false);
}
function enableButton() {
    button.control.set_enabled(true);
}
function ResetFields(sender, args) {
    input1.value = '';
    input2.value = '';
    input3.value = '';
    args.set_cancel(true);
    return false;
}

Answer 8

It seems like jQuery is specifically being used here to retrieve HTML elements, which could lead to redundancy. To optimize your code, consider defining these elements as global variables before your functions or passing them as arguments to prevent duplication.

var input1 = document.getElementById('FeedbackLightBox_txtName');
var input2 = document.getElementById('FeedbackLightBox_txtMessage');
var input3 = document.getElementById('FeedbackLightBox_txtEmail');
var button = document.getElementById('FeedbackLightBox_btnSubmit');

function CheckInputStatus() {
    if (input1.value.length >= 5 && input2.value.length >= 5 && input3.value.length >= 5)
        enableButton();
    else
        button.control.set_enabled(false);
}
function enableButton() {
    button.control.set_enabled(true);
}
function ResetFields(sender, args) {
    input1.value = '';
    input2.value = '';
    input3.value = '';
    args.set_cancel(true);
    return false;
}

Can someone help me convert this jQuery code into vanilla JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Efficient Ways to Store Text and Images in Vue.js

Toggle between classes by clicking on the next or back button

Utilizing Node.js within a closed intranet environment

Error: The jQuery Class is returning an undefined value

Standardizing the file name in Internet Explorer 11 and generating a new file using JavaScript

Refreshing an external file in Node.js at regular intervals

Handling exceptions in Express.js with EJS templating using Node.js

Prompt user to confirm action with jQuery before proceeding

Is there a way to apply the active class without relying on an anchor element?

The paste event triggers before any text is input into the textbox

JSON data localization

Looking to reset the default display option in a select dropdown using JavaScript or jQuery?

I am experiencing difficulty with implementing a page break within the <tr> and <tbody> elements

Error occurs while running NPM script

Determine the week number based on a specified starting day for the week

When debugging in ASP MVC4, JavaScript will only evaluate HiddenFor once you've paused to inspect it

Tips on ensuring that the Google Maps marker remains in the center as you drag the map with the AGM component

Concern with Isotope's masonry feature

What is the best way to incorporate an environmental variable in my AngularJS controller?

How to Properly Manipulate DOM Elements in an Angular Directive