Submit button with different functions

Question

I have radio button input, text field input and password field input and one submit button. What I want to happen is, if I click the submit button without choosing or entering those three form, window alert will show saying "You need to fill up the (radio button, text field and password field)" something like that. How can I do that?

This is my code

<form>
  <input type="radio" name="optradio">Menu 1
  <input type="radio" name="optradio">Menu 2 <br>
  <input type="text"><br>
  <input type="password"><br>
  <input type="submit" value="Submit" onclick="alert('Hello! I am an alert box!')">
</form>

you need to write JavaScript function to validate input fields — Gulam Hussain
– Gulam Hussain, Commented Oct 17, 2019 at 4:41
better remove the question try yourself first , research yourself then post it again with your attempt. Else unnecessarily it will be down-voted and removed. — Rex5
– Rex5, Commented Oct 17, 2019 at 4:43

Gulam Hussain · Accepted Answer · 2019-10-17 04:49:41Z

3

You can try the using required attribute

<form>
  <input type="radio" name="optradio" required>Menu 1
  <input type="radio" name="optradio">Menu 2 <br>
  <input type="text" required><br>
  <input type="password" required><br>
  <input type="submit" value="Submit">
</form>

edited Oct 17, 2019 at 4:49

Gulam Hussain

1,81313 silver badges23 bronze badges

answered Oct 17, 2019 at 4:43

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

Comments

Jagadeeswar · Accepted Answer · 2019-10-17 04:48:36Z

0

You can have your own function and you can check whether value exist or not. Example:

function myFun(){
    if(val1&&val2&&val3){
    }
}

answered Oct 17, 2019 at 4:48

Jagadeeswar

6271 gold badge8 silver badges9 bronze badges

Comments

cloned · Accepted Answer · 2019-10-17 07:15:45Z

0

You can validate this using Javascript

function validation(){
  radio_1_value = document.getElementById("radio_1").value;
  radio_2_value = document.getElementById("radio_2").value;
  text_value = document.getElementById("text").value;
  password_value = document.getElementById("password").value;
  if (radio_1_value == '' || radio_2_value == '' || text_value == '' || password_value == ''){
    alert('You need to fill up the (radio button, text field and password field');
  }
}

<form>
  <input type="radio" id="radio_1" name="optradio" required>Menu 1
  <input type="radio" id="radio_2" name="optradio">Menu 2 <br>
  <input type="text" id="text" required><br>
  <input type="password" id="password" required><br>
  <input type="submit" value="Submit" onclick="validation()">
</form>

edited Oct 17, 2019 at 7:15

cloned

6,9154 gold badges33 silver badges46 bronze badges

answered Oct 17, 2019 at 6:23

Priyanga

1431 gold badge3 silver badges16 bronze badges

Collectives™ on Stack Overflow

Submit button with different functions

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related