I have the ajax, which runs when the user writes something ind input id=2
HTML:
<input id="2" type="text" onkeyup="posttitulo(this.value)" />
SCRIPT:
function posttitulo(value){
$.post("getdata/posttitulo.php",{partialStates:value});
}
The code works perfectly.. The problem is that I have the javascript function which onclick copies value of another input id=1, in this case id=2 has the value without typing and function posttitulo(value) doesn't work..
So I need Ajax to be executed if:
1) User writes something onkeyup="posttitulo(this.value);
2) the value of id=1 is copied to id=2..
Hope that I explained the problem..
Thanks in advance
Do $('#2').keyup(); after you copied a value in the function, which fires onclick.
create an event listener change() on id=2:
$(document).ready(function(){
$("#2").change(function(){
var value=$("#2").val();
$.post("getdata/posttitulo.php",{partialStates:value});
});
});
You could go with firing the event on the input or recycle the function you already declared. When the button is clicked read the value of the id2 Element and call the posttitulo function with the value as argument.
function posttitulo(value){
console.log('AJAX POST:', value);
}
function buttonClicked() {
var value = document.getElementById('id2').value;
posttitulo(value);
}
Fiddle
May be this will work in your case.
<input id="1" type="text" onclick="yourreplacefunction(this.value,2)" />
$(document).on("change keyup", "input", function() {
$.post("getdata/posttitulo.php",{partialStates:value},function(response){
//Do with your response
});
});
function yourreplacefunction(value,toid) {
$('#'+toid).val(value);
}
Related
I have a checkbox on my html view which looks like that:
<input type="checkbox" id="hasPrereqBlock" name="hasPrereqBlock" onchange="hasPrereqBlockHandler(this)">
And the function that gets triggered by that, looks like that:
function hasPrereqBlockHandler(cb){
if (cb.checked){
$("#campaignPrereqBlockRevDiv").show();
$("#instruction_1_RevDiv_M").hide();
$("#instruction_2_RevDiv").show();
} else {
$("#campaignPrereqBlockRevDiv").hide();
$("#instruction_1_RevDiv_M").show();
$("#instruction_2_RevDiv").hide();
}
}
When i load the page i want to execute this function and give it a reference to the checkbox, so it displays only the wanted stuff, due to the status of the checkbox, so i have this function:
$(document).ready(function() {
hasPrereqBlockHandler($("#hasPrereqBlock"));
});
I also tried it with document.getElementById("hasPrereqBlock") instead of $("#hasPrereqBlock"), but every of thos 3 elements are shown and they are only hidden when i click the checkbox.
Why does my code not work?
function hasPrereqBlockHandler(cb) {
if (cb.checked) {
$("#campaignPrereqBlockRevDiv").show();
$("#instruction_1_RevDiv_M").hide();
$("#instruction_2_RevDiv").show();
} else {
$("#campaignPrereqBlockRevDiv").hide();
$("#instruction_1_RevDiv_M").show();
$("#instruction_2_RevDiv").hide();
}
}
$(document).ready(function() {
console.log("document ready");
hasPrereqBlockHandler($("#hasPrereqBlock"));
});
#campaignPrereqBlockRevDiv,
#instruction_2_RevDiv {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="hasPrereqBlock" name="hasPrereqBlock" onchange="hasPrereqBlockHandler(this)">
<div id="instruction_1_RevDiv_M">Review 1</div>
<br>
<div id="instruction_2_RevDiv">Review 2</div>
<br>
<div id="campaignPrereqBlockRevDiv">Campaing</div>
Your jQuery object has no .checked. If you console.log cb.checked it returns undefined instead of a boolean, so you know there is something wrong. .checked doesn't exists on a jQuery checkbox object.
Change:
cb.checked
Into:
cb.prop('checked')
You're mixing JavaScript and jQuery! As dcangulo stated, change the element you're sending to the function in the document ready part:
$(document).ready(function() {
hasPrereqBlockHandler($("#hasPrereqBlock").get(0));
});
get returns the element at the given index, and since there is one (you're using an ID, so I assume there is just one) it sends the first. The element sent to the function is the same as the this value that gets send when you check the input.
more information about the get function
Hello I would like the text inside an input element to highlight upon initial click. However my function does not seem to be working. I have researched the issue and seen that there are some issues with jquery 1.7 and below. I have adjusted it to account for this any it still does not work.
Any help would be great. Thanks!
HTML
<input type="text" value="hello"/>
JS
$scope.highlightText = function() {
$("input[type='text']").on("click", function() {
$(this).select();
});
https://plnkr.co/edit/b7TYAFQNkhjE6lpRSWTR?p=preview
You need to actually call your method at the end of controller, otherwise the event is not bound.
https://plnkr.co/edit/a0BlekB8qTGOmWS8asIx?p=preview
... other code ...
$scope.highlightText = function () {
$("input[type='text']").on("click", function () {
$(this).select();
var test = $(this).parent();
console.log(test);
});
$("textarea").on("click", function () {
$(this).select();
});
};
$scope.highlightText();
};
To select the text inside an input you would simply call this.select() from onclick like shown below
<input type="text" onclick="this.select()" value="hello"/>
would you explain please, why this code is showing alert window with the text at the end of radio element:
<script>
function markReply(el){
alert(el.nextSibling.nodeValue);
}
$(document).ready(function(){
markReply();
});
</script>
and this one does not:
<script>
function markReply(el){
return el.nextSibling.nodeValue;
}
$(document).ready(function(){
var msg = markReply();
alert(msg);
});
</script>
there are 4 optional answers selected by radio element, like:
<input type="radio" name="choise" onclick="markReply(this);"/>....some text
Thank you!
The second script just returns the value, without doing anything with it.
Note that in both cases, the call from the document ready function is useless, and probably produces an el is not defined error in the console.
You're not passing any parameters to the markReply() function when you created a variable for it.
Try this:
var msg = markReply(el);
The script that does not alert the message is not working because the parameter of the function markReply is not there when the jquery is loaded.
HTML
<input type="radio" name="choise" id="choise"/>....some text
JS
$(document).ready(function(){
$("#choise").click(function () {
alert(markReply(this));
});
});
function markReply(el){
return el.nextSibling.nodeValue;
}
http://jsfiddle.net/j4sgdton/
I've got a small piece of code here
<label for="pass">Password</label>
<input type="text" id="pass" value="QWERTY">
<button for="pass">Submit!</button>
and jquery action
$("button").click(function(){
var value=$("input[id=pass]").attr("value");
if (value==="QWERTY"){
alert("Good!");
};
and it doesnt work. Do you know how to fix it?
Try this.
$("button").click(function(){
var value=$("input#pass").val();
if ( value === "QWERTY"){
alert("Good!");
}
});
jQuery has it's own built in function for fetching values from input fields.
You should prevent the default action from triggering when the button is clicked (otherwise the form will be submitted, and the JS will not execute). You should also use val() when accessing an input's value.
You should also wrap your code inside the DOMReady handler, to ensure that the DOM is accessible when your script is run.
Here's an updated version of your code:
$(function() {
$("button").click(function(e) {
e.preventDefault();
var the_value = $("#pass").val();
if(value == "QWERTY")
{
alert("Good!");
}
};
});
Try this : It's more optimized...
$("button").click(function(e){
e.preventDefault();
var value=$("#pass")[0].value;
if (value==="QWERTY"){
alert("Good!");
};
You can also remove the "for" attribute on the button, it's non correct ;)
Your code should work if you don't forget the }); at last and have put the code into dom ready callback function. The demo.
And you could write it like below:
$("button").click(function(){
if ($('#pass').val()==="QWERTY"){
alert("Good!");
};
});
I think you just have a syntax error. You need to make sure you close your function curly brace and your click close paren.
$("document").ready(function () {
$("button").click(function () {
var value = $("input[id=pass]").attr("value");
if (value === "QWERTY") {
alert("Good!");
}
});
});
Example:
http://jsfiddle.net/pandaPowder/5VjeD/3/
I have a <input type="text"> and if user clicks inside it I want to make the content (value) of that box selected. How would I do that?
<input type="text" onclick="select()"/>
Try select method:
document.getElementById("myinput").onclick = function() {
this.select();
};
You can try following code inside a javaScript method, and call the method onClick event of the textbox...
function calledOnClick(){
document.getElementById('test').select();
}
You can try following jQuery code which automatically call on page load
<script>
$(document).ready(function(){
$('input').each(function(){
$(this).click(function() {
this.select();
});
});
$("#return_date").focus();
});
</script>