Get input data and use of name in html through jQuery
May 30, 2021 Article blog
In front-end development, using forms jumps, sometimes without this. Json data is sent directly via jQuery using AJAX.
Here's a screenshot of the run:
The interface is as follows:
You can see it here
Div is group1, followed by input1, input2, and so on.
And there is a group2
name is the same as group1 above.
In this way, get, as follows, the value of the input under group1, and so on.
Under index .html
You know that the jquery.min .js is loaded before the test .js
and loaded into the test .js
But the interface load is complete. Run init(), which calls the binding function and binds two buttons.
The program source code is as follows:
index.html
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="group1">
<label >名称1_1</label>
<input type="text" name="input1"></input>
<br/>
<label>名称1_2</label>
<input type="text" name="input2"></input>
<br/>
<label>名称1_3</label>
<input type="text" name="input3"></input>
<br/>
<label>名称1_4</label>
<input type="text" name="input4"></input>
<br/>
<button class="do-btn1">点击</button>
</div>
<br/>
<br/>
<div class="group2">
<label>名称2_1</label>
<input type="text" name="input1"></input>
<br/>
<label>名称2_2</label>
<input type="text" name="input2"></input>
<br/>
<label>名称2_3</label>
<input type="text" name="input3"></input>
<br/>
<label>名称2_4</label>
<input type="text" name="input4"></input>
<br/>
<button class="do-btn2">点击</button>
</div>
</body>
<script src="jquery.min.js"></script>
<script src= "test.js"></script>
</html>test.js
;
var member_do1 = {
init: function(){
this.eventBind();
},
eventBind:function(){
$(".group1 .do-btn1").click(function(){
$.ajax({
url: "https://www.baidu.com",
type: "POST",
data:{
value1:$(".group1 input[name=input1]").val(),
value2:$(".group1 input[name=input2]").val(),
value3:$(".group1 input[name=input3]").val(),
value4:$(".group1 input[name=input4]").val()
},
dataType:'json',
success:function(res){
console.log(res);
}
});
})
}
};
$(document).ready(function(){
member_do1.init();
member_do2.init();
});
var member_do2 = {
init: function(){
this.eventBind();
},
eventBind:function(){
$(".group2 .do-btn2").click(function(){
$.ajax({
url: "https://www.baidu.com",
type: "POST",
data:{
value1:$(".group2 input[name=input1]").val(),
value2:$(".group2 input[name=input2]").val(),
value3:$(".group2 input[name=input3]").val(),
value4:$(".group2 input[name=input4]").val()
},
dataType:'json',
success:function(res){
console.log(res);
}
});
});
}
};