Hide your #error_message and #success_message with style="display:none;".
Only show it up on success or error with $("#success_message").css("display","block");
Solution 1 :
Solution 2 :
You can do it this way too:
JQuery:
$('#side-enquiry').click(function() {
//set to init
$('#error_message').html('');
$('#success_message').html('');
var side_name = $('#side_name').val();
var side_email = $('#side_email').val();
var side_phone = $('#side_phone').val();
var side_branches = $('#side_branches').val();
var side_grade = $('#side_grade').val();
var side_dob = $('#side_dob').val();
var side_address = $('#side_address').val();
var side_message = $('#side_message').val();
if (side_name == '' || side_email == '' || side_phone == '' || side_branches == '' || side_grade == '' || side_dob == '' || side_address == '' || side_message == '') {
$('#error_message').html("All Fields are required");
} else {
$.ajax({
url: "sideform.php",
method: "POST",
data: {
side_name: side_name,
side_email: side_email,
side_phone: side_phone,
side_branches: side_branches,
side_grade: side_grade,
side_dob: side_dob,
side_address: side_address,
side_message: side_message
},
success: function(data) {
$("form").trigger("reset");
$('#success_message').fadeIn().html(data);
setTimeout(function() {
$('#success_message').fadeOut("Slow");
}, 2000);
},
error: function(xhr, status, error){
var errorMessage = xhr.status + ': ' + xhr.statusText
$('#error_message').html(errorMessage);
}
});
}
return false;
});
Hope it helps.
Problem :
I have a form when the form is successfully submitted I need to display an image . This is the below form code.
<form id="" class="form-container" name="popout" onsubmit="return validateform()">
<h1 class="sticky-form">Know about the admissions</h1>
<button type="button" class="btn cancel" onclick="closeForm()">X</button>
<input type="text" placeholder=" Name*" id="side_name" name="side_name" required><br />
<input type="email" placeholder="Email*" id="side_email" name="side_email" required>
<input type="tel" placeholder="Phone*" id="side_phone" name="side_phone"><br />
<select class="branches" id="side_branches" name="side_branches">
<option selected hidden value="">Select a branch</option>
<option value="RCIS,Kalyan Nagar ICSE">RCIS,Kalyan Nagar ICSE</option>
<option value="RCIS,Kalyan Nagar CBSE">RCIS,Kalyan Nagar CBSE</option>
<option value="RCIS,Mysuru">RCIS,Mysuru</option>
<option value="RCIS,Sarjapur">RCIS,Sarjapur</option>
<option value="RCIS,Begur">RCIS,Begur</option>
<option value="RCIS,MS Palya<">RCIS,MS Palya</option>
<option value="RCIS,Chamrajpet">RCIS,Chamrajpet</option>
</select><br />
<select id="side_grade" class="branches" name="side_grade">
<option selected hidden value="">* Select a Grade</option>
<option value="Play school">Play school</option>
<option value="Nursery">Nursery</option>
<option value="Jr.KG">Jr.KG</option>
<option value="Sr.KG">Sr.KG</option>
<option value="1">Ⅰ</option>
<option value="2">Ⅱ</option>
<option value="3">Ⅲ</option>
<option value="4">Ⅳ</option>
<option value="5">Ⅴ</option>
<option value="6">Ⅵ</option>
<option value="7">Ⅶ</option>
<option value="8">Ⅷ</option>
<option value="9">Ⅸ</option>
<option value="10">Ⅹ</option>
<option value="11">Ⅺ</option>
<option value="12">Ⅻ</option>
</select>
<input type="date" placeholder="Date of Birth*" id="side_dob" name="side_dob"><br />
<input type="text" placeholder="Residing area*" id="side_address" name="side_address" required><br />
<textarea class="text-input" type="text" id="side_message" name="side_message" placeholder="Enter Message*"
rows="2" cols="20" required></textarea>
<button type="submit" class="btn" name="side-enquiry" id="side-enquiry">Enquire Now</button>
<span id="error_message" class="text-danger">All Fields are required</span>
<span id="success_message" class="text-success">Successfully submitted</span>
</form>
The above is the form code when I load the page the form both the message as default. I have this jquery code where the form displays the message and insert the values to the database
$(document).ready(function() {
$('#side-enquiry').click(function() {
var side_name = $('#side_name').val();
var side_email = $('#side_email').val();
var side_phone = $('#side_phone').val();
var side_branches = $('#side_branches').val();
var side_grade = $('#side_grade').val();
var side_dob = $('#side_dob').val();
var side_address = $('#side_address').val();
var side_message = $('#side_message').val();
if (side_name == '' || side_email == '' || side_phone == '' || side_branches == '' || side_grade == '' || side_dob == '' || side_address == '' || side_message == '') {
$('#error_message').html("All Fields are required");
} else {
$('#error_message').html('');
$.ajax({
url: "sideform.php",
method: "POST",
data: {
side_name: side_name,
side_email: side_email,
side_phone: side_phone,
side_branches: side_branches,
side_grade: side_grade,
side_dob: side_dob,
side_address: side_address,
side_message: side_message
},
success: function(data) {
$("form").trigger("reset");
$('#success_message').fadeIn().html(data);
setTimeout(function() {
$('#success_message').fadeOut("Slow");
}, 2000);
}
});
}
});
});
This is the image when I load the the messages are shown in default
I want to display only when the submit button is clicked
Can I know where it wrong