This is the 28th day of my participation in the August Challenge

(1) Pass the value in the normal text box to the back end

The code in the front-end HTML is as follows:

 <div class="form-group">
           <label for="name">The name</label>
           <input type="text" id="name" class="form-control" />
 </div>
Copy the code

Set a unique ID value for the text box content so that the back end only needs this ID value to get the text box input value in the form.

The js code is as follows:

<script>
	var name = $("#name").val();
</script>
Copy the code

(2) Pass the value in the check box to the back end

The code in the front-end HTML is as follows:

<div class="form-group">
    <label>Role Permission Scope</label><div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" Value =" User management "name=" ROle_scope "> <label class="form-check-label" for="inlineCheckbox1"> User management </label> </div> <div Class ="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value=" Role Management" Name =" ROLE_scope "> <label class="form-check-label" for="inlineCheckbox2"> Role management </label> </div> <div class="form-check Form-check-inline "> < INPUT class="form-check-input" type="checkbox" id="inlineCheckbox3" value=" Log Management "name=" ROLE_scope "> <label class="form-check-label" for="inlineCheckbox3"> Log management </label> </div> </div>Copy the code

We then check in JavaScript one by one to see if each check box is checked by a consistent name value, and the value in the input is the value we get. We take the values in an array, then use the json.stringify () method to convert the JavaScript object into a string, which is passed to the back end, which performs a series of operations.

The js code is as follows:

$("[name=role_scope]:checked").each(function () {
            data_scope_list.push($(this).val())
        })
var data_scope = JSON.stringify(data_scope_list);
Copy the code

(3) Pass the contents of the drop-down list to the back end

The code in the front-end HTML is as follows:

  <div class="form-row">
      <select class="selectpicker form-control" aria-label=".form-select-lg example" id="role_name">
      	<option value="Super Administrator">Super administrator</option>
     	<option value="System Administrator">System administrator</option>
        <option value="Safety Auditor">Safety auditor</option>
       </select>
   </div>
Copy the code

In js, just as in the text box, the current selected value can be obtained by the id value role_name.

var role_name = $("#role_name").val();
Copy the code

Additional: Use Thymeleaf to render back-end values into a drop-down list

The code is as follows:

<select name="role_name" class="selectpicker form-control" id="role_name">
      <option value="">Please select a</option>
      <option th:each="role:${role_names}"
          	  th:value="${role}" th:text="${role}">
      </option>
 </select>
Copy the code

Role_names is a List of all the role names obtained from the back-end controller, with each role value obtained via thymeleaf’s th:each tag.

The code in the back-end controller is as follows:

List<String> role_names = roleService.queryRole_names();
model.addAttribute("role_names",role_names);
Copy the code