Javascript Function Not Preventing Form Submission with IF ELSE statement

Question

I am using a small page to create a team of two members and it should stop the page from submission if someone selects the same member in both fields. I amusing following code:

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script 
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
  <link rel="stylesheet" 
href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<form>
<select name="tm_1_id" id="tm_1_id">
<option>Sajjad</option>
<option>Mahmood</option>
<option>Ahsan</option>
<option>Usman</option>
</select>
<br>
<select name="tm_2_id" id="tm_2_id">
<option>Sajjad</option>
<option>Mahmood</option>
<option>Waqas</option>
<option>Shahnawaz</option>

</select>
<br>
 <input type="submit" name="submit" id="submit" value="Create" 
 onClick="return checkDouble();" />
 </form></html>
 <script>

    var mmbr1 = document.getElementById("tm_1_id");
    var tm1 = mmbr1.options[mmbr1.selectedIndex].value;
    var mmbr2 = document.getElementById("tm_2_id");
    var tm2 = mmbr2.options[mmbr2.selectedIndex].value;
    function checkDouble(){
    if (2>1)
        {
        alert (tm2);
 return false;
    }
 </script>

I have created a jsfiddle

If anyone can help it will be really helpful. I know that my function is working as far as the calling the function is concerned but however somehow it does not work with if and else statement.

You want to prevent submission of a form based on a condition. adding onclick to input field does not do that. See: http://stackoverflow.com/q/8664486/7633845 — ハセン, May 18 '17 at 06:53

score 1 · Answer 1 · answered May 18 '17 at 06:44

Try this . And Match the mmbr1 and mmbr2 selected value . And your function not closing properly with end of }

var mmbr1 = document.getElementById("tm_1_id");
var tm1 = mmbr1.options[mmbr1.selectedIndex].value;
var mmbr2 = document.getElementById("tm_2_id");
var tm2 = mmbr2.options[mmbr2.selectedIndex].value;

function checkDouble() {

  if (mmbr1.value == mmbr2.value) {
    alert(tm2);
    console.log('fail')
    return false;
  }
  else{
  console.log('pass')
  
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<form action="" method="post">
  <select name="tm_1_id" id="tm_1_id">
<option>Sajjad</option>
<option>Mahmood</option>
<option>Ahsan</option>
<option>Usman</option>

</select>
  <br>
  <select name="tm_2_id" id="tm_2_id">
<option>Sajjad</option>
<option>Mahmood2</option>
<option>Ahsan2</option>
<option>Usman2</option>

</select>
  <br>
  <input type="submit" name="submit" id="submit" value="Create" onClick="return checkDouble();" />
</form>

springfeld · Answer 2 · 2017-05-18T07:04:31.777

Forked yours, and added an event handler. https://jsfiddle.net/springfeld/25ys4vm2/ First found: no closing bracket for your function.

One has to return a value, in every case, even if its dead code, so did i:

if (2>1) 
    return false;
return true;

Even if you strangle a function like checkDouble into onsubmit, as you did, you have to add an alternative. Think about like: What if 2 is smaller than 1? In that case the function now returns true, and evaluates correct in the eyes of your engine.

event.preventDefault();

within handler prevents it from running as designed, in your case to submit the form to the server. Think of it as a stop sign to the browsers default behaviour.

But keep in mind: This can be overridden by disabled javascript. If you disable javascript, forms values are submitted without further checks.

Hope: helps. Have a nice. Udo

Thanks bro for your help. I solved the issue on the pattern i was already using. Your comment has helped me to learn the basics which I am already weak at. One more issue I use dreamweaver which suggests any syntax errors for PHP but does not do the same for JAVAscript that creates problems and i dont know where are syntax errors in Javascript. Any way of checking Javascript syntax errors will be highly appreciated. — Sajjad Mahmood, May 18 '17 at 15:45

score 0 · Answer 3 · answered May 18 '17 at 07:02

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<form>
    <select name="tm_1_id" id="tm_1_id">
        <option>Sajjad</option>
        <option>Mahmood</option>
        <option>Ahsan</option>
        <option>Usman</option>
    </select>
    <br>
    <select name="tm_2_id" id="tm_2_id" onclick="getText()">
        <option>Sajjad</option>
        <option>Mahmood</option>
        <option>Waqas</option>
        <option>Shahnawaz</option>
    </select>
    <br>
    <input type="submit" name="submit" id="submit" value="Create" onClick="return checkDouble();" />
</form>

</html>
<script>
var mmbr2 = document.getElementById("tm_2_id");
var tm2 = mmbr2.options[mmbr2.selectedIndex].text;

function getText() {

    tm2 = mmbr2.options[mmbr2.selectedIndex].value;
};

console.log('选择的是' + tm2);

function checkDouble() {
    if (2 > 1) {
        alert(tm2);
        return false;
    }
}
</script>

enter code here

You should probably add some description to your code – user877329 May 18 '17 at 07:05 — user877329, May 18 '17 at 07:05

Javascript Function Not Preventing Form Submission with IF ELSE statement

3 Answers3