How can I insert value on <input type="text"> but this element is from append method. Here'is the code
HTML
<input type="email" name="invite_people" placeholder="Invite someone">
Add People
<div class="people_invite">
<!-- Here is <input type="text" name="people_invited" readonly> is added by jquery -->
</div>
Jquery
$(".add_people").click(function () {
var orang_yg_diinvite = $("input type='text' name='invite_people'>").val();
$(".people_invite").append("<input type='text' name='people_invited' readonly>");
});
It success for append <input type="text" name="people_invited" readonly> inside <div class="people_invite">, but I want to make <input type="text" name="people_invited" readonly> have an value from var orang_yg_diinvite . How can I do that? Please help me :)
There's mutliple ways to do that:
Just directly add it to the HTML of the input you're appending
$(".people_invited").append("<input type='text' value='"+orang_yg_diinvite+"'>");
Or
Edit your input's value after it was appended
$(".people_invited").append("<input type='text'>");
$(".people_invited>input").val(orang_yg_diinvite);
Demo:
$(".add_people").click(function () {
var orang_yg_diinvite = $("input[name='invite_people']").val();
$(".people_invited").append("<input type='text' value='"+orang_yg_diinvite+"'>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" name="invite_people" placeholder="Invite someone">
Add People
<div class="people_invited">
</div>
You can pass directly in value attribute of input
$(".add_people").click(function() {
var v = $("input[name='invite_people']").val();
$(".people_invited").append(`<input readonly type="text" value=${v} >`);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" name="invite_people" placeholder="Invite someone">
Add People
<div class="people_invited">
</div>
You can also add value and readonly attribute while appending input string.
$(".add_people").click(function () {
var orang_yg_diinvite = $("input[name='invite_people']").val();
$(".people_invited").append("<input type='text' name='people_invited' value='"+ orang_yg_diinvite +"' readonly />");
});
Create element using jQuery( html, attributes ) method, Here you can set HTML attributes
var input = $("<input/>", { type: 'text', value : orang_yg_diinvite})
$(".people_invited").append(input);
$(".add_people").click(function() {
var orang_yg_diinvite = $("input[name='invite_people']").val();
var input = $("<input/>", {
type: 'text',
value: orang_yg_diinvite
})
$(".people_invited").append(input);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" name="invite_people" placeholder="Invite someone">
Add People
<div class="people_invited">
<!-- Here is <input type="text" name="people_invited" readonly> is added by jquery -->
</div>
Related
I have a situation like the one below:
var value = document.getElementById("value").value;
if (value = 'a') {
('.setting').append('<input type="text" name="name" placeholder="carname">');
}
elseif(value = 'b') {
('.setting').append('<input type="text" name="name" placeholder="fruitname">');
}
$(document).ready(function() {
$("input[name=name]").keyup(function() {
alert("The text has been changed.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="username" placeholder="your name">
<select id="value"></select>
<div class="setting"></div>
The problem I have is that when I change the input the alert does not trigger. Does anyone know were am I messing up?
You're trying to select an input whose name property is "name", but the value you set in your HTML is name="username".
$(document).ready(function(){
$("input[name='username']").keyup(function(){
alert("The text has been changed.");
});
});
A better way yet is to give your input a unique id and select by that, so you don't have to use an attribute selector:
<input id="usernameInput" type="text" name="username" placeholder="your name">
$("#usernameInput").keyup(function(){ ... });
The $ is missing from ('.setting'), you should use .on to catch events of dynamically created elements and it's better to use it with classes, also use == or more likely === for conditions.
Live example
Your code modified:
<input type="text" name="name" class="example" placeholder="your name">
<select id="value"></select>
<div class="setting"></div>
<script>
var value = document.getElementById("value").value;
if(value==='a'){
$('.setting').append('<input type="text" name="name" class="example" placeholder="carname">');
}
else if(value==='b'){
$('.setting').append('<input type="text" name="name" class="example" placeholder="fruitname">');
}
</script>
<script>
$(document).ready(function(){
$('body').on('keyup', '.example', function() {
alert("The text has been changed.");
});
});
</script>
I got this code, that live-update text in a div when user type in a text area.
I'm not sure how to edit it, so i can re-use it for several matching div/input.
Is it possible to use some kind of wildcard?
My working code:
<textarea id="input-address" name="address" rows="5" class="form-control">{{ Auth::user()->address }}</textarea>
<div id="output-address">{{ Auth::user()->address }}</div>
$(function() {
$source=$("#input-address");
$output=$("#output-address");
$source.keyup(function() {
$output.text($source.val());
});
});
I was thinking about something like this, but not sure how to handle it:
<input type="text" id="input-first_name" name="first_name" class="form-control" value="{{ Auth::user()->first_name }}" required>
<textarea id="input-address" name="address" rows="5" class="form-control">{{ Auth::user()->address }}</textarea>
<div id="output-first_name">{{ Auth::user()->first_name}}</div>
<div id="output-address">{{ Auth::user()->address }}</div>
<script type="text/javascript">
$(function() {
$source=$("#input-[name-match]");
$output=$("#output-[name-match]");
$source.keyup(function() {
$output.text($source.val());
});
});
</script>
Yes you could use it as you described above, but you should attach a common dynamic input event like :
$(function() {
//Attach 'input' event to all elements that have an 'id' start with 'input-'
$('[id^="input-"]').on('input', function(){
var source_name = $(this).attr('name');
//Change the element that have 'id' equal to 'output-source_name'
$('#output-'+source_name).text( $(this).val() );
});
});
Hope this helps.
$(function() {
$('.input').on('input', function(){
var source_name = $(this).attr('name');
$('#output-'+source_name).text( $(this).val() );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="first_name" class="form-control input" value="first_name from controller" required>
<br>
<textarea name="address" rows="5" class="form-control input">address from controller</textarea>
<div id="output-first_name">first_name from controller</div>
<div id="output-address">address from controller</div>
$(document).ready(function () {
$(":text").keyup(function () {
$("p").text($(":text").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form>
User Name: <br>
<input type="text" >
<input type="submit" value="Submit">
</form>
<br>
<p>
</p>
Hope this will help to solve your problem.
$('#input-address').keyup(function() {
var address= $('#input-address').val();
$('#output-address').html(address);
});
I have couple of input which has placeholder than whenever I focus on the input I want to get placeholder value with alert or inside a div.
my codes (example);
html
<input type="text" placeholder="Name">
<input type="text" placeholder="Phone:">
<input type="text" placeholder="Email">
and my js files:
var plchold = ('input[type=text]').attr('placeholder');
$("<div class='field-label'><p>"+plchold+"</p></div>").prependTo(".wrap-field");
But it just given me first placeholder value for all input.
I know it must be with $(this) but I don't know how :)
Try this one:
$('input[type=text]').focus(function(){
var plchold = $(this).attr('placeholder');
$("<div class='field-label'><p>"+plchold+"</p></div>").prependTo(".wrap-field");
});
you should loop through inputs to get placeholder for each one
$('input[type=text]').each(function(){
var plchold = $(this).attr('placeholder');
$("<div class='field-label'><p>"+plchold+"</p></div>").prependTo(".wrap-field");
});
You need to iterate over input elements and use iteration context this to target them in each iteration:
$('input[type=text]').each(function(){
var plchold = $(this).attr('placeholder');
$("<div class='field-label'><p>"+plchold+"</p></div>").prependTo(".wrap-field");
});
$("input[type=text]").focus(function(){
alert($(this).attr('placeholder'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Name">
<input type="text" placeholder="Phone:">
<input type="text" placeholder="Email">
The problem: I have a page with many <input> fields (just say all are text fields)
I would like to have a button, when click on it, all input fields will become plaintext only.
e.g. <input type="text" value="123" /> becomes 123
and if I click on another button, the text will change back to
e.g. 123 becomes <input type="text" value="123" />
Is there an automatic way to scan for all the <input>s and change them all at once using javascript and jquery.
Thank you!
Edited
Seems you guys are getting the wrong idea.
Read what I have written again: e.g. <input type="text" value="123" /> becomes 123
I have value="123" already, why would I want to set the value again???
What I want is e.g.
<body><input type="text" value="123" /><input type="text" value="456" /></body> becomes <body>123456</body> and later <body>123456</body> back to <body><input type="text" value="123" /><input type="text" value="456" /></body>
Use this to go one way,
$('input').replaceWith(function(){
return $('<div />').text(this.value).addClass('plain-text');
});
and this to go the other.
$('.plain-text').replaceWith(function(){
return $('<input />').val($(this).text());
});
Check this link http://jsfiddle.net/Evmkf/2/
HTML:
<div id='divInput'>
<input type="text" value='123' />
<br/>
<input type="text" value='456' />
<br/>
<input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
<input type="button" id='btnPlain' value='Make It Plain' />
<input type="button" id='btnInput' value='Make It Text' />
</div>
Javascript:
$("#btnPlain").bind('click',function(){
$("#plainText").html('');
$("#divInput input[type=text]").each(function(index){
$("#plainText").append('<span>'+$(this).val()+'</span>');
$("#divInput").hide();
$("#plainText").show();
});
});
$("#btnInput").bind('click',function(){
$("#divInput").html('');
$("#plainText span").each(function(index){
$("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
$("#plainText").hide();
$("#divInput").show();
});
});
Try this FIDDLE
$(function() {
var arr = [];
$('#btn').on('click', function() {
var $text = $('#inp input[type="text"]');
if( $text.length > 0){
$text.each(function(i) {
arr[i] = this.value;
});
$('#inp').html(arr.join());
}
else{
if(arr.length <= 0){
}
else{ // Add Inputs here
var html = '';
$.each(arr, function(i){
html += '<input type="text" value="' + arr[i]+ '"/>'
});
$('#inp').html(html);
}
}
});
});
You need to create a hidden element for each input, then use jquery to hide the input, show the hidden element and give it the inputs value.
<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>
$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();
I am using a jquery template to dynamically generate multiple elements on the same page. Each element looks like this
<div id ="DynamicValueAssignedHere">
<div class="something">Hello world</div>
<div class="formdiv">
<form name="inpForm">
<input type="text" name="FirstName" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
I would like to use Jquery to process the form on submit. I would also like to revert the form values to their previous values if something should go wrong. My question is
How can I get the value of input box using Jquery? For example, I can get the value of the div with class "something" by doing
var something = $(#DynamicValueAssignedHere).children(".something").html();
In a similar fashion, I want to be able to retrieve the value of the textbox. Right now, I tried
var text = $(#DynamicValueAssignedHere).children(".formdiv").findnext('input[name="FirstName"]').val();
but it doesn't seem to be working
You have to use value attribute to get its value
<input type="text" name="FirstName" value="First Name" />
try -
var text = $('#DynamicValueAssignedHere').find('input[name="FirstName"]').val();
It can be much simpler than what you are doing.
HTML:
<input id="myField" type="text" name="email"/>
JavaScript:
// getting the value
var email = $("#myField").val();
// setting the value
$("#myField").val( "new value here" );
An alternative approach, without searching for the field html:
var $form = $('#' + DynamicValueAssignedHere).find('form');
var formData = $form.serializeArray();
var myFieldName = 'FirstName';
var myFieldFilter = function (field) {
return field.name == myFieldName;
}
var value = formData.filter(myFieldFilter)[0].value;
$("form").submit(function(event) {
var firstfield_value = event.currentTarget[0].value;
var secondfield_value = event.currentTarget[1].value;
alert(firstfield_value);
alert(secondfield_value);
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" >
<input type="text" name="field1" value="value1">
<input type="text" name="field2" value="value2">
</form>
if you know the id of the inputs you only need to use this:
var value = $("#inputID").val();
var textValue = $("input[type=text]").val()
this will get all values of all text boxes. You can use methods like children, firstchild, etc to hone in. Like by form
$('form[name=form1] input[type=text]')
Easier to use IDs for targeting elements but if it's purely dynamic you can get all input values then loop through then with JS.
You can try these lines:
$("#DynamicValueAssignedHere .formdiv form").contents().find("input[name='FirstName']").prevObject[1].value
You can get any input field value by
$('input[fieldAttribute=value]').val()
here is an example
displayValue = () => {
// you can get the value by name attribute like this
console.log('value of firstname : ' + $('input[name=firstName]').val());
// if there is the id as lastname
console.log('value of lastname by id : ' + $('#lastName').val());
// get value of carType from placeholder
console.log('value of carType from placeholder ' + $('input[placeholder=carType]').val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="formdiv">
<form name="inpForm">
<input type="text" name="firstName" placeholder='first name'/>
<input type="text" name="lastName" id='lastName' placeholder='last name'/>
<input type="text" placeholder="carType" />
<input type="button" value="display value" onclick='displayValue()'/>
</form>
</div>