Replacing a select drop down with images in php

totallytech · April 25, 2015

I'm looking to replace a select dropdown with images.

My current code for the drop down is

<div class="app_services_dropdown_select">
<select name="app_select_services" class="app_select_services">
<option value="1" selected="selected">Class IV MOT (Up to 3,000KG)</option>
<option value="2">Class VII MOT (3,000KG - 3,500KG)</option></select>
<input type="button" class="app_services_button" value="Show available times">
</div>

Which is generated by this code:

$s .= '<div class="app_services">';
$s .= '<div class="app_services_dropdown">';
$s .= '<div class="app_services_dropdown_title">';
$s .= $select;
$s .= '</div>';
$s .= '<div class="app_services_dropdown_select">';
$s .= '<select name="app_select_services" class="app_select_services">';
if ( $services ) {
foreach ( $services as $service ) {
$service_description = '';
// Check if this is the first service, so it would be displayed by default
if ( $service->ID == $appointments->service ) {
$d = '';
$sel = ' selected="selected"';
}
else {
$d = ' style="display:none"';
$sel = '';
}
// Add options
$s .= '<option value="'.$service->ID.'"'.$sel.'>'. stripslashes( $service->name ) . '</option>';
}
}
$s .= '</select>';
$s .= '<input type="button" class="app_services_button" value="'.$show.'">';
$s .= '</div>';
$s .= '</div>';

And I really want an image of a car as value 1 and a van as value 2, plus I really want it to submit on click rather than having the button.

Is it possible to replace the dropdown with images instead or would I need to use a radio button, then style it using an image?

You can see my current dropdown in use here

nik_jain · April 26, 2015

http://stackoverflow.com/questions/9508029/dropdown-select-with-images

totallytech · April 26, 2015

Thanks, I've looked at that, however they all display as dropdowns on the jsfiddle site.

Have I missed something?

Edited April 26, 2015 by totallytech

totallytech · April 26, 2015

Ah ha,

I've found this but cannot seem to add it to my current code...

http://jsfiddle.net/TnFma/12/

totallytech · April 26, 2015

I've switched my code to this:

//$s .= '<select name="app_select_services" class="app_select_services">';
		if ( $services ) {
			foreach ( $services as $service ) {
				$service_description = '';
				// Check if this is the first service, so it would be displayed by default
				if ( $service->ID == $appointments->service ) {
					$d = '';
					$sel = ' checked="checked"';
				}
				else {
					$d = ' style="display:none"';
					$sel = '';
				}
				// Add options
				//$s .= '<option value="'.$service->ID.'"'.$sel.'>'. stripslashes( $service->name ) . '</option>';
				$s .= '<input type="radio" name="app_select_services" class="app_select_services" value="'.$service->ID.'"'.$sel.' />'. stripslashes( $service->name ).'<br />';
				
				// Include excerpts
				$e .= '<div '.$d.' class="app_service_excerpt" id="app_service_excerpt_'.$service->ID.'" >';
				// Let addons modify service page
				$page = apply_filters( 'app_service_page', $service->page, $service->ID );
				switch ( $description ) {
					case 'none'		:		break;
					case 'excerpt'	:		$service_description .= $appointments->get_excerpt( $page, $thumb_size, $thumb_class, $service->ID ); break;
					case 'content'	:		$service_description .= $appointments->get_content( $page, $thumb_size, $thumb_class, $service->ID ); break;
					default			:		$service_description .= $appointments->get_excerpt( $page, $thumb_size, $thumb_class, $service->ID ); break;
				}
				$e .= apply_filters('app-services-service_description', $service_description, $service, $description) . '</div>';
			}
		}
		//$s .= '</select>';

