CODEWITHSUNDEEP
phphtmlforms
detectivecalcite
detectivecalcite

Reputation: 83

How to change html controls with php as the user provides input?

Pretty new to PHP and I'm wondering if there's a way to dynamically modify which inputs are available on an HTML form using PHP without the form data needing to be submitted. I'm making a site with a calendar for a teacher and I need to make the "duedate" input in this form gray out as soon as the user selects the option "announcement." 

<form action="calendaradd.php" method="post">
    Event name: <input name="eventname" type="text" autocomplete="off"/></br>
    Event type: <select>
                    <option value="homework">Homework</option>
                    <option value="announcement">Announcement</option>
                </select>
    Event date: <input type="date" name="eventdate"></br>
    Due date: <input type="date" name="duedate"></br></br>
    <input name="submit" type="submit" value="Submit"/>
</form>

Many thanks. Also, am I using the select/option control correctly? Are the options supposed to use value attributes instead of name?

Upvotes: 0

Views: 486

Answers (3)

Damien Pirsy
Damien Pirsy

Reputation: 25445

Bind an onchange to the select, and the if the value matches your criterium, set the input as disabled:

Using jQuery to make it easier:

$('#select').on('change',function(){

  var value = $(this).val();
  if(value == 'announcement'){
    $('#duedate').prop('disabled',true);
  }
  else{
    $('#duedate').prop('disabled',false);
  }    

});

You need to supply the proper IDs to the elements (you can get them also with DOM traversing, but an ID will be faster and easier), though. Also, your select is missing the name attribute, you need it in order to fetch the value server-side.

Upvotes: 1

Andrew Manson
Andrew Manson

Reputation: 280

Honestly, the easiest, in my opinion, would be some jQuery animation. You could make it where when the user clicks on the announcement input the due date changes color and other attributes.

JQuery is the way to go, and easier than PHP when it comes to something like this.

Upvotes: 0

Niche
Niche

Reputation: 967

You might wanna take a look at some client-side scripting, since server-side (as in PHP) cannot alter a page's contents once they've been loaded. Check it out here

You can set the onTextChanged event to a javascript function that changes the attribute disabled in the input to true.

Upvotes: 0

Related Questions