How to pass input value to button variable with jQuery - javascript

This is the code I am using which doesn't work. I want the value of "data-page" in the "button" to receive the value of the input field when the input field is blurred. The "data-page" is a number. Appreciate your assistance, thanks.
<input type="text" value="" id="findR" />
<button id="findRB" data-page="" >Find Record</button>
<script>
$(document).ready(function() {
$( '#findR' ).blur(function() {
$('#findRB[name=data-page]').val($('#findR').val());
})
});
</script>

data-page is a data-* attribute and not name attribute.
$( '#findR' ).blur(function() {
$('#findRB').data('page',this.value);
})
I would recommend using data(), but you won't see the actual attribute change as the value is stored in the DOM object. If you wish so, use attr()
$( '#findR' ).blur(function() {
$('#findRB').attr('data-page',this.value);
})
Also, use this.value instead of $( '#findR' ).val() to set the value.

Here is a working example:
$(document).ready(function() {
$( '#findR').blur(function() {
$('#findRB').attr('data-page', $('#findR').val());
});
});
JSFiddle: http://jsfiddle.net/jyq2bm4r/

To set data attribute in element, you can use
$('findRB').attr('data-page', $('#findR').val());

Hello can you please test this. This is working fine for me::
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type="text" value="" id="findR" />
<button id="findRB" data-page="" >Find Record</button>
<script>
$(document).ready(function() {
$( '#findR' ).blur(function() {
var inputVal = $('#findR').val();
document.getElementById("findRB").setAttribute("data-page", inputVal);
})
});
</script>
</body>
</html>

Related

Assign one textbox selected value to another one in JQuery Auto Complete

I am trying to assign one textbox's selected value to another textbox. I am using below script for this. When I am checking in Firefox Browser Console, I noticed that state variable (c_search.php?state) has no value.
Please let me know what changes I need to do with script.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#statename" ).autocomplete({
source: 'search.php'
});
});
$(function() {
$( "#cityname" ).autocomplete({
source: 'c_search.php?state='+$('#statename').val()
});
});
</script>
<form>
<div class="ui-widget">
<label for="statename">State: </label>
<input id="statename">
<label for="cityname">City: </label>
<input id="cityname">
</div>
</form>
I think you are looking for autocompletechange change method like this-
Also your input field declaration looks weird to me.Keep in mind you should not load DOM multiple times like the way you are doing now.
It should be
<input type="text" id="statename" class="inputLarge" />
And autocomplete change event is
$(document).ready(function(){
$('#statename').on('autocompletechange change', function () {
$("[name='some text box']").val(this.value);
PopulateCitybyState(this.value);
}).change();
});
function PopulateCitybyState(statename){
$( "#cityname" ).autocomplete({
source: 'c_search.php?state='+ statename
});
}

How can I use val of "contenteditable 1" to update "contenteditable 2" with "keyup" event?

I am struggling to achieve a solution to my problem:
<div id="editable-content">
<span id="static1" class="non-editable">1-800-</span>
<span class="edittext" id="block1" class="editable" placeholder="HELLO" contenteditable="true"autofocus></span>
<div id="editable-content">
<span id="static2" class="non-editable">1-800-</span>
<span class="edittext" id="block2" class="editable" placeholder="HELLO" contenteditable="true"autofocus></span>
I want to use the value of #block1 to update #block2 on a keyup event.
Means: As soon as user types into #block1 the same text simultaneously appears in #block2.
This my JS so far but it doesn't do what i want it to do:
$( function() {
function updateTextarea() {
$( '#block2' ).val( $( '#block1' ).val());
}
$( '#block1' ).keyup( updateTextarea );
});
What do I do wrong? Thank you so much in advance!!
change this line:
$( '#block2' ).text( $( '#block1' ).text());
Only form elements does have the value attribute so that can be get via .value from javascript or .val() method of jQuery.
Although contenteditable attribute lets you enter text in the element but that is just textContent of that element not value.
Try with this its a sample code hope this will help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type="text" id="ch1" value="" /><br/>
<input type="text" id="ch2" value="" />
<script>
$(document).ready(function(){
$("#ch1").keyup(function(){
var test = $("#ch1").val();
$("#ch2").val(test);
});
});
</script>
</body>
</html>

Adding multiple users jQuery

