I am trying to use the innerHTML method on an input tag and all i get back is a blank string. Here is the code i am useing.
javascript
function setName(ID){
document.getElementById('searchtitle').innerHTML = "Enter " + ID.innerHTML;
}
HTML
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)">Last Name</input><br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)">Phone Number</input><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
What is supposed to happen is depending on which radio button I pick the label for the input box should change. I can make the label.innerHTML=radio.value but the values are named for my php code and not formated nicely(ie. phonenumber vs. Phone Number) this is why I am trying to use the innerHTML of the radio button.
Any help I could get would be greatly appriciated.
you should embed input inside of label tag. input tag should closed by />. It's semantic HTML. When you do this clicking on label activate the input. InnerHTML only works for label then. It will return you label value.
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
</label>
JavaScript:
console.log(document.getElementById('searchtitle').innerHTML); // returns 'Enter Last Name'
If you want the value of an input tag, you want to use .value.
First, add labels around your inputs. Second, use getName(this.parentNode). Finally, call innerText instead of innerHtml.
<html>
<head>
<script>
function setName(el){
document.getElementById('searchtitle').innerHTML = "Enter " + el.innerText;
}
</script>
</head>
<body>
<label><input type="radio" name="searchtype" value="name" onclick="setName(this.parentNode)"/>Last
Name</label><br/>
<label><input type="radio" name="searchtype" value="phonenumber" onclick="setName(this.parentNode)"/>Phone
Number</label><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
</body>
</html>
Complete edit.
Ok, I figured out what you were looking for. First off, you've got to fix your HTML (don't put text inside of an input... and don't next an input inside of a label).
<label for="test">Last Name</label>
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)" />
<br/>
<label for="test2">Phone Number</label>
<input type="radio" id="test2" name="searchtype" value="phonenumber" onclick="setName(this)" />
<br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label>
<br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
JavaScript (in Jquery, for brevity):
function setName(elem)
{
$('#searchtitle').html('Enter ' + $('label[for="'+elem.id+'"]').html());
}
You have closed the Input tag improperly with </input>
this should be
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)"/>Last Name<br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)"/>Phone Number<br/>
Related
I have this form:
<form>
<input type="radio" id="option-1" name="name" value="Hello! I would like to talk to John"><label for="option-1">John</label>
<input type="radio" id="option-2" name="name" value="Hello! I would like to talk to Maria"><label for="option-2">Maria</label>
<input type="radio" id="option-3" name="name" value="Hello! I would like to talk to Kennedy"><label for="option-3">Kennedy</label>
<input type="radio" id="option-4" name="name" value="Hello! I would like to talk to Adam"><label for="option-4">Adam</label>
</form>
And I have this other form with an textarea:
<form>
<textarea id="textarea-field" placeholder='Type your message here...' required/>
</form>
I would like to know if there is any simple way to assign the value of the chosen input inside the textarea content right when user click one of these input.
A more feasible and easiest way would be do this way by making sure you assign an id to your form which will ensure that you are only selecting Input[type=radio] from that form and not every input on your page.
Also use textContent to assign a value to your textArea. Using innerHTML is not recommended.
We need to use forEach function to loop through all the input which we will find using querySelectorAll function (which returns all nodes list) and then use we can addEventListener to make sure that we listen to change events on your input and assign the value of the checked radio button to your textArea
Live Demo:
//get all radio buttons
let getRadios = document.querySelectorAll('#myForm > input[type="radio"]');
//get text area
let getTextArea = document.querySelector('#textarea-field');
//Loop through the radio button
getRadios.forEach(function(radio) {
radio.addEventListener('change', function() {
getTextArea.textContent = this.value //assign value to textArea
})
})
<form id="myForm">
<input type="radio" id="option-1" name="name" value="Hello! I would like to talk to John"><label for="option-1">John</label>
<input type="radio" id="option-2" name="name" value="Hello! I would like to talk to Maria"><label for="option-2">Maria</label>
<input type="radio" id="option-3" name="name" value="Hello! I would like to talk to Kennedy"><label for="option-3">Kennedy</label>
<input type="radio" id="option-4" name="name" value="Hello! I would like to talk to Adam"><label for="option-4">Adam</label>
<br>
<br>
<textarea id="textarea-field" placeholder='Type your message here...' required>
</textarea>
</form>
If you give each of your input a class purely for this script below it should work.
<script>
// GIVE EACH OF YOUR INPUTS A CLASS OF .input
// THEN ADD THIS SCRIPT
$(document).ready(function(){
$('.input').click(function(e) {
var text = $( this ).val();
$('#textarea-field').val( text );
});
});
</script>
You can do it this way
const radios = document.querySelectorAll('input');
const textarea = document.querySelector('#textarea-field');
radios.forEach(radio => {
radio.addEventListener('change', ({
target
}) => textarea.innerHTML = target.value);
});
<form>
<input type="radio" id="option-1" name="name" value="Hello! I would like to talk to John"><label for="option-1">John</label>
<input type="radio" id="option-2" name="name" value="Hello! I would like to talk to Maria"><label for="option-2">Maria</label>
<input type="radio" id="option-3" name="name" value="Hello! I would like to talk to Kennedy"><label for="option-3">Kennedy</label>
<input type="radio" id="option-4" name="name" value="Hello! I would like to talk to Adam"><label for="option-4">Adam</label>
<textarea id="textarea-field" placeholder='Type your message here...' required></textarea>
</form>
Add a Custom Class to input where you want to put Radio Button
The Code below Gets the Value of clicked input radio button and sets in the TextArea Field.
$('.radiobuttoninput').click(function() {
$('#textarea-field').val($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input class="radiobuttoninput" type="radio" id="option-1" name="name" value="Hello! I would like to talk to John"><label for="option-1">John</label>
<input class="radiobuttoninput" type="radio" id="option-2" name="name" value="Hello! I would like to talk to Maria"><label for="option-2">Maria</label>
<input class="radiobuttoninput" type="radio" id="option-3" name="name" value="Hello! I would like to talk to Kennedy"><label for="option-3">Kennedy</label>
<input class="radiobuttoninput" type="radio" id="option-4" name="name" value="Hello! I would like to talk to Adam"><label for="option-4">Adam</label>
</form>
<br>
<form>
<textarea id="textarea-field" placeholder='Type your message here...' required> </textarea>
</form>
If you don't want to use any libraries then you can also use vanilla to do this. Nothing to explain here so I will just show you.
HTML file:
<form name="form">
<input type="radio" name="rate" value="1"/>i am 1
<input type="radio" name="rate" value="2"/>i am 2
<input type="radio" name="rate" value="3"/>i am 3
</form>
<textarea value="" id="ta"></textarea>
You don't need id for the form or radio boxes. Just declare a name. That would do the trick.
JavaScript file:
document.form.onclick = function() {
var v = document.form.rate.value;
var t = document.getElementById("ta");
t.value = v;
}
Let me know if it worked.
I have a form field with the last name and want to generate a customer ID starting with the first two characters from their last name in caps and add a random number to it. So I need the other field which dynamically updates with only the first two characters in uppercase. This is what I have so far:
HTML:
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value">
<input type="text" id="textfield2" value="">
</form>
JAVASCRIPT:
document.getElementById('textfield2').setAttribute('maxlength',2)
You can get the two first characters from your input and put them in the second with javascript :
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value.substr(0,2).toUppercase()">
<input type="text" id="textfield2" value="">
</form>
I am not sure but I think that the javascript code don't care about the attribut "maxlength". Futhermore, you need use toUpperCase in order to have your result.
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="txt(this.value)">
<input type="text" id="textfield2" value="">
</form>
<script>
function txt(value) {
document.getElementById('textfield2').value = value.substr(0,2).toUpperCase();
}
</script>
hope it works
I'm new to jQuery.
I am trying to create a reusable function that will replace the text of a input field.
I pass in the field I want to change as one parameter and the new text as another parameter.
I figured I would try it out with some radio buttons.
HTML
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, 'All')" value="0" checked>All</label>
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, 'Geo')" value="1">Geographical Area</label>
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, '')" value="2">Specific User</label>
<input type="text"id="txt_recipient" name="txt_recipient" value="All" />
JS
function replaceText(field, newtext) {
document.getElementById(field).text(newtext);
};
I originally toyed with the idea of
function replaceText(field, newtext) {
$(field).text(newtext);
};
but that didn't seem to work either. Help?
field is the actual element so just set the input value property.
function replaceText(field, newtext) {
field.value = newtext;
}
DEMO: http://jsfiddle.net/039v0wst/1/
with jQuery
function replaceText(field, newtext) {
$(field).val(newtext);
}
DEMO: http://jsfiddle.net/rgen7vLv/1/
First of all give unique names:
<input type="radio" name="optradio1" onClick="replaceText(txt_recipient, 'All')" value="0" checked>All</label>
Geographical Area
then js
$('input[name$="optradio1"]').val("newtext")
Can you pass the field id with ' '
E.g;
'txt_recipient' instead of 'txt_recipient
It is no longer recommended to declare event handlers inline in the HTML attributes.
Using a more modern syntax, I'd include a data attribute that specifies the text in the destination, the update your target using the string from the data attribute.
$('input[type="radio"]').change(function() {
$("#txt_recipient").val($(this).data("text"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
<input type="radio" name="optradio" data-text="All" value="0" checked>All</label>
<label>
<input type="radio" name="optradio" data-text="Geo" value="1">Geographical Area</label>
<label>
<input type="radio" name="optradio" data-text="" value="2">Specific User</label>
<input type="text"id="txt_recipient" name="txt_recipient" value="All" />
I have 2 radio buttons. On selection of one I want to display 3 text boxes and hide it on selection of other.
Here is the code.
These are my 2 radio buttons.
<input type="radio" name="type"> Fresher
<input type="radio" name="type"> Experienced
On click of radio button experienced I want to display these 3 text box.
Company Name: <input type="text" hidden="true"/> <br/>
Designation: <input type="text" hidden="true"/> <br/>
Year_of_Experience: <input type="text" hidden="true"/> <br/>
Please help me out with javascript for this as new to it.
You could do this as follows. First change your HTML to this:
<input type="radio" name="type" value="Fresher"> Fresher
<input type="radio" name="type" value="Experienced"> Experienced
<div id="textboxes" style="display: none">
Company Name: <input type="text" hidden="true"/>
Designation: <input type="text" hidden="true"/>
Year_of_Experience: <input type="text" hidden="true"/>
</div>
What this code adds to your code is to have a value for the radio buttons. This allows us to make a selection based on which radio button was selected. Secondly, the input fields are grouped together in a <div> to allow for easy hiding of the three input fields. After you have modifief your HTML as such, include jQuery on your website and use this code:
$(function() {
$('input[name="type"]').on('click', function() {
if ($(this).val() == 'Experienced') {
$('#textboxes').show();
}
else {
$('#textboxes').hide();
}
});
});
You can see how this works using this JSFiddle: http://jsfiddle.net/pHsyj/
This is the best example.Try something like this.,this is a sort of example
$("input[type='radio']").change(function(){
if($(this).val()=="other")
{
$("#otherAnswer").show();
}
else
{
$("#otherAnswer").hide();
}
});
http://jsfiddle.net/Wc2GS/8/
I guess this would solve your probs
<input type="radio" name="type" id='frsradio'> Fresher
<input type="radio" name="type" id='expradio'> Experienced <br>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
$(function() {
$('#expradio').click(function() {
$('.txbx').attr('hidden',false);
});
$('#frsradio').click(function() {
$('.txbx').attr('hidden',true);
});
});
WORKING jsfiddle
See there is no unique identity available for your html elements, i just given this code by thinking in a generic manner.
Try,
$('input[name="type"]:eq(1)').change(function(){
$('input[type="text"]').toggle(this.checked);
});
<input type="radio" name="type" onClick ="radio"> Fresher
<input type="radio" name="type" onClick ="radio"> Experienced
on click of radio button experienced i want to display these 3 text box.
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
and javascript:-
<script>
function radio()
{
var result = document.getElementsByClassName('text'").style.display="none";
}
</script>
Try this
<input type="radio" name="type" value="fresher"> Fresher
<input type="radio" name="type" value="exp"> Experienced
<br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
Script
$("input[type='radio']").on('change',function(){
if($(this).val() == "exp")
$('.box').show('slow');
else
$('.box').hide();
});
DEMO
Try this....
<input type="radio" name="type" id="fresh"> Fresher
<input type="radio" name="type" id="exp"> Experienced
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
$("#fresh").change(function(){
$('.hid').css("style","display:none");
});
$("#exp").change(function(){
$('.hid').css("style","display:block");
});
For default hide the text boxes In OnRender Complete Method you need hide the three textbox for that you put the below code.
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
You need to write the code in Radio button on change.
Using the Id get the value of radio button
var val=$('#radioId').val;
if(val=='Fresher')
{
$("#textbox 1").show();
$("#textbox 2").show();
$("#textbox 3").show();
}
else if (val=='Experienced'){
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
}
I have a problem with AngularJS. In my form I have a couple of input's. I have to do some math with the data, and then save it. But because I use Angularfire I have to assign the result to a ng-model, and that's where i'm stuck. How can i do this?
Here's my code:
<label>First</label>
<input name="firstmatch" ng-model="project.firstmatch">
<label>Second</label>
<input name="secondmatch" ng-model="project.secondmatch">
<label>Third</label>
<input name="thirdmatch" ng-model="project.thirdmatch">
<label>Fourth</label>
<input name="fourth" ng-model="project.fourthmatch">
<label>Fifth</label>
<input name="fifthmatch" ng-model="project.fifthmatch">
<!-- The math part-->
<textarea name="points" ng-model="project.points"> {{ project.firstmatch--project.secondmatch--project.thirdmatch--project.fourthmatch--project.fifthmatch }} </textarea>
Thanks!
Why do you print the result in a textarea? Textareas don't accept code by default. Just try printing the result in a div or span.
If you by any means want the result to be editable then print it in another input and don't do the calculation inside it. Do the logic in the controller, like this:
<label>First</label>
<input name="firstmatch" ng-model="project.firstmatch">
<label>Second</label>
<input name="secondmatch" ng-model="project.secondmatch">
<label>Third</label>
<input name="thirdmatch" ng-model="project.thirdmatch">
<label>Fourth</label>
<input name="fourth" ng-model="project.fourthmatch">
<label>Fifth</label>
<input name="fifthmatch" ng-model="project.fifthmatch">
<!-- The math part-->
<input type="text" name="points" ng-model="project.points" />
And than in the controller write:
$scope.project.points = $scope.project.firstmatch - $scope.project.secondmatch - $scope.project.thirdmatch - $scope.project.fourthmatch - $scope.project.fifthmatch;