Jump to content
totallytech

Replacing a select drop down with images in php

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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

 

Have I missed something?

Edited by totallytech

Share this post


Link to post
Share on other sites

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 by totallytech

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

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 by totallytech

Share this post


Link to post
Share on other sites

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 by totallytech

Share this post


Link to post
Share on other sites

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();";

Share this post


Link to post
Share on other sites

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 by totallytech

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.