Is there a way to change my input in order to display a succes or error icon at the input? like : http://getbootstrap.com/css/#forms-control-validation
Much appreciated.
and here's my code :
<script>
$(document).ready(function () {
$('input[name=subdomain]').keyup(subdomain_check);
});
function subdomain_check() {
var subdomain = $('input[name=subdomain]').val();
if (subdomain == "") {
$('input[name=subdomain]');
} else {
jQuery.ajax({
type: "POST",
url: "ajax.php",
data: 'subdomain=' + subdomain,
cache: false,
success: function (response) {
if (response == 1) {
$('input[name=subdomain]').html("The URL already exist!");
} else {
$('input[name=subdomain]').html("The URL is Valid!");
}
}
});
}
}
</script>
The HTML code :
<div class="form-group">
<label class="control-label col-md-3" for="install-element-6">
<span class="required">* </span>subdomain</label>
<div class="col-md-6"> //<----- I want it here
<input type="text" class="form-control input-md col-md-6" name="subdomain" placeholder required id="install-element-6"/> // the method.addClass add it here
</div>
</div>
Much appreciated.
It worked now and all by adding the method parent() to get the element div instead of input
if(response == 1){
$('input[name=subdomain]').parent().removeClass("has-success");
$('input[name=subdomain]').parent().addClass("has-error");
}else{
$('input[name=subdomain]').parent().removeClass("has-error");
$('input[name=subdomain]').parent().addClass("has-success");
}
Related
I have an input field and "Add" button to store. While clicking the Add button another input field with the same class name should be created. But before creating there is a validation check. But the validation is only hitting first time. There is no validation check in the second time.
Below is my Code.
$('#add').click(function (e) {
e.preventDefault();
if ($('.js-user-email').val()) {
debugger;
$("#divSpecificToUserError span").text("");
$('#divSpecificToUserError').addClass("d-none");
if (ValidateEmailformat($('.js-user-email').val())) {
//debugger;
$.ajax({
type: "POST",
url: "Stepup.aspx/Exists",
data: JSON.stringify({ emailId: $('.js-user-email').val() }),
cache: false,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (response) {
debugger;
if (response != null && response.d != null) {
var data = response.d;
if (data > 0) {
addDynamicTextboxes();
}
else {
$("#divSpecificToUserError span").text("not a valid user");
$('#divSpecificToUserError').removeClass("d-none");
}
}
},
failure: function (response) {
alert(response.d);
}
});
}
else {
$("#divSpecificToUserError span").text("Please enter email id in valid format");
$('#divSpecificToUserError').removeClass("d-none");
}
}
else {
$("#divSpecificToUserError span").text("No E-mail has been entered ");
$('#divSpecificToUserError').removeClass("d-none");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field form-group form-group-padding">
<label class="col-form-label">User E-mail(s) to Notify:</label>
<input type="text" id="field1" name="userEmail1" class="input form-control js-user-email" placeholder="example#domain.com" autofocus />
<button id="add" class="btn-sm btn-secondary add-more-specific pull-right btn-user-email" title="Add" type="button">+</button>
<div class="col-md-3 d-none alert-danger" id="divSpecificToUserError" style="margin-top: 6px">
<span></span>
</div>
</div>
$('.btn-user-email') if this is multiple elements you need to loop it and add click events to all elements in the jQuery list.
Oh, I see what your problem is.
// Your Add Button Function
// to insert another input here
function add(){
// Your Add Button Code Here
refreshValidate();
}
// Validate Function
function refreshValidate(){
$('.btn-user-email').each(function() {
$(this).unbind();
$(this).click(function (e) {
e.preventDefault();
// Your Validate Code HERE ...
});
});
}
In Sign up form, I wanna make Duplication check.
When is duplicated, A message is shown below the input box.
<div class="form-group">
<label class="col-md-2 control-label"><strong>Email</strong></label>
<div class="col-md-10">
<input type="email" class="form-control" name="usr_Email"
ng-model="usrEmail" ng-keyup="checkDuplicate()">
<span class="help-block"
ng-show="signupForm.$submitted || signupForm.usr_Email.$touched">
<div ng-show="?????" class="text-danger">is duplicated!</div>
</span>
</div>
</div>
to check duplicate, I got counting number from server
$scope.user.usrEmail = $scope.usrEmail;
var req = {
method: 'POST',
url: './api/v1/public/checkDuplication',
dataType: 'json',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
data: angular.toJson($scope.user)
};
$http(req).success(function(data, status, headers, config){
$log.debug($filter('json')(data));
if(data.number == 0){
???????
}
else{
???????????????
}
I'm very confused about what I should write in '???'
In advance, thanks!
Controller:
if(data.number == 0){
//If email id is duplicate, then show the message in UI
$scope.isDuplicate = true;
} else{
//If email id is not duplicate, then hide the message in UI
$scope.isDuplicate = false;
}
HTML:
<div ng-show="isDuplicate" class="text-danger">is duplicated!</div>
I have used isDuplicate scope variable to show the message.
I am trying to upload an image to database from html page in a form in a modal through php & ajax,but it doesn't work i don't know why,anyone can help me?
HTML Page
<form method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel">Photo:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input type="file" id="fileUpload" name="fileUpload" style="color: #ffffff;"/>
</div><br>
</div>
</div>
</form>
<button type="button" class="btn btn-success btn-md" style="margin:0;width: 75px;" onclick="AddNewCustomer()">Add</button>
Javascript Function
function AddNewCustomer()
{
//Image upload
$(document).ready(function()
{
$(document).on('change', '#fileUpload', function() //NOT WORKING HERE
{
var property = document.getElementById("fileUpload").files[0];
var image_name = property.name;
var image_extension = image_name.split('.').pop().toLowerCase();
if (jQuery.inArray(image_extension, ['gif','png','jpg','jpeg']) == -1)
{
alert("invalid Image File");
}
var image_size = property.size;
if(image_size > 2000000)
{
alert("Image File Size is very big");
}
else
{
var form_data = new FormData();
form_data.append("fileUpload", property);
$.ajax
({
type:"POST",
url:"addNewCustomer.php",
processData: false,
cache: false,
contentType: false,
data:
{
'form_data':form_data
},
success: function(data){
if (data == "Success!")
{
sweetAlert("Data entered successfully!");
}
else if(data == "Exist")
{
sweetAlert("","Customer already exists!","error");
return false;
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('ERROR', textStatus, errorThrown);
}
})
}
})
})
}
change event would be attached after click at <button> at onclick="AddNewCustomer().
You can remove AddNewCustomer function and call change on #fileUpload element at click of .btn element.
$(document).ready(function() {
$(document).on('change', '#fileUpload', function() {//do stuff})
$(".btn").on("click", function() {
$("#fileUpload").trigger("change");
});
});
You want to upload the image immediately after it's chosen, but you only run the function when the 'Add' button is clicked.
You need to take your change code out of the function, or invoke the function when the page is loaded to add the listeners to the form.
I have an issue with changing the mail address by using AJAX. Somehow when I enter an email address it doesn't see the change but it should. It's a place to change mail address. Can you check it?
PHP
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="icon-email-icon tooltip mrgn-bot">Email</div>
<input type="text" value="<?php echo $update_['email'];?>"
class="profile-textbox pull-right"
onchange="saveToDatabase(this.value,'email','<?php echo $getID; ?>');">
</div>
JS
function saveToDatabase(editableObj,column,id) {
$(editableObj).css("background","#FFF url(../img/loaderIcon.gif) no-repeat right");
var result = window.confirm("Are you sure?");
if(result == true) {
var str = 'column='+column+'&editval='+editableObj+'&id='+id;
$.ajax({
url: "saveedit.php",
type: "POST",
data: str,
success: function(data){
$(editableObj).css("background","#FDFDFD");
alert("Your Information was successfully changed.");
}
});
}
else
return 0;
}
new to Javascript so apologies if this is a dumb question!
I'm having a hard time explaining this but I have simple thumbs up/down system like this:
//thumbs up down reviews
$(function addThumbs() {
$(".vote-up").click(function() {
var review_id = $('#review_id').val();
var user_id = $('#user_id').val();
if (user_id == '') {
alert('no user id');
} else {
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "ajax-thumbsup.php",
data: {
"user_id": user_id,
"review_id": review_id //we are passing the name value in URL
},
cache: false,
success: function(html) {
$('#vote-up').attr('src', 'img/upgreen.png');
}
});
}
return false;
});
});
$(function addThumbsDown() {
$(".vote-down").click(function() {
var review_id = $('#review_id').val();
var user_id = $('#user_id').val();
if (user_id == '') {
alert('nouserid');
} else {
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "ajax-thumbsdown.php",
data: {
"user_id": user_id,
"review_id": review_id //we are passing the name value in URL
},
cache: false,
success: function(html) {
$('#vote-down').attr('src', 'img/downred.png');
}
});
}
return false;
});
});
And my html looks like this:
<div class="row">
<div class="thumbs">
<input type="hidden" id="review_id" value="11" />
<input type="hidden" id="user_id" value="5" />
<div id="pluses">0</div> <div id="progressdiv"></div>
<a><img id="vote-up" class="vote-up" src="img/up.png" alt="thumbs up" /> </a>
<a><img id="vote-down" class="vote-down" src="img/down.png" alt="thumbs down" /> </a>
<div id="minuses">0</div>
</div>
comments/likes
</div>
<div class="row">
<div class="thumbs">
<input type="hidden" id="review_id" value="12" />
<input type="hidden" id="user_id" value="5" />
<div id="pluses">0</div> <div id="progressdiv"></div>
<a><img id="vote-up" class="vote-up" src="img/up.png" alt="thumbs up" /> </a>
<a><img id="vote-down" class="vote-down" src="img/down.png" alt="thumbs down" /> </a>
<div id="minuses">0</div>
</div>
comments/likes
</div>
If I click the second thumbs up, the first one turns green, how do I tell javascript which which img#vote-down needs to be changed?
Ids on a page have to be unique, you need to make the common. What you should do is use a common class to reference the element. The this scope will get you the element that is clicked on and you can traverse the tree to find the elements that you are after.
Switch the ids to classes and combine the logic so you only have one function.
$(".thumbs").on("click", "img", function (e) {
var img = $(this),
isUpVote = img.hasClass("vote-up"),
thumbsElem = img.closest(".thumbs"),
review_id = thumbsElem.find(".review_id").val(),
user_id = thumbsElem.find(".user_id").val(),
active = isUpVote ? "up" : "down",
inactive = isUpVote ? "down" : "up";
e.preventDefault();
if (user_id == '') {
alert('nouserid');
} else {
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "ajax-thumbs" + active + ".php", //You really should just have one php, pass up up or down!
data: {
"user_id": user_id,
"review_id": review_id //we are passing the name value in URL
},
success: function (html) {
thumbsElem.find(".vote-" + active).prop('src', 'img/' + active + 'red.png');
thumbsElem.find(".vote-" + inactive).prop('src', 'img/' + active + '.png');
},
error: function () {
alert("Your vote was not counted because of an error, try again");
},
complete: function () {
$("#flash").stop().hide();
}
});
}
});
Combining logic and adding a simple check means you do not have to maintain two sets of codes that basically does the same thing.