A
A
Alisa942019-03-18 16:30:52
JavaScript
Alisa94, 2019-03-18 16:30:52

How to check input fields for the right value?

I have this problem, after one check against the condition and after the change, I can no longer go back and re-check.
I have a list of buttons that are contained in a sidebar and have a value that matches their name. The main container has two input fields and one comparison button. We will not touch on the functionality of this button, here we are only interested in turning the button on / off under certain conditions.
So, the user clicks on an arbitrary button from the list and the value of this button, which, as already mentioned, corresponds to the name of the button itself, is transferred to the first input field. So far, the compare button is disabled. The user then clicks on any button from the same location and the name of that button appears in the second input field. The compare button is now enabled. Further, the user decided that he should change the first field to something else by simply editing this field and he simply deletes the text from there and writes something of his own that does not correspond to anything from that list, i.e. the name entered by the user in the first field does not exist among the sidebar buttons. After all this, the button for comparison should have turned off, because. the name entered in the first field is gone, but this button remains active.
So, I need to disable this button and I can't handle it.
Another problem is that after editing the name in the first field to something else, if the user decides to click on the buttons on the sidebar to change the name of the first field to the existing name (or something else), then the changes will continue to be made in the second field. Those. after the first check of the condition, I cannot go back and check this condition with each change, but I need each change to be checked.
I will be very grateful for your help.
I will give you the pug code, if necessary, I can change it to js and html.

extends layout

mixin projectButton(objectKey)
  button.viewButton(type="button" value=objectKey !{objectKey} )

block append main
  div.container
    div.row
      div.col-md-6.offset-md-3
        div.form-group
          input.form-control#projectA(type="text" name="projectA")
    div.row
      div.col-md-6.offset-md-3
        div.form-group
          input.form-control#projectB(type="text" name="projectB")
    div.row
      div.col-md-6.offset-md-3
        div.form-group(style="text-align:right;")
          button.btn.btn-primary#v(type="button" disabled="disabled") Сравнить

block append sidebar

  for val in projectlist
    +projectButton(val.objectKey)

  script(type='text/javascript').
    const inputNameOne = document.getElementById('projectA');
    const inputNameTwo = document.getElementById('projectB');

    const buttons = document.querySelectorAll('.viewButton');

    const btnV = document.getElementById('v');

    buttons.forEach(btn => btn.onclick = () => {
      if (inputNameOne.value === '') {
        inputNameOne.value = btn.value
      } else if (inputNameOne.value !== btn.value) {
        inputNameTwo.value = btn.value;
      };

      if ((inputNameOne.value.length === 0) || (inputNameTwo.value.length === 0)) {
        return btnV.disabled = true;
      };
      if ((btnV.disabled = inputNameOne.value) && (btnV.disabled = inputNameTwo.value)) {
        if (inputNameOne.value !== inputNameTwo.value) {
          return btnV.disabled = false;
        }
      };
      if (inputNameOne.value !== btn.value) {
        btnV.disabled = true;
        return inputNameOne.value = btn.value;
      }
    })

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question