Show Text In A DIV On Blur Of Form Field - javascript

I have been searching this for over 5 hours now with no help lol.
I want to have a form field (text) that someone can type into. Either as they type or after the blur of the field I want that text to show in a div on the screen. Maybe this is not possible.
Here is the last piece of code I tried and of course it does not work.
<p>Headline Text:<br />
<input type="text" name="headline" value="$headline" onChange="document.getElementById('headline2').value=this.value" /></p>
<br />
<div id="headline2"></div>
In that code, anything typed into headline would appear in the <div id="headline2"></div> on blur.
Any help would be great.

You were not far!!!
A <div> doesn't have a value... But has inner HTML. ;)
Here it is on change:
<p>Headline Text:<br />
<input type="text" name="headline" value="$headline" onChange="document.getElementById('headline2').innerHTML=this.value" /></p>
<br />
<div id="headline2"></div>
And on keyup:
<p>Headline Text:<br />
<input type="text" name="headline" value="$headline" onKeyup="document.getElementById('headline2').innerHTML=this.value" /></p>
<br />
<div id="headline2"></div>

HTML:
<input>
<div id="target"></div>
Javascript:
var input = document.querySelector('input');
var target = document.querySelector('div')
input.addEventListener('blur', function() {
target.innerHTML = input.value
})
I recommend keeping your scripts separate from the markup, but if you so choose...
<input onblur="document.getElementById('target').innerHTML = this.value">
<div id="target"></div>

Form inputs have a value property, container elements such as divs have innerHTML. Try this instead:
<p>Headline Text:<br />
<input type="text" name="headline" value="$headline"
onChange="document.getElementById('headline2').innerHTML=this.value" />
</p>
<br />
<div id="headline2"></div>

<input type="text" id="text" onkeyup="getTextVal()">
<div id="showtext"></div>
<script>
function getTextVal(){
var val = document.getElementById('text').value;
var showText = document.getElementById('showtext');
showText.innerText = val;
}
</script>
See in jsfiddle link

This is very possible, and you were very close with your attempt. The problem is that a <div> element doesn't have a value, only innerHTML. Also, you're probably looking for onblur instead of onChange:
<p>Headline Text:<br />
<input type="text" name="headline" value="$headline" onblur="document.getElementById('headline2').innerHTML = this.value" /></p>
<br />
<div id="headline2"></div>
Just remember that with onblur, you have to actually click outside of the element for the changes to show. If you want it to change whenever the user types something, you're looking for onkeyup instead.
Hope this helps! :)

Related

Change attribute value for event only

