stopping my function on javascript
By using this I can add unlimited inputs on my page. But the issue is in my case, I have an input field but it may or may not have a child or sub input field and if then it should be associated with the parent input field.
Also parent input field is must for sub input fields.
Question?
Dynamic input fields(got from above),
Dynamic child/sub input fields,
How to associate child/sub input fields with parent,
So that it can save in the db with related to field.
http://jsfiddle.net/Shahbaz/WhaBx/
From this I can add multiple input fields and append multiple sub/child input fields.
which can be append.
I'll try to modify more.
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents label').size() + 1;
$('#addScnt').live('click', function() {
$('<p>Keyword: '+i+'Remove<br><labelfor="p_scnts"><input type="text" id="p_scnt" size="20" name="keyword[]" value="" placeholder="Enter Keyword" />Add Variants<a></a></label></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i >2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
$('#addVar').live('click', function() {
//alert();
$('<p><label for="var"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Vareyword" /></label> Remove Var</p>').appendTo($(this).next());
return false;
});
$('#remVar').live('click', function() {
$(this).parent('p').remove();
return false;
});
});
<h2>Add Another Input Box</h2>
<div id="p_scents">
<p>
Keyword: 1
<br/>
<label for="p_scnts"><input type="text" id="p_scnt" size="20" name="keyword[]" value="" placeholder="Enter keyword">
Add Variants
</label>
</p>
</div>
Use similar function and append under paragraph with different name,
Hope this will be helpful.
Try it.
Related
I am trying to select multiple text boxes at once and initiate the copy to clipboard command but only the 3rd text field always gets highlighted or selected.
HTML:
<input type="text" class="copyText" placeholder="Name"><br>
<input type="text" class="copyText" laceholder="Phone"><br>
<input type="text" class="copyText" placeholder="E-Mail"><br>
<button>Copy</button>
JS:
$('button').on('click', function () {
var copyText = $(':input[type="text"]';
copyText.select();
document.execCommand('copy');
alert('Text Copied');
});
This way is more like a hack, but works, because we have to create an element and hide it with position:absolute;left:-1000px. The idea is to iterate over inputs and save the values into an array, then we have to store those values into a new input that is not visible. And finally we select the value of that input.
$('button').on('click', function() {
var values = $('.copyText').map(function(i, e) {
return $(e).val();
}).get();
var phantom = document.createElement("textarea");
phantom.setAttribute("style", "position:absolute;left:-1000px");
phantom.innerHTML = values.join("\n");
document.body.appendChild(phantom);
phantom.select();
document.execCommand('copy');
alert('Text Copied');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="copyText" placeholder="Name"><br>
<input type="text" class="copyText" laceholder="Phone"><br>
<input type="text" class="copyText" placeholder="E-Mail"><br>
<button>Copy</button>
Use each() function of jQuery
$('button').on('click', function () {
$(':input[type="text"]').each(function( index ){
$(this).select();
document.execCommand('copy');
alert('Text Copied');
});
});
Doc jQuery : https://api.jquery.com/each/
This is my question:
I got an jsp page, this jsp has many text fields like this:
<html:text property="cicPF" maxlength="9" style="text-transform: uppercase;" onfocus="disableIfeFields()"/>
So I want to disable some of this text fields when the focus it's in a specific field
But no one of this fields has "id" label, and I can't modify it to include it.
May I disable the fields usig their given names, no one of this repeats the same name.
for example with a function like this:
function disableIfeFields(){
document.getElementsByName("numIdentificacionPF").disabled = true;
}
thanks
You need to loop through the list and disable all the fields you want that way, used input to show example:
function disableIfeFields() {
document.getElementsByName("numIdentificacionPF").forEach((e) => {
e.disabled = true;
});
}
<html:text property="cicPF" maxlength="9" style="text-transform: uppercase;" />
<input onfocus="disableIfeFields()" type="text" name="fname">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
Maybe like this:
function disableIfeFields(){
document.querySelectorAll('[property="cicPF"]')[0].disabled = true;
}
disableIfeFields();
<input type="text" property="cicPF" maxlength="9" style="text-transform: uppercase;" onfocus="disableIfeFields()"/>
Hopefully the following should help. Because the selection result is a list of elements you will have to loop through the results.
Please note that since you said no input repeats the same name, I'm using querySelectorAll, which might be a more suitable method after all…
var inputs = document.querySelectorAll('input[type="text"]');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].id === 'label') {
continue;
}
inputs[i].disabled = true;
}
I am using MySQL and ajax to pull specific info from a table and then I am passing one of those values to a radio button.
User enters their ID number and it automatically adds the full name, email address and manager from the MySQL table.
I then pass the manager value to a radio button, but it's not working unless I actually click on the manager input field.
I tried, blur, change, keyup, focusin/out but its still not passing the value until I actually click on the input field.
PLEASE NOTE - it works fine if I manually add a value to the manager's field.
Any ideas?
<input type="text" name="id" id="id" value="" >
<input type="text" class="hidden" name="name" id="name" value="" >
<input type="text" class="hidden" name="email" id="email" value="" >
<input type="text" class="hidden" name="manager" id="manager" value="" >
<input type="radio" name="defaultmanager" id="defaultmanager" value="">
<label for="defaultmanager" id="defmanager" >Default manager:</label>
<input type="radio" name="reason" id="otherreason" value="">Other
<input type="text" name="otherreason" />
<script>
$('#manager').bind("change paste keyup", function() {
var val = $(this).val();
$('#defmanager').text('Default Manager:' + val);
});
</script>
Again it works fine but I have to actually click on the input field in order for the value to be passed to the radio button.
Here's the code that automatically adds the name, email and manager:
$(function() {
$( "#id" ).on( 'blur' , function() {
$('#table1 tr').removeClass("hidden");
// getting the value that user typed
searchString=$(this).val();
// forming the queryString
var data = 'telefoon='+searchString;
// if searchString is not empty
if(searchString) {
// ajax call
$.ajax({
type: "POST",
url: "query2.php",
data: data,
success: function(html){ // this happens after we get results
result = String(html).split("|");
$("#name").val(result[0]);
$("#email").val(result[1]);
$("#manager").val(result[4]);
}
});
}
return false;
});
});
Where you are programmatically changing the value of the manager field, you need to trigger the change event:
$("#manager").val(result[4]).change();
A full, working example is here:
$('#manager').bind("change paste keyup", function() {
var val = $(this).val();
$('#defmanager').text('Default Manager:' + val);
});
//Set value of the manager field from the database here
$('#manager').val('Bob Marley').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="id" id="id" value="" >
<input type="text" name="name" id="name" value="" >
<input type="text" name="email" id="email" value="" >
<input type="text" name="manager" id="manager" value="" >
<input type="radio" name="defaultmanager" id="defaultmanager" value="">
<label for="defaultmanager" id="defmanager" >Default manager:</label>
<input type="radio" name="reason" id="otherreason" value="">Other
<input type="text" name="otherreason" />
i guess there's a million ways to do everything. I don't know why i wasnt thinking clear. :( Here's what i ended up doing:
$(function() {
$( "#id" ).on( 'blur' , function() {
$('#table1 tr').removeClass("hidden");
// getting the value that user typed
searchString=$(this).val();
// forming the queryString
var data = 'telefoon='+searchString;
// if searchString is not empty
if(searchString) {
// ajax call
$.ajax({
type: "POST",
url: "query2.php",
data: data,
success: function(html){ // this happens after we get results
result = String(html).split("|");
$("#name").val(result[0]);
$("#email").val(result[1]);
$("#manager").val(result[4]);
$("#defmanager").val(result[4]);
}
});
}
return false;
});
});
This is my js
$(function() {
var tryme = 5;
var options = {
source: "<?=base_url()?>/autocomplete/",
minLength: 1,
select: function( event, ui ) {
event.preventDefault();
this.value = ui.item.valuedesc;
//$(this).siblings('.item_sku').val(ui.item.valuedesc); // not working
//$(this).siblings('.description').val(ui.item.description); // not working
//$(this).siblings('.rate').val(ui.item.rate); // not working
}
};
$( ".item_sku" ).autocomplete(options);
$(".add-row").click(function (e) {
e.preventDefault();
var cloned = $('#invoice_table tr:last').clone();
cloned.appendTo('#invoice_table').find('input').val('');
cloned.find('.item_sku').autocomplete(options);
});
});
I am using jquery to clone a line of fields in order to build my invoice items.
What is NOT working now is the specific line of fields are not updating.
These are my fields:
<input type="text" maxlength="255" name="item_sku[]" data-required="1" class="form-control item_sku" autocomplete="off" required/>
<input type="text" maxlength="255" name="item_description[]" id="description" data-required="1" class="form-control calculate description" required/>
<input type="text" maxlength="255" name="item_amount[]" data-required="1" class="form-control calculate rate" autocomplete="off" required/>
So when I start typing int he ITEM_SKU field, I get my autocomplete options - which is working fine. And when I click on it, it must update the description and item_amount textfields.
Now if I change the field class to an ID, and the javascript to example
<input type="text" maxlength="255" name="item_amount[]" id="rate" data-required="1" class="form-control calculate" autocomplete="off" required/>
It works.
But because I have an "add more fields" button - I have to have multiple fields with the same ID.
How can I get the current line's fields updated with ui.item.description and ui.item.rate?
http://i.share.pho.to/7945c43f_o.jpeg
I would use a hidden div as a library for your cloned elements...
Also, remove the ID after the obj is cloned.
something like (untested)
$(".add-row").click(function (e) {
e.preventDefault();
var cloned = $('#hidden').find('#tr').clone().removeAttr('id');
cloned.appendTo('#invoice_table');
cloned.find('.item_sku').autocomplete(options);
});
Edit: Simplify jsfiddle example (tested) http://jsfiddle.net/c5ajonav/3/
I have 13 input text boxes simply to collect information from user. I'm trying to add a little bit of logic that when user clicks next button check to see if input field is blank and if so place a X image after the textbox. Where I'm getting up up at is if I put text in the box then it will not outline the box in red but still places an X after the form.
I've tried using the $.each() and $.filter()
Here is the js:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
var inputs = $(":input").filter(function () {
return this.value === "";
});
if (inputs.length) {
$(inputs).css('border-color', 'red').after(invalid);
console.log(inputs.length);
}
});
Here is some of the input text boxes not all :
<label>First Name:</label>
<input type="text" name="First Name" class="txtbox" id="firstName" />
<label>Last Name:</label>
<input type="text" name="Last Name" class="txtbox" id="lastName" />
<label>Email Address:</label>
<input type="text" name="Email Address" class="txtbox" id="email" />
<label>Company:</label>
<input type="text" name="Company" class="txtbox" id="company" />
Try this:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
$(":input").each(function () {
if($(this).val() == '' ){
$(this).css({borderColor: 'red'}).after(invalid);
}
});
});
Note that if you had not previously set other border css parameters, the color may not work. So this pattern can take care of it in that case:
.css({border: '1px solid red'})
Now, :input is a bit broad and therefore inefficient. Therefore, its better to say:
$(':text', '#container').each(...
Where #container is, of course, the container of all your inputs.
Please, consider use jquery Validate, you can see examples here and documentation here