Search code examples
javascriptapp-inventorblockly

How can I check a radio button with no id using a single line of javascript (no jQuery)?


All right, this is a pretty specific question from a beginner, so bear with me.

I'm a newbie just learning the ropes. Here's the background (skip to next para if you don't care): I'm updating my first android app and I'm using MIT App Inventor 2 to do it. It's a free tool online that uses a WYSIWYG screen editor and Blockly to create behaviors, interactions, etc. The app I'm making loads a specific web page with a form and fills out most of the form for you (specifically, it's to help people enter the online ticket lottery for a theater show). The page is not my own so I can't edit the HTML. But I can run javascript on top of it by plugging single lines of javascript code into the Blockly side of App Inventor. Here's a relevant example of how it looks.

I've figured out how to fill in most of the form using getElementByID(). But there's a set of radio buttons that have no id. Here's a lightly modified version of the HTML (which I cannot edit):

<div id="cont_id_tickets">
    <div>
        <input type="radio" name="tickets" value="1" />
        <span style="font-family:Times New Roman; font-size:15px;">1</span>
    </div>
    <div>
        <input type="radio" name="tickets" value="2" />
        <span style="font-family:Times New Roman; font-size:15px;">2</span>
    </div>
    <div id="required_info_tickets" class="requiredInfo floatLeft">
    </div>
    <input type="hidden" name="reqField" value="tickets" alt="Radio" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value."
        patternID="0" customRegex="" />
</div>

I've made some progress by using the following:

document.querySelector('input[name=tickets]').checked = true;

But that of course only selects the first radio button. I'd like to able to get a value (1 or 2) and have it select the right button accordingly. The Blockly backend I'm using allows me to define a variable to plug into the line of javascript, but the line of javascript itself has to be essentially a single line. I was hoping one of the following would work if I wanted the value to be 2 for example:

document.querySelector('input[name=tickets][value=2]').checked = true;
document.querySelector('input[name=tickets]').2.checked = true;

But neither does. Any ideas on the correct syntax?

Thank you!


Solution

  • You need to place the value that you are trying to select using in quotes:

    document.querySelector('input[name=tickets][value="2"]').checked = true;
    

    Example

    document.querySelector('input[name=tickets][value="2"]').checked = true;
    <div id="cont_id_tickets">
      <div>
        <input type="radio" name="tickets" value="1" />
        <span style="font-family:Times New Roman; font-size:15px;">1</span>
      </div>
      <div>
        <input type="radio" name="tickets" value="2" />
        <span style="font-family:Times New Roman; font-size:15px;">2</span>
      </div>
      <div id="required_info_tickets" class="requiredInfo floatLeft">
      </div>
      <input type="hidden" name="reqField" value="tickets" alt="Radio" req="true" errorMsg="Please enter a valid value." requredErrorMsg="This field is required. Please enter a value." patternID="0" customRegex="" />
    </div>