Set focus on input after page loading in Jquery? - javascript

I am trying to set focus on the first input of form after load page but it doesn't work!
$("#New").click(function() {
var area = $(this).attr("name");
$("#txtHint").hide().load("add_data.php?area=" + area, function(){
$(this).closest("form").find(':input:enabled:visible:first').focus();
}).fadeIn('slow');
//$(this).closest("form").find(':input:enabled:visible:first').focus();
});
Can I have some help?

suppose you have this code:
<form id="formId">
<input type="text">
<input type="text">
<input type="text">
</form>
write this JQuery code:
$("#formId input:text").first().focus();
wrapped with the
$(document).ready();

Your code rewrite as
$("#txtHint").hide().load("add_data.php?area=" + area, function(){

try:
$(document).ready(function(){
$("#inputId").focus();
});

Related

Can not select the radio button with value using jquery

I need one help .I need to check radio button and set the value using Jquery/Javascript.I did something but its not working.
<input type="radio" name="con" id="con" value="" onClick="checkCon();">Country
<button type="button" id="btn">Check</button>
document.getElementById('btn').onclick=function(){
var condata='123';
$("input[name=con][value=" + condata+ "]").prop('checked', true).trigger('click');
}
Here when user will click on check button it can not check the check box and can not set the value.Please help me.
try this, it can help:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var condata = '123';
$("#btn").click(function(){
$('#con').val(condata).prop('checked', true).trigger("click");
});
});
function checkCon()
{
alert($('#con').val());
}
</script>
</head>
<body>
<input type="radio" name="con" id="con" value="" onClick="checkCon();">Country
<button type="button" id="btn">Check</button>
</body>
</html>
this code is working I've checked this, you can also try
its probably because you are mixing up javascript and jQuery , either you should use jQuery or JavaScript. Hope the above code help. and make sure you have added jQuery library before using this code
You have to use the cotes.
Reference
$("input[name='con'][value='" + condata+ "']").prop('checked', true).trigger('click');
It's clear that there's no radio button with value '123'.
Note 1 : You don't need to prop and trigger at the same time, just prop or trigger the click events.
$("input[name=con][value=" + condata+ "]").trigger('click');
Note 2 : Click trigger automatically change the radio button properties. If you want to force it checked, do something like this.
$("input[name=con][value=" + condata+ "]").on('click', function(e) {
e.preventDefault();
$(this).prop('checked', true);
});
<input type="radio" name="con" id="con" value="" onClick="checkCon();">
Your radio button don't have value="123"
That is why it's not getting checked.
This is the corrected tag
<input type="radio" name="con" id="con" value="123" onClick="checkCon();">
and it will work as intended

Input text value into a div?

