javascript - Field only required if certain dropdown is selected in a HTML form -

-

i wondering how field required if dropdown selected. in form, person select "canada" , 2 fields underneath appear(province , postal code), required before person submits form. , if person selected "united states", state , zip code appear instead.

the trouble having if choose either country, fields not associated country still required though hidden. need if choose united states, province nor postal code required, , same other way around.

any appreciated:) here form

<script type='text/javascript'>//<![cdata[   $('select[name=country]').change(function () {         if ($(this).val() == 'canada') {             $('#provinceselect').show();             $('#province').prop('required',true);          } else {             $('#provinceselect').prop('required',false);             $('#provinceselect').hide();             $('#province').prop('required',false);          }      });        $('select[name=country]').change(function () {         if ($(this).val() == 'canada') {             $('#postalselect').show();             $('#postal').prop('required',true);          } else {             $('#postalselect').prop('required',false);             $('#postalselect').hide();             $('#postal').prop('required',false);          }      });           </script>  <!--html form-->  <form action="pppaymentform/pppaymentform.php"  method="post" name="topchoiceform" id="topchoiceform">         <input placeholder="company name" type="text" name="companyname">         <input placeholder="first name" type="text" name="first_name" required>         <input placeholder="last name" type="text" name="last_name" required>         <input placeholder="email" type="email" name="email" id="email" required>      <!--country select-->          <select class="countrycss" id="country" name="country" required>     <option value="" selected="selected">please select country</option>     <option value="canada" id="canada">canada</option>     <option value="united states" id="united states">united states</option>      </select>      <!--province select-->     <div id="provinceselect" style="display:none;">     <select class="provincecss" id="province" name="province" required>     <option value="" selected="selected">please select province</option>     <option value="alberta" id="alberta">alberta</option>     <option value="british coloumbia" id="british coloumbia">british coloumbia</option>      </select>     </div>      <!--state select-->     <div id="stateselect" style="display:none;">     <select class="statecss" id="state" name="state">     <option value="" selected="selected">please select state</option>     <option value="arkansas" id="arkansas">alaska</option>     <option value="hawalli" id="hawalli">hawalli</option>      </select>      </div>            <!--postal select-->         <div id="postalselect" style="display:none;">         <input placeholder="postal code" type="text" name="postal" required>         </div>           <!--zip select-->         <div id="zipselect" style="display:none;">         <input placeholder="zipcode" type="text" name="zip" required>         </div>          <input placeholder="city" type="text" name="city" required>          <input placeholder="address" type="text" name="address1" required>          <input name="shipping" class="shipping" type="radio" id="shipping" checked/>         <label class="shippingcheck">$19.99 shipping – database sent on cd rom </label>         <br>         <input name="shipping" class="shipping" type="radio" id="noshipping" />         <label class="shippingcheck">free shipping – database sent via email</label>          <br>         <button name="submit" type="submit" id="submit">pay now</button>

you use .prop() method, each of .change have like

$('select[name=country]').change(function () {         if ($(this).val() == 'canada') {             $('#provinceselect').show();             $('#provinceselect').prop('required',true);         } else {             $('#provinceselect').prop('required',false);             $('#provinceselect').hide();         }     });

i'm curious why have 4 different instances of .change() have put them under same instance of change() since reacting same thing.


Comments

Post a Comment

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

-
i trying fetch records database , having above error this classs appropriate getters , setters public class user { private int id; private string username; private string password; private string email; i have create database , inserted data below configuration <bean id="datasource" class="org.apache.commons.dbcp2.basicdatasource" destroy-method="close"> <property name="driverclassname" value="com.mysql.jdbc.driver"/> <property name="url" value="jdbc:mysql://localhost:3306/usersdb"/> <property name="username" value="root"/> <property name="password" value=""/> </bean> this complete stacktrace severe: servlet.service() servlet [appservlet] in context path [/spring] threw exception [request processing failed; nested exception org.hibernate.exception.sqlgrammarexception: not ...
Read more

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

-
Image
i have postgresql db number of tables. if query: select column_name information_schema.columns table_name="my_table"; i list of columns returned properly. however, when query: select * "my_table"; i error: (programmingerror) relation "my_table" not exist 'select *\n "my_table"\n' {} any thoughts on why can columns, can't query table? goal able query table. you have include schema if isnt public one select * <schema>."my_table" or can change default schema show search_path; set search_path my_schema; check table schema here select * information_schema.columns for example if table on default schema public both works ok select * parroquias_region select * public.parroquias_region but sectors need specify schema select * map_update.sectores_point
Read more

asp.net mvc - breakpoint on javascript in CSHTML? -

-
i have .cshtml file has javascript tag. within script tag have few lines of javascript. first line of javascript refers property in @viewbag. other javascript lines plain script without mvc related references. observation: can place breakpoints (visual studio 2015) on each of these javascript lines. however, breakpoints has white dot in center of breakpoint symbol (red circle) except line @viewbag reference (this particular line not have white dot in center). it seems breakpoint without white dot hit during run-time. question: can explain going on here? white dot mean? why plain red breakpoint line line hitting breakpoint? the visual studio debugger expecting debug actual server-side code within .cshtml file opposed client-side javascript within it. iirc, visual studio allow debug javascript code expected in internet explorer (and possibly edge), other browsers want use either third-party tool or developer tools (f12) within browser. an easy approach take advant...
Read more