8 replies to this topic

[ployo60]

Hello,

I want to create a form with a twebbrowser and a tedit box, more if needed.

Then lets say, I want the browser to be on google.com and when I type in the search bar I want it to type in the tedit as well. In a way I am only typing it in the webbrowser and it gets copied to the edit box or letter for letter gets written at the same time.Best would be at the same time but it is fine if i click away it will fill in the tedit box as well. i just want to understand how this work, type on the site and have the edit boxed automatically typed as well.

[Zorfox]

I must misunderstand what you're asking. When you put a TWebBrowser on the form there is no search bar. I can only assume you're looking at an example. The demo that came with delphi shows many of the methods, /demos/Coolstuf/webbrows.dpr. However below are some very basic examples of what you asked for.

ployo60 said:

I want to create a form with a twebbrowser and a tedit box, more if needed.

Do exacty that. Place a TWebBrowser and a TEdit on a blank form.

ployo60 said:

Then lets say, I want the browser to be on google.com

The code below will display the webpage entered in Edit1's box when the enter key is pressed

procedure TForm1.Edit1KeyDown(Sender: TObject; var Key: Word;

  Shift: TShiftState);

begin

  if Key = VK_Return then

  begin

    WebBrowser1.Navigate(Edit1.Text); //Edit1.Text is www.google.com

  end;

end;

ployo60 said:

when I type in the search bar

What search bar? You haven't created one yet. If you're looking at the demo that came with Delphi, /demos/Coolstuf/webbrows.dpr, that is a Combobox defined by the coder that wrote the demo. Here is how to update the edit box from that example.

procedure TMainForm.URLsKeyUp(Sender: TObject; var Key: Word;

  Shift: TShiftState);

begin

  Edit1.Text := URLs.Text; //URLs is the name of the COmboBox

end;

[ployo60]

sorry, yeah you do misunderstand me but thats because I am not clear enough. I mean the search bar on the google.com page in the webbrowser. I want to type in the that input field and at the same time have it typed in that edit field..... does that clear it up?

[Zorfox]

Okay sorry for the misunderstanding. There happens to be a good article about that here. The code below will give you that functionality based on the examples at that site. Just move the code in the WebBrowser1DocumentComplete procedure to another procedure such as a function that captures keyboard actions. The one below assigns the text from Google's form to your editbox. You should certainly check out that site.

//Get the value of a named field

function GetFieldValue(fromForm: IHTMLFormElement;

  const fieldName: string): string;

var

  field: IHTMLElement;

  inputField: IHTMLInputElement;

  selectField: IHTMLSelectElement;

  textField: IHTMLTextAreaElement;

begin

  field := fromForm.Item(fieldName,'') as IHTMLElement;

  if not Assigned(field) then

    result := ''

  else if field.tagName = 'INPUT' then

  begin

    inputField := field as IHTMLInputElement;

    if (inputField.type_ <> 'radio') and

       (inputField.type_ <> 'checkbox')

    then

      result := inputField.value

    else if inputField.checked then

      result := 'checked'

    else

      result := 'unchecked';

  end

  else if field.tagName = 'SELECT' then

  begin

    selectField := field as IHTMLSelectElement;

    result := selectField.value

  end

  else if field.tagName = 'TEXTAREA' then

    begin

    textField := field as IHTMLTextAreaElement;

    result := textField.value;

  end;

end;





//Get a form by number

function GetFormByNumber(document: IHTMLDocument2;

    formNumber: integer): IHTMLFormElement;

var

  forms: IHTMLElementCollection;

begin

  forms := document.Forms as IHTMLElementCollection;

  if formNumber < forms.Length then

    result := forms.Item(formNumber,'') as IHTMLFormElement

  else

    result := nil;

end;


procedure TForm1.WebBrowser1DocumentComplete(Sender: TObject;

  const pDisp: IDispatch; var URL: OleVariant);

var

  document: IHTMLDocument2;

  theForm: IHTMLFormElement;

  index: integer;

begin

  document := WebBrowser1.Document as IHTMLDocument2;

  theForm := GetFormByNumber(WebBrowser1.Document as IHTMLDocument2,0);

  Edit2.Text := GetFieldValue(theForm,'q'); //Googles search field is named q


end;


procedure TForm1.Edit1KeyDown(Sender: TObject; var Key: Word;

  Shift: TShiftState);

begin

begin

  if Key = VK_Return then

  begin

    WebBrowser1.Navigate(Edit1.Text); //Edit1.Text is www.google.com

  end;

