How to create text boxes on selectiong of dynamic dropdown?

General PHP Help
#1

Hello All,
I have a function wherein I am calling all the dropdown values as follows:

	        //get all options in a drop down
    	public function getDDOptions($ddId, $activeOnly = 0, $orderBy = ''){ 
    		include 'connect_db.php';
    		$records = array();
    		$where = ($activeOnly) ? ' AND is_active = 1 ' : '';
    		$orderBy = ($orderBy) ? $orderBy : ' FIELD(option_value, "other"),option_value asc ';
    		$result = mysqli_query($connect,"SELECT option_key, option_value FROM dropdown_options WHERE dropdown_id = " . $ddId . $where . " ORDER BY ".$orderBy);
    		if ($result) {
    			// collect all rows in an array
    			while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
    				$records[$row['option_key']] = $row['option_value'];
    			}
    		}     
    		return $records;		
    	}

Then in my another php file I am calling this as:
$travel_mode = $ddObj->getDDOptions(DropDownIds::TRAVELMODE, 1, 'Id ASC');

Now so far it was only the selection of dropdown values. But I now want to show/create textbox on selection of one of the dropdown value from the DB.

<div align="center">
<select name="travel_det[t_mode][]" style="width:60px;" class="jsTravelCls" id="hlttravelmode">
<?php foreach ($travel_mode as $tra_mode) {
echo "<option value=\"" . $tra_mode . "\">" . $tra_mode . "</option>";
}
?>
</select>
</div>

Any help would be great.

#2

“selection of dropdown value” is a client action, PHP wouldn’t know about any clicks you make on basic HTML elements except e.g. anchors and submit buttons. So any action triggered has to be catched via JavaScript. From there you can create text boxes as well.

#3

I meant wrt Javascript. I tried doing but unable to create it. Could you suggest me some link or an Idea?

#4

You could have a look at the Mozilla online manual

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

#5

Just to make sure I am understanding you correctly.

You have some dropdowns, that when a user makes a selection, you want to add a textfield to the stage/DOM… correct?

Question(s):

  • Are you dynamically adding these dropdowns to the page? Are they being generated upon page load? (or added sometime/somehow after the page loads due to some other user interaction?)

  • Where is your javascript/jQuery located? (going?) I see nothing posted that gives those dropdowns any sort of interactivity (start creating an alert() or something)…

jQuery is usually a bit easier is most cases (and sometimes easier to read/understand)

You can append an element very quick and easy on the change of the dropdown selection.

#6

The dropdowns are coming from database. So when I click one of the dropdown value I must be able to create a textbox. @whispers

#7

No.

I’m asking are they on the page when it loads?

Or are you adding these dropdowns later/after the fact (dynamically) via some sort of user interaction?

Where is your javascript/jQuery located?

What is this input field supposed to do?
Is it supposed to display ANYTHING? Any text in it? What value/name/id is it supposed to have?

something like this: (no input field created in this example)

<!-- include jQuery library -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<!-- jQuery listener for the dropdown to create input field -->	
<script>
	document.addEventListener("DOMContentLoaded", function(event) {
		$("#targetDropDown").on("change", function () {
			alert(this.value);
		});
		
	});
</script>

<!-- dropdown -->
<select id="targetDropDown" name="targetDropDown" style="" class="jsTravelCls" id="hlttravelmode">
	<option value="someValue1">someValue1</option>
	<option value="someValue2">someValue2</option>
	<option value="someValue3">someValue3</option>
	<option value="someValue4">someValue4</option>
</select>

This example will add new input fields tot he DOM/stage:

<!-- include jQuery library -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<!-- jQuery listener for the dropdown to create input field -->	
<script>
	document.addEventListener("DOMContentLoaded", function(event) {
		$("#targetDropDown").on("change", function(){
			//check value
			//alert(this.value);
			
			var newFieldName = this.value;			
			//add new input field DOM element
			$("#targetContainerElement").append("<input type='text' class='fieldname' name='"+newFieldName+"' value='"+newFieldName+"'><br>");
		});
		
	});
</script>

<!-- dropdown -->
<select id="targetDropDown" name="targetDropDown" style="" class="jsTravelCls" id="hlttravelmode">
	<option value="someValue1">someValue1</option>
	<option value="someValue2">someValue2</option>
	<option value="someValue3">someValue3</option>
	<option value="someValue4">someValue4</option>
</select>

<div id="targetContainerElement">




</div>
#8

I’ll take it you got it all figured out. :slight_smile:

#9

Yes I got the solution. The link that I used to resolve was “https://stackoverflow.com/questions/16015933/javascript-show-hidden-div-when-select-option-is-selected”.

Your Idea as well helped me figure out. Thank you so very much for your help.

Sponsor our Newsletter | Privacy Policy | Terms of Service