I have this basic form:
jQuery(document).ready(function($) {
$('#btn').click(function() {
var form = document.getElementById('form');
form.setAttribute('action', 'export.php');
form.submit()
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="get.php" id="form">
<div>
<label for="date">From</label>
<input type="date" name="from-date" id="date" />
</div>
<div>
<label for="date">To</label>
<input type="date" name="to-date" id="date" />
</div>
<div>
<input type="checkbox" name="flags[new]" /> New
<input type="checkbox" name="flags[updated]" /> Updated
<input type="checkbox" name="flags[existing]" /> Existing
</div>
<div>
<input type="submit" />
</div>
<div>
<button type="button" id="btn">
<span>Export</span>
</button>
</div>
</form>
This works as (near) expected. However, I then clicked on the submit input and it tried going to export.php. For some reason my brain was telling me that this is incorrect behaviour, but I get that I've changed the attribute value within the DOM and thus, anything post-clicking the export button will render the attribute value (until I refresh).
I'm aware that I can do another event handler to reset the attribute value, but I feel like that's counter-intuitive, is there something in JS/jQuery that allows me to "toggle" an attribute for the event only? Or do I have to make-do with a hard reset?
TL;DR
Is there a way to temporarily set an attribute within an event?
Try something like this:
jQuery(document).ready(function($) {
$('#btn').click(function() {
let form = document.getElementById('form');
//Save the current attr
let currentAttr = form.getAttribute('action');
form.setAttribute('action', 'export.php');
form.submit();
//Reset the previous attr
form.setAttribute('action', currentAttr);
})
})
You actually save the current attr, submit the form and then set the attribute to the original one.
Hope it solved your issue!

How to get JQuery closest input id and data-attr?

I have multiple input fields in my form that use the Add button. I have created my button with an image tag. Each image tag has the same class. Once I click on the image I want to get the id of my closest input field as well as data attribute value. Here is example of my HTML:
<div class="formItem">
<label for="status">Status:</label>
<input type="text" name="ls_status" id="ls_status" value="" data-master="STATUS" size="10" maxlength="10" readonly />
<img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>
<div class="formItem">
<label for="age">Age:</label>
<input type="text" name="ls_age" id="ls_age" value="" data-master="AGE" size="10" maxlength="10" readonly />
<img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>
Here is what I tried in JQuery:
$('.masterRecords').on('click', function(){
console.log($(this).closest('input').prop('id'));
});
In my debugging console I see 'undefined' only. First of all I'm not sure if I approached the best way to solve this problem. I repeat there is multiple elements that use the same class and I need to pull ID and data for each of them. They are all in separate div containers as you can see in my example above. If anyone see where is bug in my code please let me know. Also I would like to hear some suggestions if there is better way to do this with JQuery/HTML5/CSS3. Thank you.
Try using siblings instead of closest.
$('.masterRecords').on('click', function(){
console.log($(this).siblings('input').prop('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formItem">
<label for="status">Status:</label>
<input type="text" name="ls_status" id="ls_status" value="" data-master="STATUS" size="10" maxlength="10" readonly />
<img src="https://i.stack.imgur.com/Qo01e.png" alt="Click to add value" class="masterRecords" />
</div>
<div class="formItem">
<label for="age">Age:</label>
<input type="text" name="ls_age" id="ls_age" value="" data-master="AGE" size="10" maxlength="10" readonly />
<img src="https://i.stack.imgur.com/Qo01e.png" alt="Click to add value" class="masterRecords" />
</div>
Solution: https://jsfiddle.net/jdjc1bc7/
$('.masterRecords').on('click', function(){
console.log($(this).siblings('input').prop('id'));
});
You can check for input in siblings, since in your current DOM the inputs are sibling to the element which is being clicked.
This should be the fastest way for you. https://jsperf.com/jquery-siblings-vs-parent-find-vs-find
If your structure will always be like this, you could also retrieve your related input with
$('input', $(this).parent())
which will return all inputs in the same div as the image
Because input is to the left of you can find it like this:
$('.masterRecords').on('click', function(){
console.log($(this).prev('input').prop('id'));
});
If input was after button then you can find it like this:
$('.masterRecords').on('click', function(){
console.log($(this).next('input').prop('id'));
});
Then for data attribute value just use .data or .attr of ID value you get:
$('#'+ID).attr('data-master');
$('.masterRecords').on('click', function(){
var inputTextId = $(this).prev('input').prop('id');
console.log(inputTextId);
console.log($('#'+inputTextId).attr('data-master'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formItem">
<label for="status">Status:</label>
<input type="text" name="ls_status" id="ls_status" value="" data-master="STATUS" size="10" maxlength="10" readonly />
<img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>
<div class="formItem">
<label for="age">Age:</label>
<input type="text" name="ls_age" id="ls_age" value="" data-master="AGE" size="10" maxlength="10" readonly />
<img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>
The <INPUT/> element is not an ancestor of your image. Try:
$('.masterRecords').on('click', function(){
console.log($(this).closest(".formItem").find('input').attr('id'));
});

How can I get HTML element value by JavaScript?

<div class="gallery_re_form">
<form action="http://gall.dcinside.com/?/forms/comment_submit" method="post" accept-charset="utf-8" name="comment_write" id="comment_write" />
<div style="display:none">
<input type="hidden" name="ci_t" value="625752bb366f010c56e506e5d0f93822" />
</div>
<input type="hidden" name="ehqo_C" id="ehqo_C" value="spam_key" />
<input type="hidden" name="spam_key" id="spam_key" value="rhkdrhgkwlak!!" />
<input type="hidden" name="fb8f95190d2b70480acb309f91653d7e4416d4f99a0b67a0b866f06087fdec4588f68fe210675e74919d2ecc50e08f1fd6f75119" id="fb8f95190d2b70480acb309f91653d7e4416d4f99a0b67a0b866f06087fdec4588f68fe210675e74919d2ecc50e08f1fd6f75119" value="b9d3cc45576e30144d8f299fdc61356552989b3aba08238c811b1d3183a104cc2d1d3984af72c4f2eaa2738ca41819d05533731a" />
<input type="hidden" name="service_code" value="21ac6e96ad152e8f15a05b7350a24759b5606fa191c17e042e4d0175735f4c61d63153c3ce7b4eb89b565a7f6a04ad0667df75f39625ab6fe0816d23f4bed5387546b52d6874b5c201e54df7b5db9187219b048cffc9ef8a106febabfba125eff122df732d9cc52fcaae8b11c42ff5f6fd5ef81901df4103827e7233615992141c180be76852634d53b60c6f911ccdfc762b3db554d8ee36528547bceede30697120c5291acb255a" />
<br />
<div class="re_input">
<div>
<ul>
<li>
<input type="text" name="name" id="name" class="re_name re_in" onfocus="this.style.background='#FFFFFF'" title="nickname" />
</li>
<li>
<input type="password" name="password" id="password" class="re_pw re_in" onfocus="this.style.background='#FFFFFF'" title="password" />
</li>
</ul>
</div>
</div>
</form>
I'm trying to rewrite google chrome extensions. I want to get #spam_key s #service_codes value in this HTML response.
I have not used JavaScript.
How can I get HTML element id (spam_key, service_code) and value by JavaScript?
DOM has a document object , you can use it like this to get the HTML element what you want
document.getElementById("id")
Now to get value, just use value property of this element.
document.getElementById("id").value
You want to retrieve the spam_key element and service_code element's values?
var spam_key = document.querySelector('#spam_key');
var service_code = document.querySelector('input[name=service_code]');
console.log(spam_key.value);
console.log(service_code.value);
You can learn more about selection element from javascript at here
You can get value of an HTML input element using:
var spam_key = document.getElementById('spam_key').value;
var service_code = document.getElementById('service_code').value;
Try this, It should give the value of spam_key
document.getElementById('spam_key').value;
If you have jQuery included you can get it by following: $("#spam_key").val()

how to get set of input boxes values using getElemntById?

I have set of input boxes to add names and designaions.and iwant to print those in a <p> tag when user click print button. how to proceed.
<div class="form-group">
<label for="inputRegNo" >Name & Designation<span style="color:#c0392b;padding-left:5px;">*</span></label>
<div class="form-group">
<input required type="text" name="fname[]" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" placeholder="Name" />
<input required type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
<div class="form-group">
<label for="inputRegNo" ></label>
<div class="form-group">
<input type="text" name="fname[]" placeholder="Name" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" />
<input type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
print
<div>
<label>Name & Designation</label>
<p id="refa5"> - </p>
</div>
its looks you are new in javascript.. it's simple give the name to all the input field like
<input type="text/checkbox" name="txtName">
and in javascript you can access this field value by
<script type="text/javascript">
var name = document.getElementsByName("txtName");
</script>
if you wish to print the element on button click simply specify their click event on javascript like
function onClick() {
alert("helo from click function");
}
and then on button ..
<input type="button" onclick="onClick()">
w3schools is a great resource for this. Here is some example code on how to do this :
<button onclick="myFunction()">Click me</button>
<input id="inputID"></input>
<p id="demo"></p>
<script>
function myFunction() {
var inputID = document.getElementById("inputID").value;
document.getElementById("demo").innerHTML = inputID;
}
</script>
What the code above does is it takes the value of an input, then it sets the innerHTML of a <p> element to it. You can obviously do this with other things like <h1> elements as well.

Input value hidden

I have this input:
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
and I want to get this input value in a hidden input, so I used this:
<input type="hidden" name="tag" value="tags" />
Instead of getting the true value of the first input, I only get the string "tags"! Can you please tell me how to obtain the true value of the first input in my hidden input? Thanks!
EDIT: Actually it's a submit page, the user enters tags in the #tag1 and when he clicks on submit I want to send these tags to my controller, that's why I'm using the hidden input...
My full code:
<form>
<p>
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue()"; /></p>
<script>
$('#tag1').tagsInput({
// my parameters here
});
</script>
<style>
#wrapper {
margin: 20px;
}
</style>
<p>
<input type="submit" value="Create" />
<input type="hidden" name="taggg" id="tag2" />
<script type="text/javascript">
function setValue() {
document.getElementById("tag2").value = document.getElementById("tag1").value;
}
window.onload = setValue;
</script>
</p>
</form>
I don't understand why you would want to copy the value of one input field to another (albeit, hidden). But if that is what you want to do, try using the below code.
The function attached to the onblur event of the input field would set the value of the input field to the hidden field whenever it loses focus.
The window.onload = setValue will do the same on page load.
HTML
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue();" />
<input type="hidden" name="tag" value="tags" id="tag1_hidden" /> <!-- Note the addition of an id attribute -->
JavaScript
function setValue() {
document.getElementById("tag1_hidden").value = document.getElementById("tag1").value;
}
window.onload = setValue;
Try this
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
<input type="hidden" name="tag" value="tags" id="tag2" />
Jquery:
$("#tag2").val($("#tag1").val());
or
$("#tag1").blur(function() {
$("#tag2").val($(this).val());
});
You can do like this (and you will need javascript for this).
Give a id to your hidden input also like:
<input type="hidden" id="hidden_input" name="tag" value="tags" />
and then use/paste this code when you need it:
var input_value = document.getElementById('tag1').value;
document.getElementById('hidden_input').value = input_value;

Categories

Resources