How to use GetElementById?

[Leroy_Manon]

I create dynamically 5 checkboxes, which should be later linked to HTML elements. I want to change the checked property of some of them, when clicking on the first one.

I think the Checkboxes have to be create by TWebCheckBox.Create('Cb' + inttostr(i)) if I want a link to the HTML elements. But in that case, I can't use GetElementById in the right way.

TWebCheckBox.Create(Self) is working well with FindComponent, but in that case, the link to the HTML elements is not done.

What am I doing wrong?

procedure TForm2.WebButton2Click(Sender: TObject);
var
  cb: TWebCheckBox;
  i: integer;
begin
  for i := 1 to 5 do
  begin
    // cb := TWebCheckBox.Create(Self);
    cb := TWebCheckBox.Create('Cb' + inttostr(i));
    cb.Name := 'Cb' + inttostr(i);
    cb.ElementID := 'Cb' + inttostr(i);
    cb.Tag := i;
    cb.Parent := Self;
    cb.Top := 50 + 30 * i;
    cb.OnClick := CbClick;
  end;
end;

procedure TForm2.CbClick(Sender: TObject);
begin
  if (Sender as TWebCheckBox).Tag = 1 then
  begin
    asm
      document.getElementById('Cb3').checked=true;
    end;
    // Error if created with TWebCheckBox.Create(Self), and doesn't work with TWebCheckBox.Create('Cb' + inttostr(i));

    // TWebCheckBox(FindComponent('Cb4')).checked := true;
    // FindComponent returns nil  if created with TWebCheckBox.Create('Cb' + inttostr(i));

    document.getElementById('Cb5').setAttribute('checked', 'true');
    // Error if created  with TWebCheckBox.Create(Self), and doesn't work with TWebCheckBox.Create('Cb' + inttostr(i));
  end;
end;

`

[brunofierens]

1. Creating the checkbox with cb := TWebCheckBox.Create(id) is sufficient. You do not need to set ElementID.

2. The HTML element is a INPUT element and not a Delphi object instance, so you can't cast the HTML element to an Object Pascal instance.

3. Verify first that document.getElementById('Cb5') returns the desired HTML INPUT element. If so, you should be able to set the checked attribute.

[Leroy_Manon]

Thanks Bruno,

The asm part for Cb3 is working well. I made a mistake in the HTML. Here is the complete code with the generation of the HTML.

For Cb5, it doesn't work. The code correctly add an attribute "checked"="true", but it seems that I can't use the attribute "checked" to change the status of a checkbox. "checked" is only used to initialize the checkbox.

But the asm part solve the problem.

Thanks for your help!

procedure TForm2.WebButton2Click(Sender: TObject);
var
  cb: TWebCheckBox;
  i: integer;
begin
  WebHTMLContainer1.HTML.Clear;
  for i:=1 to 5 do begin
    WebHTMLContainer1.HTML.add('<div><input type="checkbox" id="Cb' + inttostr(i) + '"></div>');
  end;

  for i := 1 to 5 do
  begin
    cb := TWebCheckBox.Create('Cb' + inttostr(i));
    cb.Tag := i;
    cb.Parent := Self;
    cb.OnClick := CbClick;
  end;
end;

procedure TForm2.CbClick(Sender: TObject);
begin
  if (Sender as TWebCheckBox).Tag = 1 then
  begin
    asm
      document.getElementById('Cb3').checked=true;
    end;
    // Works fine

    OutputDebugString(Document.getElementById('Cb5').id);   // returns 'Cb5'
    document.getElementById('Cb5').setAttribute('checked', 'true');
    // It seems that we can't use the checked attribute to change the status of a checkbox
  end;
end;