totallytech Posted April 25, 2015 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/ Share on other sites More sharing options...
nik_jain Posted April 26, 2015 Share Posted April 26, 2015 http://stackoverflow.com/questions/9508029/dropdown-select-with-images Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1509985 Share on other sites More sharing options...
totallytech Posted April 26, 2015 Author Share Posted April 26, 2015 (edited) 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 Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510006 Share on other sites More sharing options...
totallytech Posted April 26, 2015 Author Share Posted April 26, 2015 Ah ha, I've found this but cannot seem to add it to my current code... http://jsfiddle.net/TnFma/12/ Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510009 Share on other sites More sharing options...
totallytech Posted April 26, 2015 Author Share Posted April 26, 2015 (edited) 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 Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510028 Share on other sites More sharing options...
totallytech Posted April 27, 2015 Author Share Posted April 27, 2015 Anyone? Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510101 Share on other sites More sharing options...
Barand Posted April 27, 2015 Share Posted April 27, 2015 Give us a clue - what exactly is reported as being "undefined"? Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510110 Share on other sites More sharing options...
totallytech Posted April 27, 2015 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510117 Share on other sites More sharing options...
totallytech Posted April 27, 2015 Author Share Posted April 27, 2015 (edited) 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 Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510118 Share on other sites More sharing options...
totallytech Posted April 27, 2015 Author Share Posted April 27, 2015 I cannot understand why the select works and the radio doesnt when its showing the correct values Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510132 Share on other sites More sharing options...
Barand Posted April 27, 2015 Share Posted April 27, 2015 Are you using javascript to pass the value? Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510134 Share on other sites More sharing options...
totallytech Posted April 27, 2015 Author Share Posted April 27, 2015 (edited) 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 Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510136 Share on other sites More sharing options...
totallytech Posted April 27, 2015 Author Share Posted 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();"; Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510137 Share on other sites More sharing options...
totallytech Posted April 27, 2015 Author Share Posted April 27, 2015 (edited) 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 Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510138 Share on other sites More sharing options...
totallytech Posted April 27, 2015 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510139 Share on other sites More sharing options...
Barand Posted April 28, 2015 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510164 Share on other sites More sharing options...
CroNiX Posted April 28, 2015 Share Posted 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. 1 Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510197 Share on other sites More sharing options...
totallytech Posted April 28, 2015 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/295855-replacing-a-select-drop-down-with-images-in-php/#findComment-1510206 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.