Help me for code

New to this but have made my way through many things but now I am stumped: I have a php page that does numerous things with a couple different form area’s. In one form area I pull a list of records from a database and display them in a select window. After the selection has been made by clicking on it, I want the NEXT button to be Enabled and not before. I have tried so many things I am back at square 1

THE BUTTON

<form name= "Next_Button_Form" method="post" action="EditRecordPage.php">
Choose The Correct Item and Click :&nbsp; 
	<input type="submit" id="nextbutton" name="nextbutton" value="NEXT"  ></strong>
</form>

THE SELECT

<select class="select" name="selected_item" size="9" id="selected_item" onChange="document.select_item_form.edit_item.value='false'; submit();" style="width: 290px">
	<?php
		GetItems($item_id, $cost, $qtyonhand, 20);
	?>
	 </select>

The button and the Select work fine, but I want the Button Disabled UNTIL something is selected with the OnChange

Thanks

Fake signature removed by gandalf458

This sounds like more of a javascript topic than a PHP one.
Moved to javascript.

1 Like

Hi @kafeniaz,

Try the following in you onchange event listener:

onchange="this.value.length ? nextbutton.removeAttribute('disabled') : nextbutton.setAttribute('disabled', '')"

You also would have to initialise the state of your submit button by setting a disabled attribute to it:

<input disabled type="submit" id="nextbutton" name="nextbutton" value="NEXT" />

You should start by having things working even when JavaScript is not available. There are many different situations that result in imperfect JavaScript execution, so assuming no JavaScript at first, gives you more reliable results.

I’ve placed the select box inside of the form, with some temporary options, so that when someone clicks on an option and then presses Enter, the form submits too.

I’ve also removed the inline event attributes as those should not be used, and placed things inside paragraph elements to more appropriately keep them separate.

<form name= "Next_Button_Form" method="post" action="EditRecordPage.php">
    <p>
        <select class="select" name="selected_item" size="9" id="selected_item" style="width: 290px">
	        <option value="1">Option 1</option>
	        <option value="2">Option 2</option>
	        <option value="3">Option 3</option>
	        <option value="4">Option 4</option>
	        <option value="5">Option 5</option>
	        <option value="6">Option 6</option>
	        <option value="7">Option 7</option>
	        <option value="8">Option 8</option>
	        <option value="9">Option 9</option>
	        <option value="10">Option 10</option>
        </select>
    </p>
    <p>
        Choose The Correct Item and Click:
        <input type="submit" id="nextbutton" name="nextbutton" value="NEXT">
    </p>
</form>

That achieves the base behaviour of the selected option being submitted with the form.

Because the form can be submitted without interaction with the next button, just disabling the next button is not enough for desired behaviour to occur. Because of that, two different things want to be done with JavaScript.

  1. Prevent form submission until an option is selected
  2. Disable the next button until an option is selected, to serve as good visual feedback

This is when we now use JavaScript to add on the additional behaviour, of preventing the form from submitting when an option is not selected.

Prevent form submission

To prevent the form submission, we must capture the form being submitted.

const form = document.querySelector("[name=Next_Button_Form]");
form.addEventListener("submit", formSubmitHandler);

We can ensure that the form is not being submitted, by using preventDefault in the formSubmitHandler function.

function formSubmitHandler(evt) {
    evt.preventDefault();
}

And the form no longer submits.

Allow form to be submitted

We only want the preventDefault to occur when there’s no selected option, so we can put the preventDefault inside of an if statement.

function formSubmitHandler(evt) {
    const form = evt.target;
    if (!hasSelectedOption(form)) {
        evt.preventDefault();
    }
}

The hasSelectedOption function just need to check if the selectedIndex is more than -1.

function hasSelectedOption(select) {
    return select.selectedIndex > -1;
}

And now the form only submits when an option is selected.

Disable next button

For added visual feedback, the next button is to be disabled until an option is selected.

First we disable the button:

function disableButton(button) {
	button.setAttribute("disabled", "disabled");
}

const next = form.elements.nextbutton;
disableButton(next);

Enable next button

And then we use the select change event, to enable it.

function enableButton(button) {
	button.removeAttribute("disabled");
}

function selectChangeHandler(evt) {
    const select = evt.target;
    const form = select.form;
    const next = form.elements.nextbutton;
	enableButton(next);
}

const select = form.elements.selected_item;
select.addEventListener("change", selectChangeHandler);

Cleaning up

The code can now be tidied up so that it is in the following order:

  1. functions
  2. event handler functions
  3. variable declarations
  4. function calls
  5. event listeners

And we’re left with the following code:

function disableButton(button) {
	button.setAttribute("disabled", "disabled");
}
function enableButton(button) {
	button.removeAttribute("disabled");
}
function hasSelectedOption(select) {
    return select.selectedIndex > -1;
}
function selectChangeHandler(evt) {
    const select = evt.target;
    const form = select.form;
    const next = form.elements.nextbutton;
	enableButton(next);
}
function formSubmitHandler(evt) {
    const form = evt.target;
    if (!hasSelectedOption(form)) {
        evt.preventDefault();
    }
}

const form = document.querySelector("[name=Next_Button_Form]");
const select = form.elements.selected_item;
const next = form.elements.nextbutton;

disableButton(next);
select.addEventListener("change", selectChangeHandler);
form.addEventListener("submit", formSubmitHandler);

Doing things in this way tends to be more reliable, because each section has only one responsibility, and it’s easy to reliably make changes to meet different future changes that may need to occur.

An example of the code can be found at https://jsfiddle.net/pmw57/5j2qw1n4/

There is just a minor issue, and that’s where the selectChangeHandler gets the next button.

function selectChangeHandler(evt) {
    const select = evt.target;
    const form = select.form;
    const next = form.elements.nextbutton;
	enableButton(next);
}
...
const next = form.elements.nextbutton;

If the next button is later on renamed, you might change the const variable and not change the one in the function. That’s a bad design, that needs to be improved.

It’s best to have these things defined only once, and all in the same place.

For best reliability I want the select listener to already know about the next button, which is commonly done by using a wrapper.

function selectChangeWrapper(nextButton) {
    return function selectChangeHandler(evt) {
        enableButton(nextButton);
    };
}
...
select.addEventListener("change", selectChangeWrapper(next));

The updated code that has all of the elements defined at just the one place is:

function disableButton(button) {
	button.setAttribute("disabled", "disabled");
}
function enableButton(button) {
	button.removeAttribute("disabled");
}
function hasSelectedOption(select) {
    return select.selectedIndex > -1;
}
function selectChangeWrapper(nextButton) {
    return function selectChangeHandler(evt) {
        enableButton(nextButton);
    };
}
function formSubmitHandler(evt) {
    const form = evt.target;
    if (!hasSelectedOption(form)) {
        evt.preventDefault();
    }
}

const form = document.querySelector("[name=Next_Button_Form]");
const select = form.elements.selected_item;
const next = form.elements.nextbutton;

disableButton(next);
select.addEventListener("change", selectChangeWrapper(next));
form.addEventListener("submit", formSubmitHandler);

and is found at https://jsfiddle.net/pmw57/5j2qw1n4/2/

1 Like