end;

end;

[Zorfox]

ployo60 said:

sorry, yeah you do misunderstand me but thats because I am not clear enough. I mean the search bar on the google.com page in the webbrowser. I want to type in the that input field and at the same time have it typed in that edit field..... does that clear it up?

Sorry for the misunderstanding. There is a good article regarding this type of thing here. I highly recommend you read it. Below is some code based on the examples there. Add a TWebBrowser and two Edit boxes to a form. Assign the code below. Everything in the Google form box will be entered into EditBox2 when the document finishes loading. The code in the Document Complete procedure could certainly be moved to another event such as a keyboard function.

BTW Don't forget to add MSHTML to your uses clause.

//Get the value of a named field

function GetFieldValue(fromForm: IHTMLFormElement;

  const fieldName: string): string;

var

  field: IHTMLElement;

  inputField: IHTMLInputElement;

  selectField: IHTMLSelectElement;

  textField: IHTMLTextAreaElement;

begin

  field := fromForm.Item(fieldName,'') as IHTMLElement;

  if not Assigned(field) then

    result := ''

  else if field.tagName = 'INPUT' then

  begin

    inputField := field as IHTMLInputElement;

    if (inputField.type_ <> 'radio') and

       (inputField.type_ <> 'checkbox')

    then

      result := inputField.value

    else if inputField.checked then

      result := 'checked'

    else

      result := 'unchecked';

  end

  else if field.tagName = 'SELECT' then

  begin

    selectField := field as IHTMLSelectElement;

    result := selectField.value

  end

  else if field.tagName = 'TEXTAREA' then

    begin

    textField := field as IHTMLTextAreaElement;

    result := textField.value;

  end;

end;





//Get a form by number

function GetFormByNumber(document: IHTMLDocument2;

    formNumber: integer): IHTMLFormElement;

var

  forms: IHTMLElementCollection;

begin

  forms := document.Forms as IHTMLElementCollection;

  if formNumber < forms.Length then

    result := forms.Item(formNumber,'') as IHTMLFormElement

  else

    result := nil;

end;


procedure TForm1.WebBrowser1DocumentComplete(Sender: TObject;

  const pDisp: IDispatch; var URL: OleVariant);

var

  document: IHTMLDocument2;

  theForm: IHTMLFormElement;

  index: integer;

begin

  document := WebBrowser1.Document as IHTMLDocument2;

  theForm := GetFormByNumber(WebBrowser1.Document as IHTMLDocument2,0);

  Edit2.Text := GetFieldValue(theForm,'q'); //Googles search field is named q


end;


procedure TForm1.Edit1KeyDown(Sender: TObject; var Key: Word;

  Shift: TShiftState);

begin

begin

  if Key = VK_Return then

  begin

    WebBrowser1.Navigate(Edit1.Text); //Edit1.Text is www.google.com

  end;

end;

end;

[LuthfiHakim]

Please check the msdn page/article that I had given you previously in this post. If that's the scenario you want, then it's the only answer (dispinterface HTMLInputTextElementEvents).

Perhaps you need to learn more on how to deal with interfaces to be able to understand how to "remote control" TWebBrowser.

[Zorfox]

ployo60 said:

sorry, yeah you do misunderstand me but thats because I am not clear enough. I mean the search bar on the google.com page in the webbrowser. I want to type in the that input field and at the same time have it typed in that edit field..... does that clear it up?

I had posted a reply earlier today. Apparently it's awaiting moderator approval because I included an external link. That link has a good article with a lot of examples. When it posts go there. Below is some code to look over for now. Just a form with one Twebbrowser and two edit boxes. Add MSHTML to your uses clause.

function GetFormByNumber(document: IHTMLDocument2;

    formNumber: integer): IHTMLFormElement;

var

  forms: IHTMLElementCollection;

begin

  forms := document.Forms as IHTMLElementCollection;

  if formNumber < forms.Length then

    result := forms.Item(formNumber,'') as IHTMLFormElement

  else

    result := nil;

end;




//Get the value of a named field

function GetFieldValue(fromForm: IHTMLFormElement;

  const fieldName: string): string;

var

  field: IHTMLElement;

  inputField: IHTMLInputElement;

  selectField: IHTMLSelectElement;

  textField: IHTMLTextAreaElement;

