Below is the html
<input type="text" id="textbox1" />
<input type="text" id="textbox2" />
<input type="text" id="textbox3" />
<input type="text" id="textbox4" />
Change
Change1
We are below code
var textbox = $("input[type='text']");
var textarea = $("<textarea id='textarea' rows='10' cols='35'></textarea>");
$("#change").click(function () {
$("input[type='text']").each(function( index ) {
$(this).hide();
$(textarea).insertAfter(this);
});
});
$("#change1").click(function () {
$('textarea').remove();
$("input[type='text']").show();
});
You don't need to user $() selector for plain HTML like <textarea id='textarea' rows='10' cols='35'></textarea> and also wrong usage of insertAfter, in your case is better to use .after. Here's jsFiddle with solution.
var textbox = $("input[type='text']");
var textarea = "<textarea id='textarea' rows='10' cols='35'></textarea>";
$("#change").click(function () {
$("input[type='text']").each(function( index ) {
$(this).after(textarea);
$(this).hide();
});
});
$("#change1").click(function () {
$('textarea').remove();
$("input[type='text']").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="textbox" />
<input type="text" id="textbox" />
<input type="text" id="textbox" />
<input type="text" id="textbox" />
Change
Change1
since you are not using textarea id in your code, you can remove it
var textarea = $("<textarea rows='10' cols='35'></textarea>");
since as #guruprasadrao has pointed out, id has to be unique.
secondly when user clicks on change again you might not want to keep adding textareas again, so change it to
$("#change").click(function () {
$("input[type='text']").each(function( index ) {
if ( $(this).next().attr( "type" ) != "text" )
{
$(this).next().remove();
}
$(textarea).insertAfter(this);
$(this).hide();
});
});
No need to iterate through each input .Directly use:
$("#change").click(function () {
$("input[type='text']").after($(textarea));
});
Related
I use this code for getting value from text box. But I can't able to get value.
$(function() {
var get = $(".name").val();
$('#test').click(function() {
alert('Textbox:' + get);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" class="name">
<input type="submit" value="click" name="test" id="test">
Get your value when you click on #test.
$(function() {
$('#test').click(function() {
var get = $('.name').val();
alert('Textbox:' + get);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" class="name">
<input type="submit" value="click" name="test" id="test">
The problem was that you were setting the get value at the beginning only, when the input box was empty. You have to update the value when you click on the submit button.
$(function() {
$('#test').click(function() {
let get = $(".name").val();
alert('Textbox:' + get);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" class="name">
<input type="submit" value="click" name="test" id="test">
I am creating a form which I simplified below to get straight to the point, the JS code is to control the placeholder; hiding on focus and reappear on blur, obviously this now works for the input with id('Name') only. How do I apply these functions to all inputs elements DRY without repeating the code for each input.
var x = document.getElementById("Name");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById('Name').placeholder= '';
}
function myBlurFunction() {
document.getElementById('Name').placeholder= 'Name';
}
<div id='card'>
<input id='Name' type='text' placeholder='Name'/>
<input id='Age' type='text' placeholder='Age'/>
<input id='Sex' type='text' placeholder='Sex'/>
<input id='Occupation' type='text' placeholder='Occupation'/>
</div>
Array.from(document.getElementsByTagName("input")).forEach(input => {
input.addEventListener("focusin", focus);
input.addEventListener("focusout", blur.bind(input, input.placeholder));
});
function focus() {
this.placeholder = '';
}
function blur(placeholder) {
this.placeholder = placeholder;
}
<div id='card'>
<input id='Name' type='text' placeholder='Name' />
<input id='Age' type='text' placeholder='Age' />
<input id='Sex' type='text' placeholder='Sex' />
<input id='Occupation' type='text' placeholder='Occupation' />
</div>
Using the this keyword you can access the object which the event was triggered on.
Also you need to preserve the placeholder somehow, in the example above I used bound function but you can chose your own way.
You can also find an example how to specify names manually in revision 2 of this answer.
try to do ike this
<!DOCTYPE html>
<html>
<body>
<div id='card'>
<input id='Name' type='text' placeholder='Name' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Name')" />
<input id='Age' type='text' placeholder='Age' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Age')" />
<input id='Sex' type='text' placeholder='Sex' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Sex')" />
<input id='Occupation' type='text' placeholder='Occupation' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Occupation')" />
</div>
<script>
function myFocusFunction(event) {
var element = event.target.getAttribute('id');
document.getElementById(element).placeholder= '';
}
function myBlurFunction(event,placeHolder) {
var element = event.target.getAttribute('id');
document.getElementById(element ).placeholder= placeHolder ;
}
</script>
</body>
</html>
on blur event we need to pass placeholder string because on focus we set placeholder as " " so, on blur event we can not get placeholder by getAttribute method because it always give null.
You could give the elements a class, and iterate
document.querySelectorAll('.placeholder').forEach(function(el) {
el.addEventListener("focusin", myFocusFunction);
el.addEventListener("focusout", myBlurFunction);
});
function myFocusFunction() {
document.getElementById('Name').placeholder = '';
}
function myBlurFunction() {
document.getElementById('Name').placeholder = 'Name';
}
<div id='card'>
<input id='Name' class="placeholder" type='text' placeholder='Name' />
<input id='Age' class="placeholder" type='text' placeholder='Age' />
<input id='Sex' class="placeholder" type='text' placeholder='Sex' />
<input id='Occupation' type='text' placeholder='Occupation' />
</div>
You can set a common class for the inputs that need this function，for example， ‘add-tip’， and then：
var x = document.querySelectorAll(".add-tip");
for (var i=0;i< x.length;i++) {
x[i].addEventListener("focusin", myFocusFunction);
x[i].addEventListener("focusout", myBlurFunction);
}
function myFocusFunction(e) {
e.target.setAttribute('placeholder','');
}
function myBlurFunction(e) {
e.target.setAttribute('placeholder','Name');
}
I am bit of situation where i needed to update data from text-box (multiple) to Text area.
I have 5 textboxes in which i am entering names and one text area where i am updating automatically according to name change in text boxes.
textbox 1 = "i",textbox 2 = "am",textbox3 = "trying ",textbox4 = "to ",textbox5 = "concatenate"
Then,
Text area should show. - i am trying to concatenate.
Now if i update anything in text area like i changed "trying" to "tried" and then after that i changed something in textbox1 like "I" to "we" then in text area it should not replace the "tried" word again.
I am trying to do this using jquery. Is there any solution for this, please let me know.
Thanks
You can try for this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".inputText").keyup(function(){
$('#result')[0].innerHTML=$('#one').val()+$('#one1').val()+$('#one2').val()+$('#one3').val()+$('#one4').val();
//$("input").css("background-color", "pink");
});
});
</script>
</head>
<body>
<input type="text" class="inputText" id="one"/>
<input type="text" class="inputText" id="one1"/>
<input type="text" class="inputText" id="one2"/>
<input type="text" class="inputText" id="one3"/>
<input type="text" class="inputText" id="one4"/>
<br /><br />
Result:
<textarea id="result"></textarea>
</body>
</html>
Hope this helps. Change any input value and the textarea gets updated.
$(function () {
var arrInitial;
$(".inputField").on('focus', function () {
arrInitial = [];
$(".inputField").each(function () { arrInitial.push($(this).val()); })
});
$(".inputField").on('blur', function () {
//If text area is blank then update all input values
if ($.trim($("#txtArea").val()) === "") {
var inputValues = "";
$(".inputField").each(function () { inputValues += " " + $(this).val(); })
$("#txtArea").val($.trim(inputValues));
}
else {
//Get existing values from text area and split by " "
var arrData = $("#txtArea").val().split(" ");
var arr = arrData.filter(function(v){return v!==''});
var arrNew = [];
$(".inputField").each(function (i) {
if (arr[i] === arrInitial[i]) //Check against initial values in text fields
arrNew.push($.trim($(this).val()));
else
arrNew.push(arr[i]);
});
$("#txtArea").val(arrNew.join(" "));
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="text" id="input1" value="One" class="inputField">
<input type="text" id="input2" value="Two" class="inputField">
<input type="text" id="input3" value="Three" class="inputField">
<input type="text" id="input4" value="Four" class="inputField">
<br/><br/>
<textarea id="txtArea" rows=10 cols=10 value=""></textarea>
I have a form like below;
<form id="myform" name="myform">
<input type="text" class="required" value="" name="qwer" /><br />
<input type="text" value="" name="asdf" /><br />
<input type="text" class="required" value="" name="zxcv" /><br />
<input type="text" value="" name="tyui" /><br />
<input type="text" class="required" value="" name="ghjk" /><br />
<input type="submit" value="Submit" />
</form>
I want to check if the text fields with class="required" is blank or not at the time of submission. If they are blank, I want to change the corresponding blank field's class to error. If all the required fields are not empty, I want to alert the serialized data. I've tried this;
$('#myform input[type=submit]').click(function(e){
e.preventDefault();
var data = $('#myform').serialize();
if($.trim($('#myform input[type=text].required').val()).length == 0){
$(this).addClass("error");
}else{
alert(data);
}
});
How can I do this? Here is the fiddle.
You should loop over every element with the required class.
You are setting the error class on the submit button because you use $(this).addClass(), the $(this) is a reference to the submit button.
$('#myform input[type=submit]').click(function(e){
e.preventDefault();
var data = $('#myform').serialize();
[].slice.call($('#myform input[type=text].required')).forEach(function (elem, index) {
$elem = $(elem);
if($elem.val().length == 0)
$elem.addClass("error");
});
});
Fiddle demo
Fyi: HTML5 comes with a bunch of pseudo-classes to check for invalid form inputs so you don't have to code it by yourself, take a look here if you're interested.
After removing the unnecessary value="" on inputs
You can do this:
$('#myform input[type=submit]').click(function (e) {
e.preventDefault();
var data = $('#myform').serialize();
if ($('.required').is('[value=""]')) {
$('.required[value=""]').addClass("error");
} else {
alert(data);
}
});
Demo
I have a checkbox with a value of U
i want to put this value into a text input when the checkbox is checked.
how can i do this using javascript or jquery? I need to be able to do it on multiple checkboxes and input text fields too
HTML
<input type="checkbox" value="U" id="checkBox"/>
<input type="text" value="" id="textInput" />
JQUERY
$("#checkBox").change(function(){
$("#textInput").val($(this).val());
});
DEMO
Try this,
HTML
<label><input type="checkbox" value="U" />Check</label>
<input type="text" />
SCRIPT
$('input[type="checkbox"]').on('click',function(){
var is_checked=$(this).prop('checked');
var val='';
if(is_checked)
val=this.value;
$('input[type="text"]').val(val);
});
Working Demo
the simpliest way to do this :o)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var checkboxInput = document.getElementById('checkboxInput'),
textInput = document.getElementById('textInput');
checkboxInput.addEventListener('click', UpdateTextInput, false);
};
function UpdateTextInput () {
if(checkboxInput.checked) {
textInput.value = checkboxInput.value;
}
else {
textInput.value = '';
}
}
</script>
</head>
<body>
<input type="checkbox" id="checkboxInput" value="U"/>
<input type="text" id="textInput" />
</body>
</html>
Assuming one textbox is associated with every checkbox like below.
HTML Pattern :
<input type="checkbox" value="test1" id="test1" checked><label>Test</label>
<input type="text" class="text1"id="textbox1" name="textbox1" value="">
jQuery:
$('input[type="checkbox"]').change(function() {
var vals = $(this).val();
if($(this).is(':checked')){
$(this).next().next("input[type='text']").val(vals);
}else{
$(this).next().next("input[type='text']").val("");
}
});
Here is the working demo : http://jsfiddle.net/uH4us/