Selecting a value programatically in a searchable list

I managed to figure it out. The key thing I was missing was how to inform Javascript that the field’s value has changed, as it turns out you need to create and dispatch an event, not fire an existing one! If anyone needs the code, you can adapt mine, i created it as a shortcode:

function import_button(){
    if (WC()->cart){
		$cart_items = WC()->cart->get_cart();
		
		$book_names = array();
		$book_ammounts = array();
		
		foreach ($cart_items as $cart_item){
			$this_book_name = $cart_item['data']->get_title();
			$this_book_ammount = $cart_item['quantity'];
			
			array_push($book_names, $this_book_name);
			array_push($book_ammounts, $this_book_ammount);
		}
		?>
		<script>
			function import_items_from_cart(){
				var existing_books_list = document.getElementById("_s1").getElementsByTagName('select');
				var existing_ammounts_list = document.getElementById("_s1").getElementsByClassName('redNaoNumber');
				
				var booksToBeAdded = <?php echo json_encode($book_names) ?>;
				var bookAmmountsToBeAdded = <?php echo json_encode($book_ammounts) ?>;
				
				var addButton = document.getElementsByClassName("fa-plus")[0].parentElement;
				
				// check if book already exists in list and the ammount is correct, if not add it
				for (var i=0; i<booksToBeAdded.length; i++){
					var existing_index = get_existing_index(existing_books_list, booksToBeAdded[i]);
					
					// if the book exists in the list
					if (existing_index!=null){
						
						if (existing_ammounts_list[existing_index].value<bookAmmountsToBeAdded[i]){
							existing_ammounts_list[existing_index].value = bookAmmountsToBeAdded[i]; // update the ammount, just in case
							$(existing_ammounts_list)[existing_index].dispatchEvent(new Event("change"));
						}
					}
					else{
						empty_field_index = findEmptyField(existing_books_list);

						if (empty_field_index!=null){
							var bookName = booksToBeAdded[i];
							var option = $(existing_books_list[empty_field_index]).find('option:contains("'+ bookName +'")');
							
							if (option!=null){
								$(option).prop('selected', true);
								$(existing_books_list)[empty_field_index].dispatchEvent(new Event("change"));
								
								existing_ammounts_list[empty_field_index].value = bookAmmountsToBeAdded[i]; // update the ammount, just in case
								$(existing_ammounts_list)[empty_field_index].dispatchEvent(new Event("change"));
							}
						}
					}
				}
					
				// gets the book's index in isankstine saskaita list
				function get_existing_index(arr, value){
					for (var i=0; i<arr.length; i++){
						selected = $(arr[i]).find(":selected").text();
						
						if (selected == value){
							return i;
						}
					}
					return null;
				}
				
				// finds a field that hasn't been used, if there aren't any adds one
				function findEmptyField(arr){
					var i;
					for (i=0; i<arr.length; i++){
						field_value = $(arr[i]).find(":selected").text();
						
						if (field_value == ""){
							return i;
						}
					}
					addButton.click();
					return i;
				}
			}
			
			// button  adding
			var ready = function () {
				// If element exists
				if (document.getElementsByClassName("btn-next")[0]) {
					var button_html = '<button id="import_button" class="button" style="float: left !important;" onclick="import_items_from_cart()"> Įkelti iš krepšelio </button>';
					
					var btn_next = document.getElementsByClassName("btn-next")[0];
					var btn_prev = document.getElementsByClassName("btn-prev")[0];
					var first_step_btn = document.querySelector("li[data-step='1']");
					
					$(btn_prev).before(button_html); // add the button
					
					btn_next.addEventListener("click", function() { if (!first_step_btn.classList.contains('active')){ document.getElementById("import_button").style.visibility = "hidden";}});
					first_step_btn.addEventListener("click", function() {document.getElementById("import_button").style.visibility = "visible";});
					btn_prev.addEventListener("click", function() {if (first_step_btn.classList.contains('active')){document.getElementById("import_button").style.visibility = "visible";}});
					
					// Return so that we don't call requestAnimationFrame() again
					return;
				}
				// If the body element isn't found, run ready() again at the next pain
				window.requestAnimationFrame(ready);
			};

			// Initialize our ready() function
			window.requestAnimationFrame(ready);
		</script>
	<?php }
}
add_shortcode('import_from_cart', 'import_button');

• This reply was modified 4 years, 7 months ago by evaldash.