Bootstrap 4 Form – practice with JQuery and SpringBoot RestAPI

In the tutorial, JavaSampleApproach will introduce Bootstrap 4 Form and practice Bootstrap 4 Form with JQuey and SpringBoot RestAPI.

Related posts:
Bootstrap 4 Card Images – SpringBoot RestAPIs

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– Bootstrap 4
– JQuery
– Spring Boot – 1.5.7.RELEASE

II. Bootstrap 4 Form

1. Bootstrap 4 Form

With default setting, all elements {input, textarea, and select} with class .form-control have width=100%.
Bootstrap 4 Form has 2 layouts:

  • Stacked form
  • Inline form

– Setup Bootstrap 4:




  Bootstrap 4 Form
  
  
  
  
  
  


...

– Implement Bootstrap 4’s stacked form as below:

-> results:

Bootstrap 4 Form - practice with JQuery and SpringBoot RestAPI - stack form

– Implement Bootstrap 4’s inline form as below:

-> results:

Bootstrap 4 Form - practice with JQuery and SpringBoot RestAPI - Inline form

Note: when screens greater than 576px, it will stack horizontally.

2. Integrate with Jquery and SpringBoot

In the tutorial, we create a SpringBoot project as below:

Bootstrap 4 Form - practice with JQuery and SpringBoot RestAPI - project structure

-> results:

Bootstrap 4 Form - practice with JQuery and SpringBoot RestAPI - logs

Bootstrap 4 Form - practice with JQuery and SpringBoot RestAPI - results

III. Practice

Step to do:
– Create SpringBoot project
– Create customer model
– Implement Web Controller
– Implement RestAPI
– Implement Index view
– Implement Ajax JQuery script

1. Create SpringBoot project

Using Spring Tool Suite to create a Spring Starter Project with needed dependencies:


	org.springframework.boot
	spring-boot-starter-thymeleaf


	org.springframework.boot
	spring-boot-starter-web

2. Create customer model
package com.javasampleapproach.bootstrap4.model;

public class Customer {
    private String firstname;
    private String lastname;
     
    public Customer(){}
     
    public Customer(String firstname, String lastname){
        this.firstname = firstname;
        this.lastname = lastname;
    }
     
    // firstname
    public String getFirstname() {
        return firstname;
    }
    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }
     
    // lastname
    public String getLastname() {
        return lastname;
    }
    public void setLastname(String lastname) {
        this.lastname = lastname;
    }
}

3. Implement Web Controller
package com.javasampleapproach.bootstrap4.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller
public class WebController {
	@GetMapping(value="/")
    public String homepage(){
        return "index";
    }
}
4. Implement RestAPI
package com.javasampleapproach.bootstrap4.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.javasampleapproach.bootstrap4.model.Customer;
 
 
@RestController
@RequestMapping("/api/customer")
public class RestAPI {
 
	@PostMapping(value = "/save")
	public String postCustomer(@RequestBody Customer customer) {
		
		String fullName = customer.getFirstname() + " " + customer.getLastname();
		
		return "Hello " + fullName + "!" + " (Message from SpringBoot Server)";
	}
}
5. Implement Index view



  Bootstrap 4 Form
  
  
  
  
  
  
  


 

Bootstrap 4 Form - JQuery + SpringBoot RestAPI

1. Stacked Form

2. In-line Form
6. Implement Ajax JQuery script
$(document).ready(function(){
	
	// SUBMIT FORM
    $("form").submit(function(event) {
		// Prevent the form from submitting via the browser.
		event.preventDefault();
		
		var inputs = $(this).find('input');
		
    	// prepare data from input-form
    	var data = {
    		firstname : $(inputs[0]).val(),
    		lastname : $(inputs[1]).val()
    	}

		ajaxPost(data);
    	
    	// reset input data
    	$(inputs[0]).val("");
    	$(inputs[1]).val("")
	});
    
    function ajaxPost(data){
    	
    	// DO POST
    	$.ajax({
			type : "POST",
			contentType : "application/json",
			url : window.location + "api/customer/save",
			data : JSON.stringify(data),
			dataType: 'text',
			success : function(result) {
				$("#postResultMsg").html("

" + result); }, error : function(e) { alert("Error!") } }); } });

IV. Sourcecode

SpringBootstrap4Form

One thought on “Bootstrap 4 Form – practice with JQuery and SpringBoot RestAPI”

Leave a Reply

Your email address will not be published. Required fields are marked *