Ajax Auto fill not working on dynamic fields but static fields - javascript

I had 4 static fields that inserts into Mysql db, when i fill in the first field the other 3 fields gets populated automatically, this works well, but now i had moved over to dynamic fields[] that gets populated by javascript. since the javascript function work with 'id' to autocomplete and fill, it seems that the javascript dynamic fields does not autofill and populate.
Here is the javascript for the dynamic fields:
$(document).ready(function() {
var max_fields = 30; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<table class="table table-bordered"><td><input class="form-control" id="state" type="text" name="name[]" required /></td><td><input class="form-control" type="text" name="surname[]" /></td><td><input class="form-control" type="text" name="idnumber[]" required/></td><td><input class="form-control" type="text" name="uniquenumber[]" required/></td><td><input class="form-control" type="text" name="nominee_photo[]" required/></td></table></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
Here is the form
<form method="post" name="form1" action="ajax.php">
<div class="input_fields_wrap">
<button class="add_field_button btn btn-primary btn-flat">Add More users</button>
</div>
<div>
<input class="btn btn-success btn-flat" name="submit" type="submit">
</div>
<input type="hidden" name="insert" value="form1">
</form>
Here is the ajax function to autocomplete fields
$(function() {
$('#uniquenumber').val("");
$('#name').val("");
$('#surname').val("");
$('idnumber').autocomplete({
source: "ajaxpage.php",
minLength: 4,
select: function(event, ui) {
$('#id').val(ui.item.id);
$('#uniquenumber').val(ui.item.uniquenumber);
$('#name').val(ui.item.name);
$('#surname').val(ui.item.surname);
},
response: function(event, ui) {
// ui.content is the array that's about to be sent to the response callback.
if (ui.content.length === 0) {
alert("please insert a valid ID Number");
$("#empty-message").text("No results found");
}
}
});
});

You can use a common class as your dummy class instead of id.
then call autocomplete on that :)
i hope this will help you.

Related

Dynamically Carry Values from inputs to Dynamically added new inputs

Currently it only adds the value once. I have a list of dropdowns(per this example its just input values that u can manually change) that I change from time to time. When clicking 'add' button, it should carry those values over to the field_wrapper, while dynamically adding new input fields to carry each value.
Meaning, I want it to add each new value selected from "text" and append to each new input text field!
I set the global variables above the function. But not sure why the value only shows up one time, and doesn't add new values each time I click 'add'
I hope this makes sense!
Javascript
// Dynamically Add More Input Fields after Add Button //Add to cart
var maxNum= 20;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var fieldHTML = '<div><input type="text" id="test" value=""/><img src="remove-icon.png"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxNum){
x++;
var cartID = $('#cID').val(),
cartd = $('#dID').val(),
cartP = $('#price').val()
text=cartID + cartD+ cartP;
$(wrapper).append(field)
$('#test').val(text)
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove();
});
HTML
<input name="cID" class="form-control" type="text" id="cID" value="">
<input name="dID" class="form-control" type="text" id="dID" value="">
<input name="price" class="form-control" type="text" id="price" value="">
<div class="field_wrapper">
</div>
Nothing to do more simply interpolate the html and add text variable as value of id="test" but it is better to use class instead of id.
// Dynamically Add More Input Fields after Add Button //Add to cart
var maxNum= 20;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxNum){
x++;
var cartID = $('#cID').val(),
cartd = $('#dID').val(),
cartP = $('#price').val()
text=cartID + cartd + cartP;
$(wrapper).append(`<div><input type="text" id="test" value="${text}"/><img src="remove-icon.png"/></div>`)
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="cID" class="form-control" type="text" id="cID" value="">
<input name="dID" class="form-control" type="text" id="dID" value="">
<input name="price" class="form-control" type="text" id="price" value="">
<div class="field_wrapper">
<button class="add_button">Add</button>
</div>

Not able to highlight the input fields if left empty

I have a form which gets submitted normally, now I have 2 requirement that needs to be completed on click of submit button, if these requirements are completed then the data needs to get saved in database
1) Border of the input boxes get highlighted if input boxes are left empty
2) If the image upload is left empty, a written message below the upload button should appear saying that the image is missing
3) The form should not get submitted till all input boxes and image upload are filled
4) Would also appreciate if someone could tell how I can use this code for all input boxes together instead of using separately for each one
Currently when I click on submit button, if the box is empty it highlights the input but after that submits the form also and the image message is also not appearing
Form Code
<form action="<?php echo base_url(); ?>profile/add_profile" method="post" >
<input id="user" type="text" />
<input id="pwd" type="text" />
<input type="file" class="form-control modalcontrol" name="profile_img" id="profile_img" required>
<span class="fileuploadlabl">Upload</span>
<div class="login-btn">
<button type="submit" class="btn btn-primary" name="submit" >SUBMIT</button>
</div>
</form>
Script Code
<script>
$( document ).ready(function() {
$(".login-btn").click(function(){
var user = $("#user").val();
var pwd = $("#pwd").val();
if(!user){
$("#user").addClass("makeRed");
}
else
{
$("#user").removeClass("makeRed");
}
if(!pwd){
$("#pwd").addClass("makeRed");
}
else
{
$("#pwd").removeClass("makeRed");
}
});
$("#user").click(function(){
$("#user").removeClass("makeRed");
});
$("#pwd").click(function(){
$("#pwd").removeClass("makeRed");
});
});
</script>
CSS Code
.makeRed{
border: 2px solid red !important;
}
You need to simply iterate all the inputs to validate them (comments inline)
$( document ).ready(function() {
$(".login-btn").click(function(){
$( "input, select" ).each( function(){ //iterate all inputs
var $this = $( this );
var value = $this.val();
$this.removeClass( "makeRed" ); //reset the class first
if ( value.length == 0 )
{
$this.addClass( "makeRed" ); //add if input is empty
}
});
});
$( "input,select" ).focus( function(){
$( this ).removeClass( "makeRed" ); //on focus of the input remove the markRed class
})
});
$(document).ready(function() {
$(".login-btn").click(function() {
$("input, select").each(function() { //iterate all inputs
var $this = $(this);
var value = $this.val();
$this.removeClass("makeRed"); //reset the class first
if (value.length == 0) {
$this.addClass("makeRed"); //add if input is empty
}
});
if ( $(".makeRed").length > 0 )
{
alert( "Some validation errors" );
}
});
$("input,select").focus(function() {
$(this).removeClass("makeRed"); //on focus of the input remove the markRed class
})
});
.makeRed
{
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="user" type="text" />
<input id="pwd" type="text" />
<input type="file" class="form-control modalcontrol" name="profile_img" id="profile_img" required>
<span class="fileuploadlabl">Upload</span>
<div class="login-btn">
<button type="submit" class="btn btn-primary" name="submit">SUBMIT</button>
</div>
</form>
$(document).ready(function(){
/**** When you click on input text element - remove class 'makered' -- Start *****/
$("form input").focus(function(){
$(this).removeClass('makeRed');
});
/**** When you click on input text element - remove class 'makered' -- Ends *****/
/**** While submit, if form is not valid, add error line and do not allow to submit, else allow submit -- Starts *****/
$("form").submit(function() { //validate on submit
var isError = false;
$(this).find('input').each(function(){
if(!($(this).val()))
{
$(this).addClass('makeRed');
isError = true;
}
else
$(this).removeClass('makeRed');
});
if(isError)
return false; // do not submit the form
});
/**** While submit, if form is not valid, add error line and do not allow to submit, else allow submit -- Ends *****/
And remove required attribute from input type file tag.
This will validate your form while submit, not while click, so the better solution instead of validating on click.

Append then focus on child input query

I am trying to append a div with a child input (this is working fine) however I cannot get the newly appended input to 'focus'.
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap_ex1"); //Fields wrapper
var add_button = $(".add_field_button_ex1"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(this).parent().parent().append('<div id="setsdiv" class="col-xs-12 text-center"><div class="col-xs-8"><input id="set" class="form-control input-sm setinput text-center" type="text" name="ex1[]" placeholder="W / R" pattern="\\d*"></div><div class="col-xs-4"><a class="btn btn-xs btn-default remove_field pull-right">Remove</a></div></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').parent('div').remove(); x--;
})
});
The 'setsdiv' is appending but I cannot focus the input with ID 'set'.
Keep in mind that I cannot just set .focus('set') because I may have multiple the more I append.
As others have alluded to, it'd be simpler to employ classes here instead of ids. Then you can just use something like .find('.set:last').focus(); to set focus on the last element with that class which will be the one you just added.
Without knowing quite how your HTML is structured, here is an example that should illustrate the concept:
$(document).ready(function () {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap_ex1"); //Fields wrapper
var add_button = $(".add_field_button_ex1"); //Add button
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
if ($('.setsdiv').length < max_fields) { //max input box allowed
$container=$(this).parent().parent();
$container.append('<div class="col-xs-12 text-center setsdiv"><div class="col-xs-8"><input class="form-control input-sm setinput text-center set" type="text" name="ex1[]" placeholder="W / R" pattern="\\d*"></div><div class="col-xs-4"><a class="btn btn-xs btn-default remove_field pull-right">Remove</a></div></div>'); //add input box
$container.find('.set:last').focus();
}
});
$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault();
$(this).closest('.setsdiv').remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap_ex1">
<div>
<button class="add_field_button_ex1">Add</button>
</div>
</div>
Try using variable x to concatenate to id of appended div , input elements to avoid duplicate ids ; call .focus() on appended input element having id ending with variable x ; increment variable
var x = 1;
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
$(this).parent().parent()
.append('<div id="setsdiv"'+x+' class="col-xs-12 text-center"><div class="col-xs-8"><input id="set"'+x+' class="form-control input-sm setinput text-center" type="text" name="ex1[]" placeholder="W / R" pattern="\\d*"></div><div class="col-xs-4"><a class="btn btn-xs btn-default remove_field pull-right">Remove</a></div></div>') //add input box
.find("input[type=text][id$="+x+"]").focus();
x++; //text box increment;
}
});
var x = 1, html = "<div id=abc"+x+"><input type=text id=def"+x+" /></div>";
$("body").append(html).find("input[type=text][id$="+x+"]").focus()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
</script>

