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
});
}
Related
UPDATE:
Somehow the just work fine after I tried it..
UPDATE
I'm using .click() function on my javascript, but it doesn't work.
Here is my JS code:
src="jquery.js";
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var institutionID, acadCareerID;
$(document).ready(function(){
getInstitution();
institutionID = $( "select#institution option:checked" ).val();
if(institutionID == null){
institutionID = 1;
}
getAcadCareerByInstitution(institutionID);
acadCareerID = $( "select#acadCareer option:checked" ).val();
if(acadCareerID == null){
acadCareerID = 1;
}
getPeriodByAcadCareerAndInstitution(acadCareerID);
getDepartmentByAcadCareer(acadCareerID);
$("select#institution").change(function(){
institutionID = $( "select#institution option:checked" ).val();
getAcadCareerByInstitution(institutionID);
})
$("select#acadCareer").change(function(){
acadCareerID = $( "select#acadCareer option:checked" ).val();
getPeriodByAcadCareerAndInstitution(acadCareerID);
getDepartmentByAcadCareer(acadCareerID);
})
$("div#search").click(function(){
alert("The paragraph was clicked.");
console.log("abc");
});
});
all functions like getInstituion(), getAcadCareerByInstitution(institutionID) etc are ajax call.
Here is my HTML code:
<form action="doInsertSchedule" method="POST" enctype="multipart/form-data">
{{csrf_field()}}
<div class="form-group">
<label for="institution">Institution</label>
<select name="institution" class="form-control" id="institution">
</select>
</div>
<div class="form-group">
<label for="acadCareer">Academic Career</label>
<select name="acadCareer" class="form-control" id="acadCareer">
</select>
</div>
<div class="form-group">
<label for="period">Period</label>
<select name="period" class="form-control" id="period">
</select>
</div>
<div class="form-group">
<label for="department">Department</label>
<select name="department" class="form-control" id="department">
</select>
</div>
<div class="form-group">
<label for="date">Deadline Date</label>
<input type="date" class="form-control" id="deadline" placeholder="Deadline Date" name="deadline">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<div id="search" class="btn btn-default">Search</div>
</form>
I already put jquery for my Master Layout (Laravel 5)
<head>
<link rel="stylesheet" type="text/css" href="{{url()}}/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{url()}}/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="{{url()}}/js/tools.js"></script>
<script src="{{url()}}/js/bootstrap.min.js"></script>
<title>BINUS - #yield('title')</title>
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
I want the Search Button / Div to do something when I click. I can't see what's wrong here.
I already tried <div> to <button> but it just will work like submit. I also already tried to put event.preventDefault() at my JS code, but it didn't work too.
Maybe you can try with event delegation...
$(document).ready(function(){
$("body").on("click", "#search", function(){
alert("The paragraph was clicked.");
console.log("abc");
});
});
You code works OK. You need to write the jquery library in the final, just before of </body>
...
<script type="text/javascript" src=".../jquery.js"></script>
</body>
Example it works ok!: Example Jsfiddle
<button type="submit" class="btn btn-default">Submit</button>
<div id="search" class="btn btn-default">Search</div>
This looks like it will render on the page as two buttons. Your ID here is attached to the div, not to the button, they should both appear to look like buttons providing bootstrap is loaded, but only the div with "search" as the content will do anything.
This is the only thing that appears odd, the only other problem is you are not loading your jquery as stated elsewhere.
I don't have the reputation to comment, but have you added a jquery library before your script?
Secondly, if you did and the items on the page are loaded after the document has loaded you will need to change your code up, for instance:
Give your form an id
<form action="doInsertSchedule" method="POST" enctype="multipart/form-data" id="postForm">
Then in your jquery script
<script>
$('#postForm').on('click', '#search', function(){
alert("The paragraph was clicked.");
console.log("abc");
});
</script>
The above will allow the javascript to run on items that are bought in after document load, however it is important you set it on a parent element that is avaiable at document load
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>
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>
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.
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();