I have form which contain Add more field button ,which dynamically adds new datepicker's whenever i click Add More field button.
The problem is ,Currently date field in the datepicker display the current date.
But when i add new Datepicker by clicking on the Add more Field Button , it adds one more Datepicker but this time it resets the previous value of Datepicker which i had set manually.
Below is my code:
html
<div id="container">
<input class="datepick" type="text"></input><button class="add">Add</button>
<input
</div>
javascript
$(".datepick").datepicker();
$(".datepick").datepicker().datepicker("setDate", new Date());
$(document).on('click', '.add', function() {
var appendTxt = '<input class="datepick" type="text" /><button class="add">Add</button>';
$("#container").append(appendTxt);
$(".datepick").datepicker();
$(".datepick`enter code here`").datepicker().datepicker("setDate", new Date());
});
Because of this line:
$(".datepick").datepicker();
All inputs which have the class .datepick will reinitialize. You should do something like this:
$(".datepick").last().datepicker();
or
$(".datepick:last").datepicker();
after you add the new input.datepick. This was the simple solution.
If you have any other .datepick's in another container after this container, this won't work too. You should be very specific about the appended datepicker element.
You should do this :
var appendTxt = '<input class="datepick" type="text" /><button class="add">Add</button>';
var newInput = $(appendTxt).appendTo("#container");
newInput.datepicker();
newInput.datepicker().datepicker("setDate", new Date());
I create a datepicker and ask to launch an alert on change :
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
change: function() {
var value = this.value();
alert(value); //value is the selected date in the datepicker
}
});
</script>
No problem with this, it's working.
Now I try to make a function that take the value of the datepicker, and display it on an alert :
function Test(){
var toto = $("#datepicker").data("kendoDatePicker");
var value = toto.value();
alert(value);
}
And modify the the datepicker like this :
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
change: Test()
});
</script>
And it's not working anymore. The "Test" method is launched without changes on the datepicker, and the datepicker now look like this :
datepicker
Any ideas ?
Change the last part to this:
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
change: Test
});
</script>
You were setting the change event to return value of the Test() function
The code below is made to detect the name of the input method user focus in , the problem is it alerts the same name for all textboxes.
var huntedTextBox;
//focus in any textfield to get its name into the vairable.
$("input").focus(function() {
huntedTextBox = $("input").attr('name');
alert(huntedTextBox);
});
Here is a Fiddle for the code.
Thanks.
Just doing a search for $('input') will return all <input>s in the document. Then, doing .attr() will get the attribute for the first.
To get the attribute of the <input> that was clicked, use $(this).attr('name');
You need to use this for selecting that particular textbox that's focused on...
Here's a snippet:
var huntedTextBox;
//focus in any textfield to get its name into the vairable.
$("input").focus(function() {
huntedTextBox = $(this).attr('name');
alert(huntedTextBox);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="textBox" />
<input type="text" name="Bader" />
huntedTextBox = $(this).attr('name');
How can i get a choosen tag value to change my URL? The code works fine but only the choosen tag values are missing. I think my mistake is the "+textbox.value" but i've no idea how to handel that.
<body>
<label for="tags">Titel: </label>
<input type="text" id="tags" onchange="adjustLink();" />
Filtern
<script type="text/javascript">
function adjustLink() {
var link = document.getElementById("filterLink");
var textbox = document.getElementById("tags");
link.href = "AllItems.aspx?FilterName=Title&FilterMultiValue=" + textbox.value;
}
</script>
</body>
Your textbox variable contains the value of the input, not the input element. So there is nothing like textbox.value. So you can directly use like this
link.href = "AllItems.aspx?FilterName=Title&FilterMultiValue=" + textbox
Js Fiddle Demo
I would like to assign value of product of two integer numbers into a hidden field already in the html document.
I was thinking about getting the value of a javascript variable and then passing it on a input type hidden.
I'm having a hard time to explain but this is how it should work:
Script Example
<script type="text/javascript">
function product(a,b){
return a*b;
}
</script>
above computes the product and i want the product to be in hidden field.
<input type="hidden" value="[return value from product function]">
How is this possible?
You could give your hidden field an id:
<input type="hidden" id="myField" value="" />
and then when you want to assign its value:
document.getElementById('myField').value = product(2, 3);
Make sure that you are performing this assignment after the DOM has been fully loaded, for example in the window.load event.
if you already have that hidden input :
function product(a, b) {
return a * b;
}
function setInputValue(input_id, val) {
document.getElementById(input_id).setAttribute('value', val);
}
if not, you can create one, add it to the body and then set it's value :
function addInput(val) {
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('value', val);
document.body.appendChild(input);
}
And then you can use(depending on the case) :
addInput(product(2, 3)); // if you want to create the input
// or
setInputValue('input_id', product(2, 3));
You could do that like this:
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
document.getElementById('myvalue').value = product(a,b);
</script>
<input type="hidden" value="THE OUTPUT OF PRODUCT FUNCTION" id="myvalue">
Hidden Field :
<input type="hidden" name="year" id="year">
Script :
<script type="text/javascript">
var year = new Date();
document.getElementById("year").value=(year.getFullYear());
</script>
Check out this jQuery page for some interesting examples of how to play with the value attribute, and how to call it:
http://api.jquery.com/val/
Otherwise - if you want to use jQuery rather than javascript in passing variables to an input of any kind, use the following to set the value of the input on an event click(), submit() et al:
on some event; assign or set the value of the input:
$('#inputid').val($('#idB').text());
where:
<input id = "inputid" type = "hidden" />
<div id = "idB">This text will be passed to the input</div>
Using such an approach, make sure the html input does not already specify a value, or a disabled attribute, obviously.
Beware the differences betwen .html() and .text() when dealing with html forms.
add some id for an input
var multi = product(2,3);
document.getElementById('id').value=multi;
<script type="text/javascript">
function product(x,y)
{
return x*y;
}
document.getElementById('myvalue').value = product(x,y);
</script>
<input type="hidden" value="THE OUTPUT OF PRODUCT FUNCTION" id="myvalue">
//prompts for input in javascript
test=prompt("Enter a value?","some string");
//passes javascript to a hidden field.
document.getElementById('myField').value = test;
//prompts for input in javascript
test2=prompt("Enter a value?","some string2");
//passes javascript to a hidden field
document.getElementById('myField').value = test2;
//prints output
document.write("hello, "+test+test2;
now this is confusing but this should work...