0

I have some JavaScript code in an HTML page with a button. I have two functions called 'total()' and 'con()' that handles the onClick event of the 2 buttons. i have tried putting the script tag on top of the form, buttons and i also tried putting it in the head tag. The code for the button is as follows

The problem is that when the button is clicked, the function is not called. What am I doing wrong here?

thanks for not criticizing me, i'm just a begginer.

function con() {
  var conf = confirm('Are you finished?');
  if (conf) {
    return true
  } else {
    return false
  }
}

function total() {
  // Some Code here
}
<form action="reserve.php" method="POST">
  <div class="tick"><img class="ticket" src='assets/img/<?php 
                   echo($row["Photo"]);?>' style='margin-top:10px;'>

    <h4>
      <?php echo($row["Event_Name"]); ?>
    </h4>
    <div class="table-responsive1">
      <table class="table">
        <tr>
          <th>No. Of Persons</th>
          <th>
            <select class="form-control select2" name="Ticks" id="p" required="">
			    <option selected="">Select # of Persons</option>
                <option value="1">Admit One</option>
                <option value="2">Admit Two</option>
                <option value="3">Admit Three</option>
                <option value="4">Admit Four</option>
                <option value="5">Admit Five</option>
            </select>
          </th>
        </tr>
        <tr>
          <th>Zone</th>
          <th>
            <select class="form-control select1" name="TickType" id="z" required="">
						<option value="" selected="">Select a zone</option>
                            <option value="ga" id="ga" name="TickType">General Admission</option>
                            <option value="b" id="b">Bronze</option>
                            <option value="s" id="s">Silver</option>
                            <option value="g" id="g">Gold</option>
                            <option value="p" id="p">Platinum</option>
                            <option value="v" id="v">Vip</option>
                        </select>
          </th>
        </tr>

        <div class="table-responsive">
          <table class="table">
            <thead>
              <h3>Prices</h3>
              <tr>
                <th>Gen. Admission</th>
                <th>Bronze</th>
                <th>Silver</th>
                <th>Gold</th>
                <th>Platinum</th>
                <th>VIP</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="ge">
                  <?php echo($row["GenAd_Price"]);?>~Php</td>
                <td id="br">
                  <?php echo($row["Bronze_Price"]);?>~Php</td>
                <td id="si">
                  <?php echo($row["Silver_Price"]);?>~Php</td>
                <td id="go">
                  <?php echo($row["Gold_Price"]);?>~Php</td>
                <td id="pl">
                  <?php echo($row["Platinum_Price"]);?>~Php</td>
                <td id="vi">
                  <?php echo($row["Vip_Price"]);?>~Php</td>
              </tr>
            </tbody>
          </table>
        </div>
        <br><br>
        <input type='hidden' length='1' value='<?php echo($row["Event_ID"]); ?>' name='id'>

        <button class="but" type="submit" onclick="return con()">Done</button>
</form>
<h4 id="tot" style="position:absolute; top:80%;">Total: </h4>

<button type="button" class="but" id="btn" onClick="total()">Compute</button>
</div>

Improve this question
8
  • change <button class="but" type="submit" onclick="return con()">Done</button> to <button class="but" type="button" onclick="return con()">Done</button> Commented Feb 22, 2018 at 16:36
  • 1
    I made a snippet with your code and it works. Clicking done shows a confirm alert. I didn't change anything except commenting out Some Code here. Commented Feb 22, 2018 at 16:38
  • BTW if (conf) { return true } else { return false } ------> return conf ;) Commented Feb 22, 2018 at 16:39
  • I tried your snippet, but it's still not calling the function. i tried doing this: onClick="alert("message");" and it works. it seems that it doesn't wanna call the function Commented Feb 22, 2018 at 16:51
  • This code is working. However according to me you had inserted wrong codes at many places. Here is an example. <div><h1>Hi</h1></div> . This is the right way. The first tag opened should be closed at the last. Commented Feb 22, 2018 at 16:54

1 Answer 1

Reset to default
1

The code is working for me. Whatever you are using, perhaps it doesn't support confirm(). Try if this works:

function con() {
  var sentence = document.getElementById("sentence");
  sentence.innerHTML = "Are you finished?";
  document.getElementById("conf1").style.visibility = "visible";
  document.getElementById("conf2").style.visibility = "visible";
}

function isDone(bool) {
  if (bool) {
    // do something
  } else {
    // do something
  }
}

function total() {
  // Some Code here
}
<form action="reserve.php" method="POST">
  <div class="tick"><img class="ticket" src='assets/img/<?php 
                   echo($row["Photo"]);?>' style='margin-top:10px;'>

    <h4>
      <?php echo($row["Event_Name"]); ?>
    </h4>
    <div class="table-responsive1">
      <table class="table">
        <tr>
          <th>No. Of Persons</th>
          <th>
            <select class="form-control select2" name="Ticks" id="p" required="">
              <option selected="">Select # of Persons</option>
              <option value="1">Admit One</option>
              <option value="2">Admit Two</option>
              <option value="3">Admit Three</option>
              <option value="4">Admit Four</option>
              <option value="5">Admit Five</option>
            </select>
          </th>
        </tr>
        <tr>
          <th>Zone</th>
          <th>
            <select class="form-control select1" name="TickType" id="z" required="">
              <option value="" selected="">Select a zone</option>
              <option value="ga" id="ga" name="TickType">General Admission</option>
              <option value="b" id="b">Bronze</option>
              <option value="s" id="s">Silver</option>
              <option value="g" id="g">Gold</option>
              <option value="p" id="p">Platinum</option>
              <option value="v" id="v">Vip</option>
            </select>
          </th>
        </tr>

        <div class="table-responsive">
          <table class="table">
            <thead>
              <h3>Prices</h3>
              <tr>
                <th>Gen. Admission</th>
                <th>Bronze</th>
                <th>Silver</th>
                <th>Gold</th>
                <th>Platinum</th>
                <th>VIP</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="ge">
                  <?php echo($row["GenAd_Price"]);?>~Php</td>
                <td id="br">
                  <?php echo($row["Bronze_Price"]);?>~Php</td>
                <td id="si">
                  <?php echo($row["Silver_Price"]);?>~Php</td>
                <td id="go">
                  <?php echo($row["Gold_Price"]);?>~Php</td>
                <td id="pl">
                  <?php echo($row["Platinum_Price"]);?>~Php</td>
                <td id="vi">
                  <?php echo($row["Vip_Price"]);?>~Php</td>
              </tr>
            </tbody>
          </table>
        </div>
        <br><br>
        <input type='hidden' length='1' value='<?php echo($row["Event_ID"]); ?>' name='id'>

        <button class="but" type="submit" onclick="return con()">Done</button>
</form>
<h4 id="tot" style="position:absolute; top:80%;">Total: </h4>

<button type="button" class="but" id="btn" onClick="total()">Compute</button>
<p id="sentence"></p>
<button id="conf1" style="visibility: hidden" onclick="isDone(true)">Yes</button>
<button id="conf2" style="visibility: hidden" onclick="isDone(false)">No</button>
</div>

Note: This is just an example. You don't have to use this.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.