Say I have this text box:
<input type="text" id="myText" placeholder="Enter Name Here">
Upon pressing a button, I would like to send the value entered into this div:
<div id="text2"></div>
I'm not entirely sure how to do this. Do I create a function and call it to the div? How would I do that?
Could someone clear this up for me? Thanks.
Add an onclick to your button:
<input type="button" id="somebutton" onclick="addText()">
Then write the javascript:
function addText()
{
document.getElementById('text2').innerHTML = document.getElementById('myText').value;
}
Solution using onclick event:
<input type="text" id="myText" placeholder="Enter Name Here">
<div id="text2"></div>
<button id="copyName" onclick="document.querySelector('#text2').innerHTML = document.querySelector('#myText').value" value="Copy Name"></button>
JSFiddle: http://jsfiddle.net/3kjqfh6x/1/
You can manipulate the content inside the div from javascript code. Your button should trigger a function (using the onclick event), which would access the specific div within the DOM (using the getElementById function) and change its contents.
Basically, you'd want to do the following:
<!DOCTYPE html>
<html>
<script>
function changeContent() {
document.getElementById("myDiv").innerHTML = "Hi there!";
}
</script>
<body>
<div id="myDiv"></div>
<button type="button" onclick="changeContent()">click me</button>
</body>
</html>
Mark D,
You need to include javascript to handle the button click, and in the function that the button calls, you should send the value into the div. You can call $("#myText").val() to get the text of the text box, and $("#txtDiv").text(txtToAppend) to append it to the div. Please look at the following code snippet for an example.
function submitTxt() {
$("#txtDiv").text($("#myText").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myText" placeholder="Enter Name Here">
<button onclick = "submitTxt()"> Submit </button>
<div id="txtDiv"> </div>
HTML could be:
<input type='text' id='myText' placeholder='Enter Name Here' />
<input type='button' id='btn' value='click here' />
<div id='text2'></div>
JavaScript should be external:
//<![CDATA[
var pre = onload; // previous onload? - window can only have one onload property using this style of Event delegation
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
var text2 = E('text2'); // example of Element stored in variable
E('btn').onclick = function(){
text2.innerHTML = E('myText').value;
}
}
//]]>
I would recommend using a library like jQuery to do this. It would simplify the event handling and dom manipulation. None the less, I will include vanilla JS and jQuery examples.
Assuming the HTML in the body looks like this:
<form>
<input id="myText" type="text" placeholder="Enter Name Here">
<br>
<input type="submit" id="myButton">
</form>
<div id="text2"></div>
The Vanilla JS example:
//Get reference to button
var myButton = document.getElementById('myButton');
//listen for click event and handle click with callback
myButton.addEventListener('click', function(e){
e.preventDefault(); //stop page request
//grab div and input reference
var myText = document.getElementById("myText");
var myDiv = document.getElementById("text2");
//set div with input text
myDiv.innerHTML = myText.value;
});
When possible avoid using inline onclick property, this can make your code more manageable in the long run.
This is the jQuery Version:
//Handles button click
$('#myButton').click(function(e){
e.preventDefault(); //stop page request
var myText = $('#myText').val(); //gets input value
$('#text2').html(myText); //sets div to input value
});
The jQuery example assumes that you have/are adding the library in a script tag.

how to read input from text input field and put input into div

I am trying to run this code.
the code should take a string as input and put that input to a div and calculate the width of the div.
here is code i have used.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" value="" name="input">
<input type="submit" value="submit" name="submit">
<script>
var elem = '<div id="divitem" style="width:auto;"></div>';
$('body').append($(elem));
$("submit").click(function () {
var text = $(this).text();
value= $("input").val(text);
alert(value);
});
</script>
</body>
</html>
but i am not getting any output. how to do this?
please help me.
Try this paps!
Demo
This is similar to your problem.
HTML
<div id="container">
<input type="text" value="" id="inputtext">
<input type="button" value="submit" id="submit">
</div>
Script
$(function(){
var elem = '<span id="divitem"></span>';
$('#container').append($(elem));
$("#submit").click(function () {
$('#divitem').html($('#inputtext').val());
alert($('#divitem').width());
});
});
Here's a fiddle
To obtain value from a text field you need to use this,
$('input[name="input"]').val();
and not .text()
To answer your second question, you need to use this
$('#divitem').attr('style');
or
$('#divitem').attr('width');
The problem is here:
$("submit").click(function () {
var text = $(this).text();
value= $("input").val(text);
alert(value);
});
$(this) refers to the element that you select, which is the submit button.
You should replace the first line of the function with
$('input[name="input"]').text();
Finally, setting the html content of the div, will be done this way:
elem.html(test);
Hope this helps. Have a great day.
I have created a jsFiddle for your question http://jsfiddle.net/N4zFZ/ in JavaScript
You can calculate width by
`var width = $('#divId').attr('width');`

get text area and text field data - jquery

I have 2 text areas in my page as;
<input type="text" id="a1"/>
<textarea id="b2"></textarea>
<a id="button">button</a>
When user click the button link, I want to alert the data entered in a1 and b2.
How can I do this?? Here is there demo
Thanks in advance...:)
blasteralfred
$(document).ready(function() {
$('#button').click(function(e) {
e.preventDefault();
alert($('#a1').val());
alert($('#b2').val());
});
});
dont use same id a1 for <a id="button">button</a> and <input type="text" id="a1"/>
and you can use jquery val() function to get value
alert($('#a1').val());
alert($('#b2').val());
Do like this :
window.alert($("#a1").val());
window.alert($("#a2").val());
Your code should appear likt this :
<input type="text" id="a1"/>
<textarea id="b2"></textarea>
<a id="button" onclick="window.alert($('#a1').val());window.alert($('#a2').val());return false;">button</a>

jQuery adding HTML element using before()

Here's my code:
$(document).on("click", "#add", function() {
console.log("clicked");
$(this).before('<lable>'+ current +'.</label><input type="text", id="option"><br>');
current = nextChar(current);
var string = $("label:last").text();
console.log(string);
});
using this, I'm trying to add some HTML element. But the behavior isn't exactly what I want it to be. The result should be something like
<lable>c.</lable>
<input type="text", id="option">
<br>
but everything is wrapped inside of lable and shows
<lable>c.<input type="text", id="option">
<br></lable>
I don't know why this is happening.
Put your element in a div with a certain id like myid
HTML:
<div id='myid'>
<input type="text" id="option">
</div>
JQUERY:
$(document).on("click", "#add", function() {
$('#myid').prepend('<lable>'+ current +'.</label>')
});

Categories