Sigmond Gatt Sigmond Gatt - 3 months ago 11
jQuery Question

Switch between button with Jquery

I have this User Interface

enter image description here

When the i go on the page on the first time the 2 buttons appear as you can see above. When i check the checkbox the Save button appears and the other one disappear (how i wants) and vice versa

The problem is that at the first i want only 1 button appears that is the "Save Changes" Button. This is my code:

<hr>
<?php

$conn=ConnectToSql();

$query1 = "SELECT * FROM tbl_countries";

$result1 = mysqli_query($conn ,$query1)
or die ("Error in query" . mysqli_error($conn));

$choose = '';

while ($row = mysqli_fetch_assoc($result1))
{

$choose .= '<option value = "'.$row['name'].'">'.$row['name'].'</option>';
}
?>
<div class="form-group">
<label class="control-label col-sm-2" for="Country">Choose a country:</label>
<div class="col-sm-5">
<select class="form-control" name ="reg_country" >
<option selected></option>
<?php echo $choose;?></select>
</div>
</div>
<br><br><br>

<div class="form-group">
<div class="col-md-2 col-md-offset-3">
<input type="checkbox" name="change" id="change" value="0" > Change All Countries


</div>
</div>
<br>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-10">
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
<br>

<hr>


This code the switch between rows and columns:

<tr type="hidden" id="rowhidden" class="rowhidden">

<td >All Countries</td>
<td><select class="form-control" name ="monday_all" >
<option></option>
<option value = "Open">Open</option>
<option value = "Close">Close</option>
</select></td>
<td><select class="form-control" name ="tuesday_all" >
<option></option>
<option value = "Open">Open</option>
<option value = "Close">Close</option>
</select></td>
<td><select class="form-control" name ="wednesday_all" >
<option></option>
<option value = "Open">Open</option>
<option value = "Close">Close</option>
</select></td>
<td><select class="form-control" name ="thursday_all" >
<option></option>
<option value = "Open">Open</option>
<option value = "Close">Close</option>
</select></td>
<td><select class="form-control" name ="friday_all" >
<option></option>
<option value = "Open">Open</option>
<option value = "Close">Close</option>
</select></td>
<td><select class="form-control" name ="saturday_all" >
<option></option>
<option value = "Open">Open</option>
<option value = "Close">Close</option>
</select></td>
<td><select class="form-control" name ="sunday_all" >
<option></option>
<option value = "Open">Open</option>
<option value = "Close">Close</option>
</select></td>
</tr>
</table>


<?php
}
?>


This is the script:

$("#change").change(function(){

//row
$("#tablecountry tr.row2").toggle(!this.checked);
$("#tablecountry tr.rowhidden").toggle(this.checked);

//button
$(".country-specific").fadeIn("slow").toggle(!this.checked);
$(".country-all").fadeIn("slow").toggle(this.checked);

});
$("#change").change();



And 2 buttons with the id country-all and country-specific.


Now i have 2 problem :


  1. At first i need to show 1 button then they will switch with the checkbox

  2. At first i want a default value from the dropdown list. For example Malta.(you can choose malta from the dropdown list so it is already exists in the dropdown list)


Answer

In jQuery script you're trying to get reference to IDs #country-specific and #country-all which doesn't exists (you used class attribute twice but there is no id attribute).

$("#change").change(function(){
        

        $("#tablecountry tr.row2").toggle(!this.checked);
        $("#tablecountry tr.rowhidden").toggle(this.checked);
        $(".country-specific").fadeIn("slow").toggle(!this.checked);
        $(".country-all").fadeIn("slow").toggle(this.checked);

        });
$("#change").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="change">
<div class="form-group country-specific">
  <div class="col-sm-offset-5 col-sm-10">
    <button type="submit" name="updated" class="btn btn-default">Save Changes</button>
  </div>
</div>
<div class="form-group country-all">
  <div class="col-sm-offset-5 col-sm-10">
    <button type="submit" name="update-all" class="btn btn-default">Save</button>
  </div>
</div>