Databases
StackOverflow2013
Postsdbo
POjQuery - Validate that two different <li>'s has been selected
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery - Validate that two different <li>'s has been selected
    text
    copied!<p>For an online booking system I have the user put in a pickup and destination by postcode. The problem is that the user can search an address, e.g. 'LE115GU' and it will show multiple results. At the moment the user can go to the next page of the booking form without selecting an address so it doesn't write the address to the database. I basically need to put a validation in there so that if the user doesn't select an <code>li-addr-res</code> for either pickup or destination, they are prompted with an alert.</p> <p>This is what happens if a user searches a postcode:-</p> <p><img src="https://i.stack.imgur.com/KCMr5.png" alt="enter image description here"></p> <p>So something like:-</p> <pre><code>if(nextPgeNum == 2) { // CODE // if title="Dropoff" and no li-addr-res is selected // or if title="Pickup" and no li-addr-res is selected // alert("You must select a pickup or dropoff address") } </code></pre> <p>I'm just not too sure how I can achieve this so any help would be much appreciated.</p> <p>Here is the HTML code for the dropoff.</p> <pre><code> &lt;div id="cp-row-wrapper-dp" class="row-wrapper row-wrapper-addr-search" title="Dropoff"&gt; &lt;div class="div-search-label left"&gt; &lt;p class="a-topheader-infotext"&gt; &lt;strong&gt;Destination&lt;/strong&gt; &lt;/p&gt; &lt;/div&gt; &lt;div class="div-search-content div-content left div-subrow-style ui-corner-all"&gt; &lt;input id="txt-dropoff-hn" class="input-txt-xxxsml input-txt-highlight addr-ho-input left" type="text" value="" maxlength="5" size="4" tabindex="3" name="txt-dropoff-hn"&gt; &lt;input id="txt-dropoff" class="input-txt-xmed input-txt-highlight required validate-from-db addr-search-input txt-dropoff left default success" type="text" tabindex="4" name="txt-dropoff" autocomplete="off"&gt; &lt;input class="hidden-lat-lng" type="hidden" value=""&gt; &lt;input id="txt-hidden-dp" class="hidden-post-code" type="hidden" name="txt-hidden-dp" value=""&gt; &lt;input class="hidden-route-leg" type="hidden" value="2"&gt; &lt;button id="cp-search-dest" class="btn-med ui-button ui-state-default ui-button-text-only ui-corner-all btn-hover-anim btn-row-wrapper left ui-state-hover" name="btn-row-wrapper"&gt;Search&lt;/button&gt; &lt;ul class="ul-addr-res ul-result-view" style="visibility: visible; display: block;"&gt; &lt;li class="li-addr-res"&gt; &lt;p class="p-addr-res" style="cursor: pointer;" tabindex="0"&gt;PRINCE WILLIAM ROAD, LOUGHBOROUGH, LE115GU&lt;/p&gt; &lt;/li&gt; &lt;li class="li-addr-res"&gt; &lt;p class="p-addr-res" style="cursor: pointer;" tabindex="1"&gt;ARTHUR JONES MOTORS, 6A, PRINCE WILLIAM ROAD, LOUGHBOROUGH, LE115GU&lt;/p&gt; &lt;/li&gt; &lt;li class="li-addr-res"&gt; &lt;p class="p-addr-res" style="cursor: pointer;" tabindex="2"&gt;BROMAKIN LTD, 10, PRINCE WILLIAM ROAD, LOUGHBOROUGH, LE115GU&lt;/p&gt; &lt;/li&gt; &lt;li class="li-addr-res"&gt; &lt;p class="p-addr-res" style="cursor: pointer;" tabindex="3"&gt;C D M DUCTWORK, 17, PRINCE WILLIAM ROAD, LOUGHBOROUGH, LE115GU&lt;/p&gt; &lt;/li&gt; &lt;li class="li-addr-res"&gt; &lt;p class="p-addr-res" style="cursor: pointer;" tabindex="4"&gt;CHARNWOOD MOLECULAR, 13, PRINCE WILLIAM ROAD, LOUGHBOROUGH, LE115GU&lt;/p&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div class="div-result-info div-pagenation-style" style="display: block;"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload