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);
});
Related
I have a little script which create a new div block if the user click on button. To count how many are created I have an hidden input. Everytime a new block is created the value of this hidden input should get updated.
Thats my script:
$(function () {
$("#addBtn3").on("click", function () {
imageBlockCount++;
document.getElementById("counter").value = imageBlockCount;
$(
$.parseHTML(
`<div class="form-group" id="gallery-${imageBlockCount}" >
<label for="new-content-${imageBlockCount}">New Content</label>
<input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
</div>`
)
).appendTo("#newElements");
});
});
This is my html code:
<div style="flex:auto;text-align:right;">
<button id="addBtn3" type="button">Content +</button>
</div>
<input name="counter" type="text" id="counter" value="0" hidden>
<div id="newElements">
</div>
But in the script where it should update the value don't work, but I don't know why, I don't find any other methods which are so different.
Your code works fine. place console.log($("#counter").val()) after appendTo.
A webpage's HTML doesn't automatically update when an input field's value changes.
If you want such functionality, you could place this after updating value of #counter:
$('#counter').attr('value', $('#counter').val());
$(function () {
let imageBlockCount = 0
$("#addBtn3").on("click", function () {
imageBlockCount++;
document.getElementById("counter").value = imageBlockCount;
$('#counter').attr('value', $('#counter').val());
$(
$.parseHTML(
`<div class="form-group" id="gallery-${imageBlockCount}" <label for="new-content-${imageBlockCount}">New Content</label>
<input type="text" name="content-${imageBlockCount}" class="form-control" id="new-content-${imageBlockCount} test-${imageBlockCount}" placeholder="new content" required>
</div>`
)
).appendTo("#newElements");
console.log($('#counter').val())
});
});
<div style="flex:auto;text-align:right;">
<button id="addBtn3" type="button">Content +</button>
</div>
<input name="counter" type="text" id="counter" value="0" hidden>
<div id="newElements">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
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>
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>
I am trying to use jQuery to take the user input and insert it into multiple divs with the class of userInput. I was able to use vanilla JavaScript but i don't want to keep repeating my code using ID's.
So far i can take the user input and display it as an alert so i know its being read. So can i take this input from the input field and place it into a class?
<form>
<input class="userInput" type="text" maxlength="10" onclick="insertInput()" placeholder="Username" required><br>
<a href="#chapter-1">
<div id="submitbutton" class="button">Continue</div>
</a>
</form>
$(function() {
$("#submitbutton").click(function() {
alert($(".userInput").val());
});
});
$(function() {
$("#submitbutton").click(function() {
$('.userInput').text($(".userInput").val());
});
});
check this fiddle
Define number of divs having same class.Then just set the input value to class as text.
$(function() {
$("#submitbutton").click(function() {
var value = $(".userInput").val();
$(".insert").text(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="userInput" type="text" maxlength="10" placeholder="Username" required><br>
<a href="#chapter-1">
<div id="submitbutton" class="button"> Continue</div>
</a>
</form>
<div class="insert">
</div>
<div class="insert">
</div>
<div class="insert">
</div>
Something like so:
var elements = document.querySelectorAll('p.userInput');
var doAction = function(event) {
var inputValue = document.querySelector('input.userInput').value;
for(var i=0; i < elements.length; i++) {
elements[i].innerHTML = inputValue;
}
}
var element = document.querySelector('#submitbutton');
element.addEventListener('click', doAction);
<form>
<input class="userInput" type="text" maxlength="10" placeholder="Username" required><br>
<a href="#chapter-1">
<div id="submitbutton" class="button"> Continue</div>
</a>
</form>
<p class="userInput"> </p>
<p class="userInput"> </p>
<p class="userInput"> </p>
No reason to use jQuery.
I'm trying to put a script where you can clear the value on inputs and text-area by clicking on a button. I copied a script on the web that can clear my inputs it worked but how can I include textareas on it?
Here's the script:
$("#btnpost").click(function(){
var inp = $("input");
if(inp.val()) {
inp.val('');
}
});
<input type="email" class="form-control" id="inputEmail3" placeholder="Insert Title Here">
<textarea class="form-control " rows="5" placeholder="Insert Content Here"></textarea>
<button type="button" class="btn btn-primary" id="btnpost">
Post
$(document).ready(function(){
$("#btnpost").click(function(){
$('input ,textarea').each(function(){
if($(this).val() !=""){
$(this).val() = "";
}
});
});
});
you can simply do like this. assign id id="textArea" to textarea
$(document).ready(function(){
$("#btnpost").click(function(){
$("#inputEmail3").val("");
$("#textArea").val("");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" class="form-control" id="inputEmail3" placeholder="Insert Title Here">
<textarea id="textArea" class="form-control " rows="5" placeholder="Insert Content Here"></textarea>
<button type="button" class="btn btn-primary" id="btnpost">ClearMe</button>
Fiddle
If those elements are inside a form I'd recommend to use .reset()
$("#btnpost").on('click', function() {
$(this).closest('form').reset();
});
Just a preference, it seems 'cleaner' to me.
The simplest would be this one:
$("#btnpost").click(function(){
$("#inputEmail3, #textArea").val("");
});
I suggest you use html reset button. You only need to wrap all your elements inside a form element.
<form>
<input type="email" class="form-control" id="inputEmail3" placeholder="Insert Title Here">
<textarea class="form-control " rows="5" placeholder="Insert Content Here"></textarea>
<button type="reset" value="Reset">Reset</button>
</form>
link