javascript - Function is not working on radio button onclick - Stack Overflow

admin2025-04-19 0

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>

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>

Share edited Dec 9, 2017 at 22:39 Makyen♦ 33.4k12 gold badges92 silver badges125 bronze badges asked Oct 8, 2014 at 9:15 Suresh Kota 1341 gold badge2 silver badges8 bronze badges

Try onfocus, should work. – Romeo Commented Oct 8, 2014 at 9:16
I think onfocus will not work on all browsers. will it? – Suresh Kota Commented Oct 8, 2014 at 9:17
1 Set your function in script-tags into head and try again. – Martin Ernst Commented Oct 8, 2014 at 9:22
This works for me jsfiddle/w75577pp – David Commented Oct 8, 2014 at 9:26
1 @Sumeet On document ready does not work. – Martin Ernst Commented Oct 8, 2014 at 9:30

| Show 7 more ments

3 Answers 3

Sorted by: Reset to default 1

@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.

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>

<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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745013865a279969.html

javascriptFunction is not working on radio button onclickStack Overflow

最新回复(0)