I wanne add multiple users in jQuery. I have the following code but it doesnt work. Does someone knows why?
Thanks!
<script type="text/javascript">
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.html('Gebruiker: <input type="text" name="user[]"><br />');
$(newuser).appendTo('#users');
});
});
</script>
<section>
<span id="add">Nieuwe gebruiker</span><br /><br /><br />
<form action="" method="" id="users">
<input type="submit" name="send" value="verzenden">
</form>
Use simply string in your variable, no jQuery .html() function required. Then change your .appendTo() function to .append() and define the element in jQuery selector.
$( document ).ready(function() {
$('#add').click(function(){
var newuser = 'Gebruiker: <input type="text" name="user[]"><br />';
$('#users').append(newuser);
});
});
In case you are wondering why your current code is not working:
string starting with anything other than "<" is not considered HTML string in jQuery 1.9
http://stage.jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring
Therefore this code will work fine (as it starts with <):
$( document ).ready(function() {
$('#add').click(function(){
$('<input type="text" name="user[]">').appendTo('#users');
});
});
And for your current code to work use $.parseHTML:
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.parseHTML('Gebruiker: <input type="text" name="user[]"><br />');
$(newuser).appendTo('#users');
});
});
$.parseHTML is used to parse the arbitrary HTML so that it is not taken as a selector by jQuery.
Edit: adding delete feature:
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.parseHTML('<div><label>Gebruiker:</label> <input type="text" name="user[]"><span class="delete">Verwijderen</span></div>');
$(newuser).appendTo('#users');
});
$(document).on('click','.delete', function(){
$(this).parent('div').remove();
console.log('reached');
});
});
jsFiddle Example: http://jsfiddle.net/RtTpN/
yep, there is nothing called $.html() in jQuery. html is a method of set of nodes instead.
You can do something like:
$(document).ready(function () {
$('#add').click(function () {
$('#users').append('Gebruiker: <input type="text" name="user[]"><br />');
});
});
Working Demo

Doesn't set event on input when click button

I wrote function, which control input text. When I click button, in Input set value. In that time I need that function 'StartDate1.change' control change input value. So if this is value no equals 12/24/2013 -> clear field. But this is function doesn't work. Can you help me fix it?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="demo_form.asp">
Date: <input type="text" name="Phone" title="title1" value="">
<input id="target" class="ms-ButtonHeightWidth" type="button" accesskey="O"
value="Add date" >
</form>
<script type="text/javascript">
$(document).ready(function(){
$( "#target" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.val('12/25/2013');
});
var StartDate1=$('[title="title1"]');
StartDate1.change(function(event){//doesn't get here
window.setInterval(function(){
if($(event.target).val()==='12/24/2013')
{
//some code
}else
{
$(event.target).val('');
}
});
});
});
</script>
</body>
</html>
This is example on fidler:
Fiddle
If you need to control value in input field use keyup handler
http://jsfiddle.net/yPYDJ/5/
The onchange event only fires when the value changes and the input loses focus.
You can trigger it manually changing your code like this:
$( "#target" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.val('12/25/2013');
StartDate.change();
});
The function passed to window.setInterval is called repeatedly. So value set by the function on button click is reset immediately.
var timeFunction;
$( "#targetb" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.off('change');
StartDate.val('12/25/2013');
StartDate.on('change',function(event){
console.log("lol");
timeFunction=window.setInterval(clearInput,2000);
});
});
function clearInput(){
var StartDate=$('[title="title1"]');
if(StartDate.val()==='12/24/2013')
{
//some code
}else
{
StartDate.val('');
window.clearInterval(timeFunction);
}
}
I have created a new fiddle http://jsfiddle.net/yPYDJ/4/. Check this and accept it ifthis is what you expected.

Disable a jqueryui datepicker

I have a jqueryui datepicker associated with a input text. When i make the input textbox readonly i dont want the datepicker to show up . Is that possible? I would be setting the readonly property to true or false from the code.
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
j$('#chkBoxb').click(function(){
var paramChangeBoxes = j$('input:checkbox.change');
if (j$(this).is(':checked')) {
paramChangeBoxes.removeAttr('checked');
j$('#chkBoxb').attr('checked', 'checked');
j$('#CompleteDate').attr('readonly',false);
j$("#CompleteDate").datepicker();
}
else
{
j$('#CompleteDate').attr('readonly',true);
$( "#CompleteDate:not([readonly])" ).datepicker();
}
});
Updated the code
disable it like this:
$('#dateSelector').datepicker('disable');
and enable it like this:
$('#dateSelector').datepicker('enable');
Here's a working sample: http://jsfiddle.net/CG64h/8/
I ran into this today and unfortunately, the answers provided above did not work. Read the datepicker code, here's how it's done in jqueryui 1.10:
$(selector).datepicker("option", "disabled", true);
Here you go:
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
<script>
$('#chkBoxb').click(function(){
if ($(this).is(':checked')) {
$('#CompleteDate').attr('readonly',false)
.datepicker();
} else {
$('#CompleteDate').attr('readonly',true)
.datepicker("destroy");
}
});
</script>
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDisabled.html
I believe you should use 2 different textbox's and toggle them as needed so that only one is shown at a time. The first one as plain text box and the second one with jquery Datapicker applied.
if($("#").attr("enabled")=="false") {
$("#").attr("disabled","true");
}
Just change the selector and add :enabled
$( "#datepicker:enabled" ).datepicker();

Categories

Resources