I'm trying to create dynamically text fields when some text is entered to the text field. At first it created new textfield after every keystroke, but i tried to narrow it down so it would create one text-field per text-field.
To explain with a brief example, what i want to get is that in the beginning i have textfield A. If something is typed in textfield A then textfield B is created under textfield A. If something is typed in textfield B then textfield C is created under textfield B, and so on until the user leaves the last one empty.
What's wrong is the activeElement does not get chosen for dynamically created element. My idea was that when another textfield gets selected it will become (should've become) an activeElement with a length of a zero thus changing createNew to true and allowing it to create new textfield.
I hope i explained clearly what i'm trying to achieve, but English is not my mother-tongue so it's a bit difficult. I may be approaching this problem with a bad perspective so if someone has a better idea how to create text fields dynamically i'm open to different options. I did some googling before and didn't find much about that particular idea.
Anyways, here's my js.
//This is the javascript for the namepage.html
var createNew = true;
function getNewInsertion() {
var container = document.getElementById("inputcontainer");
if (document.activeElement.value.length == 0 && createNew == false){
createNew = true;
}
else if (createNew == true){
createNew = false;
var input = document.createElement("input");
input.type = "text";
input.className = "form-control text-controller"; // set the CSS class
input.placeholder = "Sisesta siia nimi";
container.appendChild(input);
}
return createNew;
}
$(function() {
$(".text-controller").bind("paste cut keydown",function(e) {
getNewInsertion();
})
});
You should delegate the event on the container:
$(function() {
$("#inputcontainer").on( "paste cut keydown", "input", function(e) {
getNewInsertion();
})
});
Here I leave you a snippet:
var createNew = true;
function getNewInsertion() {
var container = document.getElementById("inputcontainer");
if (document.activeElement.value.length == 0 && createNew == false){
createNew = true;
}
else if (createNew == true){
createNew = false;
var input = document.createElement("input");
input.type = "text";
input.className = "form-control text-controller"; // set the CSS class
input.placeholder = "Sisesta siia nimi";
container.appendChild(input);
}
return createNew;
}
$(function() {
$("#inputcontainer").on( "paste cut keydown", "input", function(e) {
getNewInsertion();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputcontainer">
<input type="text" class="text-controller" />
</div>
Related
Here's my code
$('.f1 .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
// fields validation
parent_fieldset.find('input[type="text"], select').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
Its a kind of Validation which i'm using in my Multi-step Form, here the input text field validation is working perfectly but for Select/Checkbox/Radio, its not working, Please help me to fix the code.
I already tried this code but it's not working for select field -
parent_fieldset.find('input[type="text"], select', '.sys').each(function() {
You're saying that you only want inputs whose type is text, so that's what you're getting. If you want every type of input, just take the type specification away from the selector, like this:
parent_fieldset.find(':input').each(function() {
}
Edit: the jQuery :input extension will include select elements, while input will not. The jQuery doc is here.
Try the following code.
parent_fieldset.find(':input').each(function() {
//Your code goes here.
}
//Try this one another way to validate form fields
var allFormData = $('#myForm').serializeArray();
for(var dataIndex = 0 ; dataIndex < allFormData.length ; dataIndex++){
if(allFormData[dataIndex].value == ""){
$("#myForm input[name="+allFormData[dataIndex].name+"]").addClass("input-error");
}else{
$("#myForm input[name="+allFormData[dataIndex].name+"]").removeClass('input-error');
}
}
So this is my final code which works perfectly with all select, radio, checkbox fields
parent_fieldset.find('input[type="text"], select', '.sys').each(function(key, value) {
So I have a button that whenever clicked appends whatever the user entered below the input field. I want to make it so when clicked with an empty field nothing appends (essentially the function does not run).
Here is my code:
var ingrCount = 0
$("#addIngrButton").on('click', function() {
var ingredientInput = $("#ingredients").val().trim();
var ingredientSpace = $("<p>");
ingredientSpace.attr("id", "ingredient-" + ingrCount);
ingredientSpace.append(" " + ingredientInput);
var ingrClose = $("<button>");
ingrClose.attr("data-ingr", ingrCount);
ingrClose.addClass("deleteBox");
ingrClose.append("✖︎");
// Append the button to the to do item
ingredientSpace = ingredientSpace.prepend(ingrClose);
// Add the button and ingredient to the div
$("#listOfIngr").append(ingredientSpace);
// Clear the textbox when done
$("#ingredients").val("");
// Add to the ingredient list
ingrCount++;
if (ingredientInput === "") {
}
});
So I wanted to create an if statement saying when the input is blank then the function does not run. I think I may need to move that out of the on click function though. For the if statement I added a disabled attribute and then removed it when the input box contains something. But that turns the button another color and is not the functionality I want. Any ideas I can test out would help. If you need any more information please ask.
If you're testing if ingredientInput is empty, can you just return from within the click event?
$("#addIngrButton").on('click', function() {
var ingredientInput = $("#ingredients").val().trim();
if(ingredientInput === '') { return; }
// rest of code
Simply use :
$("#addIngrButton").on('click', function() {
var ingredientInput = $("#ingredients").val().trim();
if (ingredientInput.length == 0) {
return false;
}
// ..... your code
var textbox = function(me) {
if (me.checked == false) {
var textb = document.createElement('textarea');
textb.name = "Address";
textb.id = "Address";
textb.required;
textb.placeholder = "Address";
me.parentNode.appendChild(textb);
}
setInterval(function() {
if (me.checked == false) {
me.parentNode.removeChild(textb);
return false;
}
});
};
This is the the java script code that I wrote to display a text area (named textb) when a radio button is selected. Though I put "textb.required" the text area is not made a compulsory field (that is if a person selects the radio button and does not fill the address an error is not returned)
Please help me to correct this
I have a db search form with multiple fields. Two of them, job_id and job_desc, I want to be disabled when the other one is used and vice versa. I have written a small Javascript function to do this.
Here is my form code:
<input type="text" id="job_id" oninput="input('job_id','job_desc')" onblur="blur('job_id','job_desc')">
<textarea id="job_desc" oninput="input('job_desc','job_id')" onblur="blur('job_desc','job_id')"></textarea>
Here is my Javascript code:
function input(a,b)
{
var a = document.getElementById(a);
var b = document.getElementById(b);
alert("This will disable "+b); // Let the user know we are disabling the other field
b.value = ""; // Empty the other field
b.disabled = true; // Disable the other field
}
function blur(a,b)
{
var a = document.getElementById(a);
var b = document.getElementById(b);
if(a.value = "") // If the field is empty...
{
b.disabled = false; // Enable the other field.
}
}
I have these problems:
1) For some reason my second field does not re-enable once the first field is empty and blurred. This leads me to believe the onblur() event is not working.
2) Once I type in some text, I get the alert once and it's all good. However, when I empty the field and the re-input some text, the alert doesn't trigger a second time. How do I reset the oninput() event?
Here is my fiddle: fiddle
You can use the "onkeyup" event instead of the other events:
The HTML Code would be :
<input id="job_id" onkeyup="input('job_id','job_desc')">
<br>
<textarea id="job_desc" onkeyup="input('job_desc','job_id')"></textarea>
And the JS funciton :
function input(a, b) {
var ea = document.getElementById(a); // We put A in a variable
var eb = document.getElementById(b); // We put B in a variable
if(ea.value != ""){ // If the element have a value / text in it
if(!eb.disabled) // we check if the other element is disabled, if not, we trigger the alert
alert("This will disable " + b); // Let the user know we are disabling the other field
eb.value = ""; // Empty the other field
eb.disabled = true; // Disable the other field
}else{ // if the element's value is empty (which means that we have erased the existing value)
alert(b + " is now enabled"); // Let the user know we are enabling the other field
eb.disabled = false; // We re-enable the field
}
}
It will work fine on all the browsers..
I hope it will help you !
Besides the solution provided, the reason your code did not work is it was conflicting with a native blur() function on the window object, and so your blur call was calling that instead of your own blur function. You need to change its name.
Another issue once you fix that is in
if(a.value = "") // If the field is empty...
it should have two = signs for comparison.
if(a.value == "") // If the field is empty...
Demo at http://jsfiddle.net/q11m3ahz/6/
I have a requirement to include a user input along with dropdown.
I implemented it using .change() method of jquery.
Using .change() function allows me to take the input when i select "Enter value" option.
In order for this code to work again i will have to change the selection. i.e .
When i click on "Enter value" option again, no index will be changed and nothing will happen.
How do i get the focus to the textbox with out changing the selected option.
In short i want the current functionality to work multiple times with out having to select other options.
My code in js fiddle is :
My code in jsfiddle
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
} else {
x.find('.holder').val(x.find('option:selected').text());
x.find('.holder').prop('disabled',true);
}
});
You could change the select value to be "0" and thus show "None" after giving focus to the input field.
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
jQuery(this).val("0"); // Change select value to None.
} else {
x.find('.holder').val(x.find('option:selected').text());
x.find('.holder').prop('disabled',true);
}
});