How can I get an image to display after someone uses the tool?
Basically, you run the tool to see what carrier your phone is compatible with. Its currently very simple but I was hoping to have an image show up after you've selected your phone model and run the tool. For example, you select your carrier, and the iPhone 7 you own, I would like for an image of an iPhone 7 to be shown after it has been run.
I've tried a few examples on Stackoverflow but nothing seems to work as they are a bit different than the way this was built. If anyone could point me in the right direction or show me what to do, that would be legendary. Thanks
<div data-content-amp="Phone_Compatability_Checker">
<div class="well pad-y-0 mar-b-0">
<div class="row pad-y-4 bor-b-1">
<div class="col-xs-24">
<div class="font-7">Phone Compatibility Tool</div>
</div>
</div>
<div class="row pad-y-4 bor-b-1">
<div class="col-md-12 col-lg-9"><strong>1) Which network did you purchase your phone from?</strong></div>
<div class="col-md-10">
<select id="check-compatability-carrier" tabindex="-1" class="selectpicker pad-t-4-xs pad-t-4-sm" title="Select a carrier" data-width="100%">
<option value="att">AT&T</option>
<option value="sprint">Sprint</option>
<option value="tmobile">T-Mobile</option>
<option value="verizon">Verizon</option>
</select>
</div>
</div>
<div class="row pad-y-4 bor-b-1">
<div class="col-md-12 col-lg-9"><strong>2) Which phone model did you purchase?</strong></div>
<div class="col-md-10">
<select id="check-compatability-phone" tabindex="-1" class="selectpicker pad-t-4-xs pad-t-4-sm" title="Select Your Phone Model" data-width="100%">
<option value="5X">Google Nexus 5x</option>
<option value="Nexus">Google Nexus 6</option>
<option value="6P">Google Nexus 6P</option>
<option value="Pixel">Google Pixel</option>
<option value="530">HTC Desire 530</option>
<option value="626s">HTC Desire 626s</option>
<option value="7">iPhone 7 or iPhone 7 Plus</option>
<option value="6s">iPhone 6s or iPhone 6s Plus</option>
<option value="6">iPhone 6 or iPhone 6 Plus</option>
<option value="se">iPhone SE</option>
<option value="5s5c">iPhone 5s or iPhone 5c</option>
<option value="5">iPhone 5</option>
<option value="4">iPhone 4s or iPhone 4</option>
<option value="Stylo">LG Stylo</option>
<option value="Stylo2">LG Stylo 2, Stylo 2 Plus</option>
<option value="K7">LG K7</option>
<option value="K10">LG K10</option>
<option value="V20">LG V20</option>
<option value="G5">LG G5</option>
<option value="Escape3">LG Escape 3</option>
<option value="ELTE">Motorola Moto E, Moto E LTE</option>
<option value="G4">Motorola Moto G4 Play</option>
<option value="S7">Samsung Galaxy S7 or S7 Edge</option>
<option value="S6">Samsung Galaxy S6, S6 Edge, S6 Edge +</option>
<option value="S5">Samsung Galaxy S5</option>
<option value="S4">Samsung Galaxy S4 or S4 Zoom</option>
<option value="S3">Samsung Galaxy S3 or S3 Mini</option>
<option value="Note">Samsung Galaxy Note 5, 4, 3, 2</option>
<option value="Grand">Samsung Galaxy Grand Prime</option>
<option value="Core">Samsung Galaxy Core Prime</option>
<option value="J3">Samsung Galaxy J3</option>
<option value="ZMax">ZTE Z Max Pro</option>
<option value="GMax">ZTE Grand Max</option>
</select>
</div>
</div>
<div class="row pad-y-4">
<div class="col-sm-9 col-md-offset-9">
<button id="check-compatibility-button" type="button" class="btn btn-primary" onclick="checkiPhoneCompatibility();">Check Compatibility</button>
</div>
</div>
<div class="row pad-y-4 bor-t-1 hidden" id="check-compatibility-message-wrapper">
<div class="col-md-19 col-md-offset-6 font-5">
<div class="col-sm-4 col-md-4 hidden-xs hidden-sm"><span id="check-compatibility-icon" class="fa fa-check c-green font-10 align-top hidden"></span></div>
<div class="col-sm-20 col-md-16 pad-l-2-sm pad-l-2-md pad-l-0-lg">
<div id="check-compatibility-message" class="mar-t-0 pad-t-0"></div>
<p id="check-compatibility-search" class="hidden">
<a href="javascript:;"><strong>Search plans now</strong></a>
</p>
</div>
</div>
</div>
</div>
<script>
function checkiPhoneCompatibility() {
var carrier = wo$('#check-compatability-carrier').val();
var phone = wo$('#check-compatability-phone').val();
if (phone === '' || carrier === '') {
wo$('#check-compatibility-message').html('Please select a carrier and phone model');
} else {
var networks = '';
var search = '';
switch (phone) {
case '5X':
if (carrier === 'att') {
networks = 'AT&T, T-Mobile, Sprint and Verizon';
search = '';
}
if (carrier === 'sprint') {
networks = 'Sprint, T-Mobile, Verizon and AT&T';
search = '';
}
if (carrier === 'verizon') {
networks = 'Verizon, T-Mobile, AT&T and Sprint';
search = '';
}
if (carrier === 'tmobile') {
networks = 'AT&T, Verizon, Sprint and T-Mobile';
search = '';
}
break;
case 'Nexus':
if (carrier === 'att') {
networks = 'AT&T, T-Mobile, Sprint and Verizon';
search = '';
}
if (carrier === 'sprint') {
networks = 'Sprint, T-Mobile, Verizon and AT&T';
search = '';
}
if (carrier === 'verizon') {
networks = 'Verizon, T-Mobile, AT&T and Sprint';
search = '';
}
if (carrier === 'tmobile') {
networks = 'T-Mobile, Verizon, Sprint and AT&T';
search = '';
}
break;
case '6P':
if (carrier === 'att') {
networks = 'AT&T, T-Mobile, Sprint and Verizon';
search = '';
}
if (carrier === 'sprint') {
networks = 'Sprint, T-Mobile, Verizon and AT&T';
search = '';
}
if (carrier === 'verizon') {
networks = 'Verizon, T-Mobile, AT&T and Sprint';
search = '';
}
if (carrier === 'tmobile') {
networks = 'T-Mobile, Verizon, Sprint and AT&T';
search = '';
}
break;
case 'Pixel':
if (carrier === 'att') {
networks = 'AT&T, T-Mobile, Sprint and Verizon';
search = '';
}
if (carrier === 'sprint') {
networks = 'Sprint, T-Mobile, Verizon and AT&T';
search = '';
}
if (carrier === 'verizon') {
networks = 'Verizon, T-Mobile, AT&T and Sprint';
search = '';
}
if (carrier === 'tmobile') {
networks = 'T-Mobile, Verizon, Sprint and AT&T';
search = '';
}
break;
case '530':
if (carrier === 'att') {
networks = 'AT&T, T-Mobile, Sprint and Verizon';
search = '';
}
if (carrier === 'sprint') {
networks = 'Sprint, T-Mobile, Verizon and AT&T';
search = '';
}
if (carrier === 'verizon') {
networks = 'Verizon, T-Mobile, AT&T and Sprint';
search = '';
}
if (carrier === 'tmobile') {
networks = 'T-Mobile, Verizon, Sprint and AT&T';
search = '';
}
break;
case '626s':
if (carrier === 'att') {
networks = 'AT&T, T-Mobile, Sprint and Verizon';
search = '';
}
if (carrier === 'sprint') {
networks = 'Sprint, T-Mobile, Verizon and AT&T';
search = '';
}
if (carrier === 'verizon') {
networks = 'Verizon, T-Mobile, AT&T and Sprint';
search = '';
}
if (carrier === 'tmobile') {
networks = 'T-Mobile, Verizon, Sprint and AT&T';
search = '';
}
break;
case '7':
if (carrier === 'att') {
networks = 'AT&T, T-Mobile, Sprint and Verizon';
search = '';
}
if (carrier === 'sprint') {
networks = 'Sprint, T-Mobile, Verizon and AT&T';
search = '';
}
if (carrier === 'verizon') {
networks = 'Verizon, T-Mobile, AT&T and Sprint';
search = '';
}
if (carrier === 'tmobile') {
networks = 'T-Mobile, Verizon, Sprint and AT&T';
search = '';
}
break;
case '6s':
if (carrier === 'att') {
networks = 'AT&T, T-Mobile, Sprint and Verizon';
search = '';
}
if (carrier === 'sprint') {
networks = 'Sprint, T-Mobile, Verizon and AT&T';
search = '';
}
if (carrier === 'verizon') {
networks = 'Verizon, T-Mobile, AT&T and Sprint';
search = '';
}
if (carrier === 'tmobile') {
networks = 'T-Mobile, Verizon, Sprint and AT&T';
search = '';
}
break;
default:
networks = 'AT&T, Sprint, T-Mobile, and Verizon';
break;
}
wo$('#check-compatibility-icon, #check-compatibility-search').removeClass('hidden');
wo$('#check-compatibility-message').html('Your unlocked phone is compatible with these networks: <strong>' + networks + '</strong>');
wo$('#check-compatibility-search a').attr('href', '/CellPhones/Search?simonly=true' + search);
}
wo$('#check-compatibility-message-wrapper').removeClass('hidden');
if (wo$('body[data-frame-amp]').length > 0) {
window.parent.postMessage({
sentinel: 'amp',
type: 'embed-size',
height: document.body.scrollHeight
}, '*');
}
}
</script>
Aucun commentaire:
Enregistrer un commentaire