-3

I have a table where you can plan your vacation for each day. And you also have to select what type of day it is and for that i have radio buttons. But i want that if the 'staying' radio button is selected it shows another row as when the 'traveling'radio button is selected. And i have read other question about the if radio button is checked. But my script doesn't work and i don't know why. Here is the html: 

    <table class="table"align="center">
         <tr class="nav_row" >
         <th>Soort dag</th>
            <th>Dag</th>
            <th>Datum</th>
            <th>Plaats</th>
            <th>Verblijf naam</th>
            <th>Type verblijf</th>
            <th>Opmerkingen of andere dingen</th>
            <th>Kosten</th>
          </tr>
           <tr>
           <td><input id="verblijven1" type="radio" name="soort dag" value="op een plaats" checked> Aan het verblijven ( in bijv. hotel, camping enz.)<br><input id="reizen1" type="radio" name="soort dag" value="op reis" onclick="hideplaats1()"> Aan het reizen (bijv. vliegtuig, auto enz.)<br>
           <input class="plan_button btn" type="button" onclick="dag1Function()" value="clear row"></td>
            <td>1</td>
            <form id="dag1plaats">
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><textarea rows="4" cols="35"></textarea></td>
            <td><input type="text"></input>euro</td>

    <form id="dag1reizen">
    <td><input type="text"></input></td>
            <td><label for="vertrek1">vertrek plaats</label> 
<input id="vertrek1"type="text"></input></td>
            <td><label for="typevervoer1">type vervoer</label
<input id="typevervoer1"type="text"></input></td>
            <td><label for="aankomst1">aaknkomst plaats</label
<input id="aankomst1> type="text"></input></td>
            <td><textarea rows="4" cols="35"></textarea></td>
            <td><input type="text"></input>euro</td>
    </form>
          </tr>

          <tr>
           <td><form><input type="radio" name="soort dag" value="op een plaats" checked> Aan het verblijven ( in bijv. hotel, camping enz.)<br><input type="radio" name="soort dag" value="op reis"> Aan het reizen (bijv. vliegtuig, auto enz.)</form><br>
            <input class="plan_button btn" type="button" onclick="dag2Function()" value="clear row"></td>
           <td>2</td> 
           <form id="dag2">
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><textarea rows="4" cols="35"></textarea></td>
            <td><input type="text"></input>euro</td>
          </tr>

           <tr>
              <td><form><input type="radio" name="soort dag" value="op een plaats" checked> Aan het verblijven ( in bijv. hotel, camping enz.)<br><input type="radio" name="soort dag" value="op reis"> Aan het reizen (bijv. vliegtuig, auto enz.)</form><br>
            <input class="plan_button btn" type="button" onclick="dag3Function()" value="clear row"></td>
            <td>3</td>
            <form id="dag3">
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><textarea rows="4" cols="35"></textarea></td>
            <td><input type="text"></input>euro</td>
          </tr>
           <tr>
              <td><form><input type="radio" name="soort dag" value="op een plaats" checked> Aan het verblijven ( in bijv. hotel, camping enz.)<br><input type="radio" name="soort dag" value="op reis"> Aan het reizen (bijv. vliegtuig, auto enz.)</form><br> 
            <input class="plan_button btn" type="button" onclick="dag4Function()" value="clear row"></td>
            <td>4</td>
            <form id="dag4">
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><textarea rows="4" cols="35"></textarea></td>
            <td><input type="text"></input>euro</td>
          </tr>
           <tr>
              <td><form><input type="radio" name="soort dag" value="op een plaats" checked> Aan het verblijven ( in bijv. hotel, camping enz.)<br><input type="radio" name="soort dag" value="op reis"> Aan het reizen (bijv. vliegtuig, auto enz.)</form><br>
            <input class="plan_button btn" type="button" onclick="dag5Function()" value="clear row"></td>
            <td>5</td>
            <form id="dag5">
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><textarea rows="4" cols="35"></textarea></td>
            <td><input type="text"></input>euro</td>
          </tr>
           <tr>
              <td><form><input type="radio" name="soort dag" value="op een plaats" checked> Aan het verblijven ( in bijv. hotel, camping enz.)<br><input type="radio" name="soort dag" value="op reis"> Aan het reizen (bijv. vliegtuig, auto enz.)</form><br>
            <input class="plan_button btn" type="button" onclick="dag6Function()" value="clear row"></td>
            <td>6</td>
            <form id="dag6">
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><textarea rows="4" cols="35"></textarea></td>
            <td><input type="text"></input>euro</td>
          </tr>
           <tr>
              <td><form><input type="radio" name="soort dag" value="op een plaats" checked> Aan het verblijven ( in bijv. hotel, camping enz.)<br><input type="radio" name="soort dag" value="op reis"> Aan het reizen (bijv. vliegtuig, auto enz.)</form><br>
            <input class="plan_button btn" type="button" onclick="dag7Function()" value="clear row"></td>
            <td>7</td>
            <form id="dag7">
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><input type="text"></input></td>
            <td><textarea rows="4" cols="35"></textarea></td>
            <td><input type="text"></input>euro</td>
          </tr>
          </table>

