user3251820 user3251820 - 24 days ago 11
jQuery Question

Having issue in my jquery if condition and toggle class method

I am creating bike,car wash service at doorstep. For this I ask the customer to tell me when they register for their service if they want me to wash a car or bike. It they choose car then there are further questions that I want to ask. Same for bike. I want to hide the car/bike selection element that the user did not pick.

So far I am using jquery toggle function in the click event of the car/bike choices. If user clicks car I show options for 'full wash' or 'body wash', and if user clicks two wheeler I show the 'full wash' option.

Here is my html form in server. Here is a link to see my rough example: http://vkacademy.in/crystal/.

What I need help with is to make the unselected option from the car/bike choice hide itself. So, user clicks 'car' and 'two-wheeler' is hidden, or same in reverse.

I am still learning so I would be pleased for any assistance and would love to see a working JSFiddle or similar.

My From:

<form name="f1" action="" method="post" enctype=""/>
<table width="417" border="0">
<tr>
<td width="111">Name</td>
<td width="48">&nbsp;</td>
<td></td>
<td width="244"><input type="text" name="name" id="name" value=""/></td>
</tr>
<tr>
<td>Service Rendered</td>
<td>
<input type="radio" value="car" name="car" id="car"/>Car</span> <br/>
<p id="car-show" style="display:none"><input type="radio" name="fullwash" value="fullwash" />fullwash <input type="radio" name="bodywash" value="bodywash" />Bodywash</p>
</td>

<td><input type="radio" value="twowheeler" name="twowheeler" id="twowheeler"/>Two wheeler <br/><p id="twowheeler-show" style="display:none;"><input type="radio" name="fullwash" value="fullwash" />fullwash</p></td>
<td></td>
</tr>
<tr>
<td colspan="3" style="padding-left:180px;"><input type="submit" name="submit" value="submit" id="submit" /></td>
</tr>
</table>
</form>


My jquery code:

<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
a = $('#name');
if (a.val() == '') {
alert('Enter the user name');
}
});
$('#car').click(function(){
$('#car-show').toggle("slide");
});

$('#twowheeler').click(function(){
$('#twowheeler-show').toggle("slide");
});
});
</script>

Answer

Try using hide:

  $('#car').click(function() {
    $('#twowheeler-show').hide();
    $('#car-show').toggle("slide");
  });

  $('#twowheeler').click(function() {
    $('#car-show').hide();
    $('#twowheeler-show').toggle("slide");
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="f1" action="" method="post" enctype="" />
<table width="417" border="0">
  <tr>
    <td width="111">Name</td>
    <td width="48">&nbsp;</td>
    <td></td>
    <td width="244">
      <input type="text" name="name" id="name" value="" />
    </td>
  </tr>
  <tr>
    <td>Service Rendered</td>
    <td>
      <input type="radio" value="car" name="service" id="car" />Car</span>
      <br/>
      <p id="car-show" style="display:none">
        <input type="radio" name="fullwash" value="fullwash" />fullwash
        <input type="radio" name="bodywash" value="bodywash" />Bodywash</p>
    </td>

    <td>
      <input type="radio" value="twowheeler" name="service" id="twowheeler" />Two wheeler
      <br/>
      <p id="twowheeler-show" style="display:none;">
        <input type="radio" name="fullwash" value="fullwash" />fullwash</p>
    </td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3" style="padding-left:180px;">
      <input type="submit" name="submit" value="submit" id="submit" />
    </td>
  </tr>
</table>
</form>

Comments