Using javascript on new element created by jquery

I have a field location and with that I have a button add new location.On clicking that button a new textbox for that field opens.Now what I have done is I am using autofill address on that location field but autofill works for only first textbox not those textboxes which I am creating using jquery
Below is the html code
<div class="input_fields_wrap">
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
<button class="add_field_button">Add More Locations</button>
</div>
</div>
and below is the code to create new textboxes
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="form-group"><label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label><div class="col-md-3"> <input type="text" id="loc" name="Work_Location[]" class="form-control" ></div>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
and Below is the autofill code
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#loc")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
What the above code does is gives suggestions while filling location
Jquery on mathod attach event to every single element selected in selector part separatly. If you add new one you need to reaatach the event there.
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
container = $('<div class="form-group"></div>');
container.append('<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label><div class="col-md-3"> <input type="text" id="loc" name="Work_Location[]" class="form-control" ></div>');
remove_box = $('Remove').on('click', remove_field);
container.append(remove_box);
$(wrapper).append(container); //add input box
}
});
function remove_field(e) {//user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
}
$(wrapper).on("click",".remove_field", remove_field);
});
</script>
Something like this. I didn't check the syntax so fix what is necesary.

Validating Dynamic input fields with jquery

Hey guys i'm trying to validate input fields that will be dynamically generated by the user with a link button to make the user add more input fields but the problem i have is that its only the first field that is validated but the input fields generated dynamically doesn't validate.
Here's the html codes:
<form id="testform" method="post">
<div style="margin-top: 10px;" id="within_nigeria1">
<div id="divint1">Address(s) within Nigeria: Add more field
<input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text[]" />
<div class="wn"></div>
</div>
</div>
<input type="submit" value="submit" />
</form>
Here is the jquery codes:
$('#testform').validate({
rules: {
"address_text[]": {
required: true
}
}
});
var max_fields = 5; //maximum input boxes allowed
var wrapper = $("#within_nigeria1"); //Fields wrapper
var add_button = $("#add_field_button"); //Add button ID
var wrapper1 = $(".wn");
var x = 1; //initlal text box count
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper1).append('<input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text[]"/>Remove');
}
});
$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
});
jquery.validate requires that every input have a unique name. So instead of having names like
name="address_text[]"
you need to put explicit counters into the brackets. The initial HTML should use name=address_text[0], and the Javascript that adds rows can increment it.
var counter = 0;
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
counter++;
$(wrapper1).append('<input class="form-control" id="address_text" style="width: 100%; margin-bottom: 5px;" type="text" name="address_text['+counter+']"/>Remove');
}
});

Categories

Resources