I have also a clear row button to clear de imput of a day. This works fine if i don't have the other script for de radio button. But when i have the two scripts the clear button don't works anymore. I have the script now only for one day. But when the script works each day needs a radio button script. But for now only day one. Here is my script:

function dag1Function() {
    document.getElementById("dag1").reset();
}
function dag2Function() {
    document.getElementById("dag2").reset();
}
function dag3Function() {
    document.getElementById("dag3").reset();
}
function dag4Function() {
    document.getElementById("dag4").reset();
}
function dag5Function() {
    document.getElementById("dag5").reset();
}
function dag6Function() {
    document.getElementById("dag6").reset();
}
function dag7Function() {
    document.getElementById("dag7").reset();
}


$(document).ready(function 12345(){
if($('#verblijven1').is(':checked')) {
    $("#dag1plaats").show();
}
else { $("#dag1plaats").hide();
)}
  }


$(document).ready(function 1234(){
if($('#reizen1').is(':checked')) {
    $("#dag1reizen").show();
}
else {$("#dag1reizen").hide();
}
)}

so mu question is why doesn't the clear day button work when i have the other script and why does the radiobutton script not work

Tom De La Mar
  • 15
  • 3
  • have you included jQuery in you code? add following line in your code: `` – Rajesh Dec 28 '15 at 12:58
  • You have ***a lot*** of issues in your HTML which is most likely breaking the logic in the JS. Also, you can DRY up the code by using common classes and traversing the DOM. – Rory McCrossan Dec 28 '15 at 13:01
  • yes i have. I use bootstrap and there is jquery is linked to the file. And i'm sure it is i have checked it – Tom De La Mar Dec 28 '15 at 13:02

5 Answers5

2

Functions names may not start with a number, and should be omitted in an anonymous function call anyways. 

$(document).ready(function(){ //remove 12345
   if($('#verblijven1').is(':checked')) {
     $("#dag1plaats").show();
   } else { 
     $("#dag1plaats").hide();
  )}
}

Also, are you trying to show and hide it when a radio button changes, because if so, you should put an event handler on this event and let is perform this check as well. Or put this check in its own function and... well.. i don't know.. there is a lot going on in your scripts, with too little explanation

Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
1

Function names can't be started with digits

Reason:

Because backtracking is avoided in lexical analysis while compiling. A variable like:

 Apple;

the compiler will know it's a identifier right away when it meets letter 'A'.

However a variable like:

123apple;

compiler won't be able to decide if it's a number or identifier until it hits 'a', and it needs backtracking as a result.

Same goes with variables : Answer by Jiayang on Why can't variable names start with numbers?

Community
  • 1
  • 1
Danyal Sandeelo
  • 12,196
  • 10
  • 47
  • 78
0

  1. Your parentheses are messed up in document.ready(function(){ ... })

  2. Callbacks when passing as an anonymous function doesnt required to be named.

    $(document).ready(function() {
  if ($('#verblijven1').is(':checked')) {
    $("#dag1plaats").show();
  } else {
  $("#dag1plaats").hide();
  }
});

  3. You can create a single function to reset your HTML input instead of hundreds of them

    function dagFunction(id) {
  document.getElementById(id).reset();
}

// Calling it like
dagFunction("dag1"); // Will reset #dag1
void
  • 36,090
  • 8
  • 62
  • 107
-1

Use prop method.

if($('#verblijven1').prop(':checked')){
   //.......
}

for more on prop

RIYAJ KHAN
  • 15,032
  • 5
  • 31
  • 53
-1

try to replace $('#reizen1').is(':checked') with $('input[id=reizen1]:checked')

Nitin
  • 107
  • 5
  • When i try them the 'dag reset' script doesn't work anymore. So can someone tell me first how i can solve that problem – Tom De La Mar Dec 28 '15 at 13:34
  • I have solved the problem that the first script didn't worked. I have made another form. So now i can try the radio button script. – Tom De La Mar Dec 28 '15 at 13:43