On line 16, its generating the radio with the value of 1 or 2 however I am getting undefined when I select one of the radio buttons (http://goo.gl/yxqZ9L)

Any ideas?

Edited April 26, 2015 by totallytech

totallytech · April 27, 2015

Anyone?

Barand · April 27, 2015

Give us a clue - what exactly is reported as being "undefined"?

totallytech · April 27, 2015

Hi,

Sorry, I guess I'm not being clear enough.

I currently have a drop down on my website, I need to replace it with radio buttons which I will then style with labels (so to allow people to click on images rather than a drop down)

with the dropdown working it passes a variable via the URL so if I select the first dropdown the url adds /?app_service_id=1 and if I select the second option it shows /?app_service_id=2

then I swap my code to display the radio buttons, but no matter which one I select the url adds /?app_service_id=undefined

My code is (you can see where I commented out the select element and added the radio)

//$s .= '<select name="app_select_services" class="app_select_services">';
		if ( $services ) {
			foreach ( $services as $service ) {
				$service_description = '';
				// Check if this is the first service, so it would be displayed by default
				if ( $service->ID == $appointments->service ) {
					$d = '';
					$sel = ' checked="checked"';
				}
				else {
					$d = ' style="display:none"';
					$sel = '';
				}
				// Add options
				//$s .= '<option value="'.$service->ID.'"'.$sel.'>'. stripslashes( $service->name ) . '</option>';
				$s .= '<input type="radio" name="app_select_services" value="'.$service->ID.'"'.$sel.' />'. stripslashes( $service->name ).'<br />';
				
				// Include excerpts
				$e .= '<div '.$d.' class="app_service_excerpt" id="app_service_excerpt_'.$service->ID.'" >';
				// Let addons modify service page
				$page = apply_filters( 'app_service_page', $service->page, $service->ID );
				switch ( $description ) {
					case 'none'		:		break;
					case 'excerpt'	:		$service_description .= $appointments->get_excerpt( $page, $thumb_size, $thumb_class, $service->ID ); break;
					case 'content'	:		$service_description .= $appointments->get_content( $page, $thumb_size, $thumb_class, $service->ID ); break;
					default			:		$service_description .= $appointments->get_excerpt( $page, $thumb_size, $thumb_class, $service->ID ); break;
				}
				$e .= apply_filters('app-services-service_description', $service_description, $service, $description) . '</div>';
			}
		}
		//$s .= '</select>';

You can see the select name is - name="app_select_services" and the radio name is - name="app_select_services"

both add the value of - value="'.$service->ID.'" So I cannot see why its not passing the variable via the URL

totallytech · April 27, 2015

when I view the html I see:

<div class="app_services_dropdown_select">
	<input type="radio" name="app_select_services" value="1" />Class IV MOT (Up to 3,000KG)<br />
	<input type="radio" name="app_select_services" value="2" />Class VII MOT (3,000KG - 3,500KG)<br />
	<input type="button" class="app_services_button" value="Show available times">
</div>


<div class="app_services_dropdown_select">
    <select name="app_select_services" class="app_select_services">
    <option value="1">Class IV MOT (Up to 3,000KG)</option>
    <option value="2">Class VII MOT (3,000KG - 3,500KG)</option>
    </select>
    
    <input type="button" class="app_services_button" value="Show available times">
</div>

Edited April 27, 2015 by totallytech

totallytech · April 27, 2015

I cannot understand why the select works and the radio doesnt when its showing the correct values

Barand · April 27, 2015

Are you using javascript to pass the value?

totallytech · April 27, 2015

Yes!! Thank you!!

Now you've said that I've just located:

		$script .= "$('.app_services_button').click(function(){";
		$script .= "var selected_service=$('.app_select_services option:selected').val();";
		$script .= "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);";
		$script .= "});";

I've tried:

$script .= "$('.app_select_services').change(function(){";
		$script .= "var selected_service=$('.app_select_services radio:selected').val();";
		$script .= "if (typeof selected_service=='undefined' || selected_service===null){";
		$script .= "selected_service=".$appointments->get_first_service_id().";";
		$script .= "}";
		$script .= "$('.app_service_excerpt').hide();";
		$script .= "$('#app_service_excerpt_'+selected_service).show();";
		if ( $autorefresh ) {
			$script .= "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);";
		}
		$script .= "});";

		$script .= "$('.app_services_button').click(function(){";
		$script .= "var selected_service=$('.app_select_services radio:selected').val();";
		$script .= "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);";
		$script .= "});";

And I've tried

$script .= "$('.app_select_services').change(function(){";
		$script .= "var selected_service=$('.app_select_services radio:checked').val();";
		$script .= "if (typeof selected_service=='undefined' || selected_service===null){";
		$script .= "selected_service=".$appointments->get_first_service_id().";";
		$script .= "}";
		$script .= "$('.app_service_excerpt').hide();";
		$script .= "$('#app_service_excerpt_'+selected_service).show();";
		if ( $autorefresh ) {
			$script .= "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);";
		}
		$script .= "});";

		$script .= "$('.app_services_button').click(function(){";
		$script .= "var selected_service=$('.app_select_services radio:checked').val();";
		$script .= "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);";
		$script .= "});";

But its still not working

Edited April 27, 2015 by totallytech

totallytech · April 27, 2015

I'm assuming that

$script .= "var selected_service=$('.app_select_services option:selected').val();";

is the code that I'm looking at, obviously its a radio not an option and its checked not selected so I tried

 $script .= "var selected_service=$('.app_select_services radio:checked').val();";

but still nothing. I've even tried

$script .= "var selected_service=$('input[type='radio'][name='app_select_services']:checked').val();";

totallytech · April 27, 2015

If I use

$script .= "var selected_service=$('input[type='radio'][name='app_select_services']:checked').val();";

then if I access the url directly setting ?app_service_id=1 then the first radio button works, and setting ?app_service_id=2 then the second radio button also works but the submit button no longer works to change the value

-EDIT

$script .= "var selected_service=$('input[type=radio][name=app_select_services]:checked').val();";

I've now got it working if I click on the button using the code above (too many ') however if I send autorefresh=1 in the shortcode it should hide the button (which it does) and submit onclick (which it doesnt...)

