javascriptradio-buttongreasekit

JavaScript (Greasekit) click radio button box and submit the form


From this:

<div class="form-radio form-component">
    <fieldset>
        <legend>Where would you like your ad to appear?<span class="error"></span>
        </legend>
        <div class="form-radio-options">
            <div class="radio-option">
                <input type="radio" id="bump-up-ad_bumpUp_1" name="bumpUp" value="false" />
                <label for="bump-up-ad_bumpUp_1">FREE - Keep it where it is</label>
            </div>
            <div class="radio-option">
                <input type="radio" id="bump-up-ad_bumpUp_2" name="bumpUp" value="true" />
                <label for="bump-up-ad_bumpUp_2">&pound;1.53 - Bump my ad to the top of the listings</label>
            </div>
        </div>
    </fieldset>
</div>

I just want it to automatically select the radio button that corresponds to "FREE - Keep it where it is" and then I want it to click this button to send the form:

<div class="form-component form-submit">
    <input id="bump-up-ad_submit-new-advert-data" name="confirm" type="submit" class="button" value="Update my ad">
</div>
<div class="form-component form-submit">

Solution

  • document.getElementById('bump-up-ad_bumpUp_1').checked = true;
    document.getElementById('bump-up-ad_submit-new-advert-data').click();
    

    If your browser does not support .click(), we have to simulate a click instead:

    function fireEvent(obj, evt) {
        var fireOnThis = obj;
        if( document.createEvent ) {
            var evObj = document.createEvent('MouseEvents');
            evObj.initEvent( evt, true, false );
            fireOnThis.dispatchEvent(evObj);
        } else if( document.createEventObject ) {
            fireOnThis.fireEvent('on'+evt);
        }
    }
    document.getElementById('bump-up-ad_bumpUp_1').checked = true;
    fireEvent(document.getElementById('bump-up-ad_submit-new-advert-data'), 'click');