begin

  field := fromForm.Item(fieldName,'') as IHTMLElement;

  if not Assigned(field) then

    result := ''

  else if field.tagName = 'INPUT' then

  begin

    inputField := field as IHTMLInputElement;

    if (inputField.type_ <> 'radio') and

       (inputField.type_ <> 'checkbox')

    then

      result := inputField.value

    else if inputField.checked then

      result := 'checked'

    else

      result := 'unchecked';

  end

  else if field.tagName = 'SELECT' then

  begin

    selectField := field as IHTMLSelectElement;

    result := selectField.value

  end

  else if field.tagName = 'TEXTAREA' then

    begin

    textField := field as IHTMLTextAreaElement;

    result := textField.value;

  end;

end;





procedure TForm1.WebBrowser1DocumentComplete(Sender: TObject;

  const pDisp: IDispatch; var URL: OleVariant);

var

  document: IHTMLDocument2;

  theForm: IHTMLFormElement;

  index: integer;

begin

  document := WebBrowser1.Document as IHTMLDocument2;

  theForm := GetFormByNumber(WebBrowser1.Document as IHTMLDocument2,0);

  //Display the value of Google's search field named oddly enough q

  Edit2.Text := 'Field "q" has value ' + GetFieldValue(theForm,'q');

end;




procedure TForm1.Edit1KeyDown(Sender: TObject; var Key: Word;

  Shift: TShiftState);

begin

  if key = VK_Return then

  WebBrowser1.Navigate(Edit1.Text);

end;




procedure TForm1.FormCreate(Sender: TObject);

begin

  Edit1.Text := 'www.google.com';

  WebBrowser1.Navigate(Edit1.Text);

end;

[ployo60]

I got this new code working to fill in input fields on webbrowser. But I was wondering how I could find the name or number of the form the input field belongs too. Because sometimes there are 3 or more forms on the field and you need to have selected the right one in your code to be able to fill in the input field. Do you know how to do that?

[Zorfox]

ployo60 said:

I got this new code working to fill in input fields on webbrowser. But I was wondering how I could find the name or number of the form the input field belongs too. Because sometimes there are 3 or more forms on the field and you need to have selected the right one in your code to be able to fill in the input field. Do you know how to do that?

The link where I found the code is now posted above. As I had said, I suggest you check it out. I am just copy/pasting that code here.

The code to find the number of forms on a page is...

function NumberOfForms(document: IHTMLDocument2): integer;

var

  forms: IHTMLElementCollection;

begin

  forms := document.Forms as IHTMLElementCollection;

  result := forms.Length;

end;

and to call it...

procedure TMyForm.Button1Click(Sender: TObject);

var

  nForms: integer;

begin

  nForms := NumberOfForms(WebBrowser.Document as IHTMLDocument2);

  ShowMessage('Form count: ' + IntToStr(nForms));

end;

Get the form by number...

function GetFormByNumber(document: IHTMLDocument2;

    formNumber: integer): IHTMLFormElement;

var

  forms: IHTMLElementCollection;

begin

  forms := document.Forms as IHTMLElementCollection;

  if formNumber < forms.Length then

    result := forms.Item(formNumber,'') as IHTMLFormElement

  else

    result := nil;

end;

List the names of all the fields on a form...

function GetFormFieldNames(fromForm: IHTMLFormElement): TStringList;

var

  index: integer;

  field: IHTMLElement;

  input: IHTMLInputElement;

  select: IHTMLSelectElement;

  text: IHTMLTextAreaElement;

begin

  result := TStringList.Create;

  for index := 0 to fromForm.length do

  begin

    field := fromForm.Item(index,'') as IHTMLElement;

    if Assigned(field) then

    begin

      if field.tagName = 'INPUT' then

      begin

        // Input field.

        input := field as IHTMLInputElement;

        result.Add(input.name);

      end

      else if field.tagName = 'SELECT' then

      begin

        // Select field.

        select := field as IHTMLSelectElement;

        result.Add(select.name);

      end

      else if field.tagName = 'TEXTAREA' then

      begin

        // TextArea field.

        text := field as IHTMLTextAreaElement;

        result.Add(text.name);

      end;

    end;

  end;

end;

and to call it:

procedure TMyForm.Button1Click(Sender: TObject);

var

  document: IHTMLDocument2;

  theForm: IHTMLFormElement;

  index: integer;

begin

  document := TWebBrowser.Document as IHTMLDocument2;

  theForm := GetFormByNumber(WebBrowser.Document as IHTMLDocument2,0);

  fields := GetFormFieldNames(theForm);


  for index := 0 to fields.count-1 do

    ShowMessage('Field ' + IntToStr(index) + ' called ' + fields[index]);

end;