if ( $autorefresh ) {
			$script .= "$('.app_services_button').hide();";
		}

		$script .= "$('.app_select_services').change(function(){";
		$script .= "var selected_service=$('input[type=radio][name=app_select_services]:checked').val();";
		$script .= "if (typeof selected_service=='undefined' || selected_service===null){";
		$script .= "selected_service=".$appointments->get_first_service_id().";";
		$script .= "}";
		$script .= "$('.app_service_excerpt').hide();";
		$script .= "$('#app_service_excerpt_'+selected_service).show();";
		if ( $autorefresh ) {
			$script .= "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);";
		}
		$script .= "});";

		$script .= "$('.app_services_button').click(function(){";
		$script .= "var selected_service=$('input[type=radio][name=app_select_services]:checked').val();";
		$script .= "window.location.href='".$href."'.replace(/__selected_service__/, selected_service);";
		$script .= "});";

any ideas why its not submitting itself?

Edited April 27, 2015 by totallytech

totallytech · April 27, 2015

another section that calls the button is:

$(function () {
	$(document)
		.on("click", ".app_services_button, .app_workers_button", handle_submission)
		.on("click", ".appointments-list table td.free, .app_timetable div.free", handle_scheduling)
		.on("click", ".app_monthly_schedule_wrapper table td.free", handle_day_switch)
		.on("change", ".app_select_services", load_service_description)
		.on("change", ".app_select_workers", load_worker_biography)
	;
});

but again, I cannot see anything to edit here

Barand · April 28, 2015

Try stepping through the relevant JS code in your browsers debugger and try to find where an "undefined" value is being sent to the ajax call.

CroNiX · April 28, 2015

You'd do yourself a favor by putting all of your js into a js file instead of using php to construct it.

totallytech · April 28, 2015

You'd do yourself a favor by putting all of your js into a js file instead of using php to construct it.

If I'd coded this all myself, it would all be in different files, however because this is a wordpress plugin that I'm manually changing its a nightmare and I'm just making sense of the existing code.

I've managed to swap the drop down images to radios, hidden the radio and added labels which are the images, so thats all working but I just cannot get it to submit onclick

Sign In

Replacing a select drop down with images in php

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information