CODEWITHSUNDEEP
javascript
Sajjad Mahmood
Sajjad Mahmood

Reputation: 1

Javascript Function Not Preventing Form Submission with IF ELSE statement

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.

Upvotes: 0

Views: 46

Answers (3)

springfeld
springfeld

Reputation: 89

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

Upvotes: 0

li.sun
li.sun

Reputation: 1

<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

Upvotes: 0

prasanth
prasanth

Reputation: 22500

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>

Upvotes: 1

Related Questions