check required field in Javascript on different button

Question

i am not too good with java Script but trying to learn few things in different ways and this community always help me to learn such stuff. i need some help from you guys again. below is my code and what i want is.

i have different dropdowns on a single page, with different buttons to run different queries in php. but i want to make sure that drop should have some selected value before proceeding to php query on button click. i am not able to perform this task, below is the sample which is definitely wrong. i want on button click "fun" Myfunction should run which should check that proper value is selected from drop down s1 and here s2 value is not required. and same is with 2nd button vice verse. kindly help and any idea would be appreciated.

function myFunction() {
  document.getElementById("s1").value = "required"
}

function myFunction1() {
  document.getElementById("s2").value = "required"
}

dd1:
<select id="s1">
  <option>Select one</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<br>
<br>dd2:
<select id="s2">
  <option>Select one</option>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="b">b</option>
</select>
<br>
<br>

<button onclick="myFunction()">fun</button>
<button onclick="myFunction1()">fun1</button>

S.Serpooshan · Accepted Answer · 2017-01-26 07:13:35Z

You have to check value of document.getElementById("s1").selectedIndex and ...(s2) as following:

  function myFunction() {
    var s1 = document.getElementById("s1").selectedIndex;
    var s2 = document.getElementById("s2").selectedIndex;
    if (s1<1 && s2<1) {
      alert("Please select atleast one item from dropdowns!"); 
      return false;
    };
  }

 <html>
 <body>

dd1:<select id="s1">
    <option >Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

   <br>       <br>
dd2:<select id="s2">
    <option >Select one</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="b">b</option>
  </select>
  <br><br>

<button onclick="myFunction()">fun</button>
<button onclick="myFunction()">fun1</button>


  </body>
  </html>

Víctor Gutiérrez · Accepted Answer · 2017-01-26 07:25:45Z

Using jQuery will do the trick. You just need to check the value of your select component. To achieve this, you should first add a value for when nothing is selected:

dd1:<select id="s1">
    <option value="0">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

   <br>       <br>
dd2:<select id="s2">
    <option value="0">Select one</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="b">b</option>
  </select>
  <br><br>

Now, when nothing is selected, the value of your component will be 0. To check this values, you have to do something like this:

function myFunction() {

    var selectedValue1 = $('#s1').val();
    var selectedValue2 = $('#s2').val();

    // check both values and do whatever
}

function myFunction1() {

    var selectedValue1 = $('#s1').val();
    var selectedValue2 = $('#s2').val();

    // check both values and do whatever
}

Using vanilla

If you don't want to use jQuery for whatever the reason, you just have to change var selectedValue1 = $('#s1').val(); for var selectedValue1 = document.getElementById('s1').value;.

I hope this helps :)

Collectives™ on Stack Overflow

check required field in Javascript on different button

2 Answers 2

Comments

Using vanilla

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Using vanilla

Comments

Your Answer

Sign up or log in

Post as a guest

Related