Databases
StackOverflow2013
Postsdbo
POMy javascript contact form doesn't work
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMy javascript contact form doesn't work
    text
    copied!<p>I need to use javascript to disbale fields when an option is select from list box. But when the fields are disabled, form does not work.</p> <p>I am making a contact form with this PHP code</p> <pre><code>&lt;?php $action = $_SERVER['PHP_SELF']; $fname = $_POST['fname']; $phone = $_POST['phone']; $e_mail = $_POST['e_mail']; $service = $_POST['service']; $maker = $_POST['maker']; $model = $_POST['model']; $year = $_POST['year']; $message = $_POST['message']; $headers = 'From: me &lt;reply@locallockman.com&gt;'; $thankyou = "thankyou.html"; // thank you page if(isset($_POST['fname']) &amp;&amp; isset($_POST['phone']) &amp;&amp; isset($_POST['e_mail']) &amp;&amp; isset($_POST['service']) &amp;&amp; isset($_POST['maker']) &amp;&amp; isset($_POST['model']) &amp;&amp; isset($_POST['year']) &amp;&amp; isset($_POST['message'])){ $fname = $_POST['fname']; $phone = $_POST['phone']; $e_mail = $_POST['e_mail']; $type = $_POST['service']; $maker = $_POST['maker']; $model = $_POST['model']; $year = $_POST['year']; $message = $_POST['message']; if(empty($phone)){ echo 'Please fill all fields.'; } else{ if(mail($to,$subject,$body,$headers)){ header('Location: thankyou.html'); } else{ echo 'There was an error sending email/s.'; } } } ?&gt; </code></pre> <p>This is the javascript that I am using to disable and enable the fields.</p> <pre><code> &lt;script&gt; function findselected(){ var state = document.getElementById('type'); var notus = document.getElementById('model'); var year = document.getElementById('year'); var maker = document.getElementById('maker'); (state.value == "Automotive Service")? notus.disabled = false : notus.disabled = true; (state.value == "Automotive Service")? year.disabled = false : year.disabled = true; (state.value == "Automotive Service")? maker.disabled = false : maker.disabled = true; } &lt;/script&gt; </code></pre> <p>Now if don't use javascript this form works. But when i use this javascript form does not work.</p> <p>Here is the HTML code of the form:</p> <pre><code>&lt;form action="form.php" method="post"&gt; Customer Name : &lt;input type="text" name="fname" class="text-box" autocomplete="on" /&gt; Contact No. : &lt;input type="number" name="phone" class="text-box" autocomplete="on"/&gt;&lt;br /&gt;&lt;br /&gt; E-mail: &lt;input type="email" name="e_mail" class="text-box" autocomplete="on"/&gt;&lt;br /&gt;&lt;br /&gt; Service Type: &lt;select name="service" id="type" onchange="findselected()"&gt; &lt;option value="Not Selected"&gt;Select Service Type&lt;/option&gt; &lt;option value="Residential Service"&gt;Residential Service&lt;/option&gt; &lt;option value="Commercial Service"&gt;Commercial Service&lt;/option&gt; &lt;option value="Industrial Service"&gt;Industrial Service&lt;/option&gt; &lt;option value="24/7 or Emergency Service"&gt;24/7 or Emergency Service&lt;/option&gt; &lt;option value="Automotive Service"&gt;Automotive Service&lt;/option&gt; &lt;/select&gt; Car Make: &lt;select name="maker" id="maker" autocomplete="on"&gt; &lt;option value="Not Selected" selected="selected" &gt;&lt;strong&gt;Select Car Make&lt;/strong&gt;&lt;/option&gt; &lt;option value="Acura" &gt;Acura&lt;/option&gt; &lt;option value="Audi"&gt;Audi&lt;/option&gt; &lt;option value="BMW"&gt;BMW&lt;/option&gt; &lt;option value="Buick"&gt;Buick&lt;/option&gt; &lt;option value="Cadillac"&gt;Cadillac&lt;/option&gt; &lt;option value="Chevrolet"&gt;Chevrolet&lt;/option&gt; &lt;option value="Chrysler"&gt;Chrysler&lt;/option&gt; &lt;option value="Daewoo"&gt;Daewoo&lt;/option&gt; &lt;option value="Dodge"&gt;Dodge&lt;/option&gt; &lt;option value="Fiat"&gt;Fiat&lt;/option&gt; &lt;option value="Ford"&gt;Ford&lt;/option&gt; &lt;option value="General Motors"&gt;General Motors&lt;/option&gt; &lt;option value="Honda"&gt;Honda&lt;/option&gt; &lt;option value="Hummer"&gt;Hummer&lt;/option&gt; &lt;option value="Hyundai"&gt;Hyundai&lt;/option&gt; &lt;option value="Isuzu"&gt;Isuzu&lt;/option&gt; &lt;option value="Infinity"&gt;Infinity&lt;/option&gt; &lt;option value="Jaguar"&gt;Jaguar&lt;/option&gt; &lt;option value="Jeep"&gt;Jeep&lt;/option&gt; &lt;option value="Kia"&gt;Kia&lt;/option&gt; &lt;option value="Lexus"&gt;Lexus&lt;/option&gt; &lt;option value="Lincoln"&gt;Lincoln&lt;/option&gt; &lt;option value="Mercedes"&gt;Mercedes Benz&lt;/option&gt; &lt;option value="Mazda"&gt;Mazda&lt;/option&gt; &lt;option value="Mercury"&gt;Mercury&lt;/option&gt; &lt;option value="Mini"&gt;Mini&lt;/option&gt; &lt;option value="Mitsubishi"&gt;Mitsubishi&lt;/option&gt; &lt;option value="NISSAN"&gt;NISSAN&lt;/option&gt; &lt;option value="Plymouth"&gt;Plymouth&lt;/option&gt; &lt;option value="Pontiac"&gt;Pontiac&lt;/option&gt; &lt;option value="Porche"&gt;Porche&lt;/option&gt; &lt;option value="Saab"&gt;Saab&lt;/option&gt; &lt;option value="Saturn"&gt;Saturn&lt;/option&gt; &lt;option value="Subaru"&gt;Subaru&lt;/option&gt; &lt;option value="Suzuki"&gt;Suzuki&lt;/option&gt; &lt;option value="Toyota"&gt;Toyota&lt;/option&gt; &lt;option value="Volkswagen"&gt;Volkswagen&lt;/option&gt; &lt;option value="Volvo"&gt;Volvo&lt;/option&gt; &lt;/select&gt; Car Model: &lt;input type="text" name="model" id="model" class="text-box" autocomplete="on" disabled="disabled" value=" "/&gt; Model Year: &lt;input type="text" name="year" id="year" value=" " disabled="disabled" class="text-box" autocomplete="on"/&gt; Service Required: &lt;textarea name="message" class="text-area" autocomplete="on"&gt;&lt;/textarea&gt; &lt;br /&gt;&lt;br /&gt; &lt;input type="submit" value=" " class="submit"/&gt; &lt;/p&gt; &lt;/form&gt; </code></pre> <p>When I select any option other than "Automotive Service" from the list box, the fields "Car-Make", "Car Model" and "Model Year" gets disabled. But when I run the form, it does not work.</p> <ol> <li>When I choose "Automotive Service" from list box, it does work.</li> <li>But when I choose other options, fields are disabled but form does not work.</li> </ol>
 

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