I want to display content in a div when the user clicks on a button. There are three buttons: test connection src, test connection dest, and next.
When I click on the test connection src button and there is no input, it should display a message. However, when the user clicks on the input field, the message should hide. Currently, I am able to show the message but not hide it when clicking on the input field.
If the input field matches the pattern (regex), it should display a message "connection successful" when test connection src is clicked. Right now, I am unable to show "connection successful" in
<div id = "inp_src_success"></div><div id = "inp_dest_success"></div>The same process applies to the button test connection dest.
Clicking on the next button should only be enabled once both connections become successful.
$(document).ready(function () {
$("#test_btn_src").on("click", function(){
var inpsrc = document.getElementById('inp_src').value;
//alert(inpsrc);
if(inpsrc.trim() == null || inpsrc.trim() == "") {
document.getElementById('inp_src1').innerHTML = 'IP src should be filled out';
}
else {
$("inp_src").keypress(function(key){
if (key){
$("inp_src1").hide();
}
});
}
});
$("#test_btn_dest").on("click", function(){
var inpdest = document.getElementById('inp_dest').value;
//alert(inpsrc);
if(inpdest.trim() == null || inpdest.trim() == "") {
document.getElementById('inp_dest1').innerHTML = 'IP src should be filled out';
}
else {
$("inp_dest").keypress(function(key){
if (key){
$("inp_dest1").hide();
}
});
}
});
document.getElementById("mybtn").onclick = function () {
location.href = "www.google.com";
};
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<div id = "inp_src_success"></div>
<div>
<label>Enter Source Server IP Here</label>
<input id = "inp_src" name="txtbox_ip_src" minlength="7" maxlength="15" class="form-control" type="text"
placeholder="Source Server Ip:"
pattern="(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)"
required onkeypress="myFunction()" />
<div id = "inp_src1"></div>
<button id = "test_btn_src" class="btn btn-primary success" type="button" style=" font-size: 10px; margin-top:7px;">Test Connection Src</button>
</div>
<div id = "inp_dest_success"></div>
<div>
<label>Enter Destination Server IP Here</label>
<input id = "inp_dest" name="txtbox_ip_src" minlength="7" maxlength="15" class="form-control" type="text"
placeholder="Destination Server Ip:"
pattern="(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)"
required onkeypress="myFunction1()" />
<div id = "inp_dest1"></div>
<button id = "test_btn_dest" class="btn btn-primary success" type="button" style=" font-size: 10px; margin-top:7px;">Test Connection Dest</button>
</div>
<button id = "mybtn" class="btn btn-primary nextBtn pull-right" type="button">Next</button>