CODEWITHSUNDEEP
javascriptforms
Suresh Kota
Suresh Kota

Reputation: 134

Function is not working on radio button onclick

JavaScript function (here f1()) is not getting called on radio button (here id=iprange) onclick event.

HTML

function f1() {
    alert('yes');
}
<form role="form">
    <div class="box-body">
        <label>
            <input type="radio" name="optionsRadios" id="fullscan1" value="option1" /> Full Scan
        </label>

        &nbsp;&nbsp;&nbsp;&nbsp;


<!-- "IP Range" is the radio button that should show a "yes" alert. -->
        <label>
            <input type="radio" name="optionsRadios" id="iprange" value="option2" onclick="f1();" /> IP Range

        </label>
        From:
        <input type="text" id="text1"> To:
        <input type="text" id="text2"> &nbsp;&nbsp;&nbsp;&nbsp;


        <label>
            <input type="radio" name="optionsRadios" id="subnet" value="option3" /> Subnet

        </label>
        <input type="text" id="text3"> &nbsp;&nbsp;&nbsp;&nbsp;


        <button class="btn btn-danger">Scan</button>
    </div>

</form>

Upvotes: 1

Views: 16964

Answers (3)

Abid Ali
Abid Ali

Reputation: 1497

<label onclick="red()"><input type="radio" name="colors" id="red">Red</label>
or
<label onclick="red()"><input type="radio" name="colors" id="red"></label> <label for="red">Red</label>

<script>
function red(){
 alert('i am red');
}
</script>

if you want to call onclick function on radio button then you can use like this, it will work for you

Note: we have to call on function on label instead of radio button

Upvotes: 0

Martin Ernst
Martin Ernst

Reputation: 3279

@Suresh Kota . At this point its impossible to give an satisfying answer, you'll have to do a step-by-step-investigation. Start with following and post your result here.

<head>
    ....
    <script> // your script tag, I assume it looks like this
        $(document).ready(function() {
            /* some code */
        });
        // now include your function as last line outside document ready
        function f1() {alert('yes');};
    </script>
    <!-- Make sure this is the only script tag in your html -->
    ....
</head>

If that doesn't help, rename your function, e.g. function xxx() {alert('yes');};

and same with onclick-attribute in input-tag: onclick="xxx()".

When having no succes, try directly: onclick="alert('yes')"

If that all not work, there's something inside your document.ready that manipulates the button, and you should post that code.

Upvotes: 1

Beri
Beri

Reputation: 11610

Try this one:

<input type="radio" name="optionsRadios" onclick="handleClick(this);" value="option1" />
<input type="radio" name="optionsRadios" onclick="handleClick(this);" value="option2" />
...

<script>
function handleClick(myRadio) {
    alert('New value: ' + myRadio.value);
}
</script>

Upvotes: 0

Related Questions