How do I make all the fields in my javafx form clickable using GridPane and HBox?

I want to make a form with three sections, two with fields and one with buttons.

public class Form extends Application{
    
    public static void main(String[] args) {
        launch(args);
    }   
    
    @Override
    public void start(Stage stage) throws Exception {           
        StackPane root = new StackPane();
        GridPane fp = new GridPane();
        fp.setAlignment(Pos.TOP_CENTER);
        fp.setHgap(6);
        fp.setVgap(6);
        fp.add(new Label("Name: "), 0, 0);
        
        TextField name = new TextField();
        name.setPrefWidth(450);
        fp.add(name, 1, 0);
        
        GridPane sp = new GridPane();
        sp.setAlignment(Pos.CENTER);
        sp.setHgap(6);
        sp.setVgap(6);
        sp.add(new Label("Another Name: "), 1, 0);
        
        TextField anothername = new TextField();
        anothername.setPrefWidth(120);
        sp.add(anothername, 2, 0);
        HBox hbox = new HBox();
    
        hbox.setAlignment(Pos.BOTTOM_CENTER);
        Button btn1 = new Button("Button 1");
        hbox.getChildren().add(btn1);
    
        Scene scene = new Scene(root, 500, 500);
        root.getChildren().addAll(fp, sp, hbox);
        stage.setScene(scene);
        stage.show();
    }
}

formatting and some text might be off but that is my general solution. I made a root stack pane to hold all the parts of my form. I then made two grid panes to hold text fields and an hbox to hold my buttons along the bottom.

example of how it looks

My problem is that only the name field can be clicked. If I try to click another name field it wont work. I can press tab to cycle through the fields and button but I want to be able to click on each field individually. Is there a better way to create one scene with multiple panes or hboxes? I am also open to only having one grid pane, but I thought having two would be easier for formatting since I want to separate different fields. Thank you!

The issue you're facing is caused by your using a StackPane as the root element of your scene.

A StackPane, as the name suggests, stacks its children one on top of the other. Any children placed on top will be the ones receiving events (such as clicking on the anothername field).

You have added 3 nodes as children of your StackPane:

1. GridPane #1 fp
2. GridPane #2 sp
3. HBox hbox

Since the HBox was added last, it is the only node that can receive click events.

Using your example, I've added borders to each of the 3 items above to illustrate how JavaFX is laying them out:

As you can see, each child of the StackPane get resized to fill the entire area (I used different widths for the borders so you can see them all).

You can try this yourself by adding the following code before you show your stage:

fp.setStyle("-fx-border-color: green; -fx-border-width: 15px");
sp.setStyle("-fx-border-color: blue; -fx-border-width: 10px");
hbox.setStyle("-fx-border-color: red; -fx-border-width: 5px");

To solve this, you will need to rethink your layout entirely; a StackPane is certainly not the correct layout pane to use in your case.

I highly recommend working through the examples in Oracle's Working With Layouts in JavaFX tutorial to get a better grasp on how to best layout your scene.