Getting text from input to replace label text in another form - javascript

reposting for simplicity. i want to have the text users enter into an input to replace the label text of another form's input. Additionally, the form is a plugin which doesn't let me attach an id to the specific label tag of the text i want to change. how can i do this, in vanilla javascript please.
the input users put text into:
<input class="charInput" id="name1" type="text" onKeyUp="change1(this)" >
the form label i want to change the text in (p.s: cant use the class(not unique to this label), cant add id):
<div id="frm_field_53_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label" for="field_inputactor1">
TEXT TO REPLACE
<span class="frm_required"></span>
</label></div>

Maybe it is not the best solution, but it is a solution that works in Firefox and Chrome (not tested under IE)
findLabelToChange = function() {
var div = document.getElementById("frm_field_53_container");
return div.querySelector("label");
};
customizeText = function(text) {
return text + ' <span class="frm_required"></span>';
};
change1 = function() {
var label = findLabelToChange();
var text = document.getElementById("name1").value;
label.innerHTML = customizeText(text);
};
you can see a example in this feedle
http://jsfiddle.net/HAK5X/1/

Here is a fiddle.
It is one line of code.
http://jsfiddle.net/te3jv/6/
function change1(myInput){
document.getElementById('frm_field_53_container').querySelector("label").innerHTML =myInput.value;
}
Alternatively add <span class="frm_required"></span> to the end of HTML reassignment to keep your empty (but required?) span.

Related

I try to pass the content of a paragraph element into a field of a contact form using Javascript

So the problem is this:
I try to get the text that is inside a specific paragraph with a specific id name and pass it inside a contact form .
i tried this
var src = document.getElementById("ptext"),
dest = document.getElementById("inform");
src.addEventListener('input', function() {
dest.value = src.value;
}};
Where "ptext" is the id of the element with the text of the paragraph and the "inform" is the id of the field in contact form.
The above code will trigger when the user clicks a button.
I am new in Javascript so the code above is probably wrong or faulty.
UPDATE: The HTML Code is this :
<p id="pext">Hello this is the text that is to be imported inside the form field</p>
form field:
<input type="text" name="your-subject" value="" size="40" id="inform" aria-required="true" aria-invalid="false" placeholder="Subjext">
I'm not sure if this is what you were trying to do, but if you're trying to get the text of a paragraph into a form field on a button click (useful a lot of the time with hidden form fields), then here is a code snippet to help you:
var src = document.getElementById("ptext");
var dest = document.getElementById("inform");
var getText = function () {
dest.value = src.innerText;
event.preventDefault();
return false;
}
<p id="ptext">This is some fake text that we'll put into the form.</p>
<form onsubmit="getText()">
<label for="text">Info from paragraph:</label><br>
<input type="text" id="inform" name="text"><br><br>
<input type="submit" >
</form>
Hello and welcome to Stack Overflow :)
To get the text that is inside specific paragraph, use
var src = document.getElementById("ptext").innerText;
To assign the value to an input field (which is what I'm assuming you are trying to do), use
document.getElementById("inform").value = src;
If you supply us with HTML element we could be even more precise.

passing data from one side of the page right to left?

Passing the data from a data box input into a static logger on the left so basically what you type on the right is outputted on the left in its own little box? I need some js php help?
<div class="div-left">
text logged input
</>
<div class="div-right">
text box input
</>
You need to attach event listener to input and update the target element as you type.
For example:
var left = document.getElementById('left');
var p = document.querySelector('.box p');
left.addEventListener('input', function(){
p.innerText = left.value;
})
Example codepen link
You can't type directly into a div. You can type into an input tag and remove the border. To get the text to change as you type use onkeyup as oppose to an event listener
function myFunction(){
text = document.getElementById("input").value;
document.getElementById("div-right").innerHTML = text;
}
//input {border:0;outline:0;}
//input:focus {outline:none!important;}
<div id="div-left" style="width:40%;float:left;margin-left:50px">
<input id = "input" onkeyup="myFunction()"\>
</div>
<div id="div-right" style="float:right;margin-right:50px;width:40%">
text box input
</div>
It's simple with jQuery.
$('textarea').click(function(){$(this).select();});
$('textarea').keyup(function(){
$('div').text($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<textarea style="float:left;">Please type here</textarea>
<div style="white-space:pre;float:left; margin-left:30px;"></div>

Changing a label's text by the FOR attribute

I would like to set the text of the label. Unfortunately the number 36 will change on each page refresh.
<label for="rn_TextInput_36_Incident.CustomFields.c.other_action_taken" id="rn_TextInput_36_Label" class="rn_Label">TEXT HERE</label>
<input type="text" id="rn_TextInput_36_Incident.CustomFields.c.other_action_taken" name="Incident.CustomFields.c.other_action_taken" class="rn_Text" maxlength="50" required="">
I can get the ID by using:
var id = document.getElementsByName('Incident.CustomFields.c.other_action_taken')[0].getAttribute('id');
How can I then use this to set the label text i.e. target the label by the value of the for attribute in JavaScript - not jQuery
So as mentioned, the number will change each time so I can't use the ID value of rn_TextInput_36_Label that the label currently has
Your element has the class rn_Label, so you can select by that.
var el = documment.querySelector(".rn_Label");
If you need to get more specific, you can include the tag name and part of the for attribute.
var el = documment.querySelector("label.rn_Label[for^=rn_TextInput_][for$=_Incident.CustomFields.c.other_action_taken]");
So this last selector selects the first element that:
has tag name label
has class name rn_Label
has a for attribute that starts with rn_TextInput_
has a for attribute that ends with _Incident.CustomFields.c.other_action_taken
And of course you can use querySelectorAll to select all elements on the page that meet that criteria.
you can work same as this code:
var input = document.getElementsByName('Incident.CustomFields.c.other_action_taken')[0];
if(input.labels.length > 0) {
var labelID = input.labels[0].id;
document.getElementById(labelID ).innerHTML = 'New Text for this lable';
}
else {
alert('there is no label for this input');
}
https://jsfiddle.net/SETha/75/
var id = document.getElementsByName('Incident.CustomFields.c.other_action_taken')[0].getAttribute('id');
document.querySelector("label[for='"+id+"']").innerText = 'new text';
It gets the ID and then uses querySelector to get the related label and sets the innertext

Text that change based on form fields

I'm looking to put together a form on our website that would feature a preview sentence based on a series of input boxes and drop down menus. I know how to change text based on the input of a drop down menu. However, how do you change the entire sentence (not just the variable) if something in particular is selected? Do you know how to accomplish something like this?
For example (3 input questions to make up a sentence):
1) School name (text field)
2) What would best describe you? (drop down menu)
Sophmore
Senior
Professor
Masters Degree Holder
3) What are you [studying, teaching, have studied]? (text field)
If 'Sophmore' is selected, the preview sentence should look like this:
[Sophmore] at [Harvard] studying [Math]
But if the user selects 'professor', then it would go like this:
[Professor] at [Harvard] teaching [Math]
And if the user selects 'Masters Degree Holder', it would go like this:
[Masters Degree Holder] for [Math] at [Harvard]
Any ideas on how to make this happen?
Thanks!
Something like this would work. You can monitor the inputs one at a time and set the text of the sentence. Or perhaps you want to use a complete button and just build it at the end. Either way the concepts are the same. In your html assign id's to the inputs. For your sentence you can use spans with ids. Then use document.getElementById to retrieve the values of the inputs. When they are changed update the sentence. You can use innerHTML to set a new value on an element.
http://jsfiddle.net/pktMJ/
<select id="description">
<option></option>
<option>Sophmore</option>
<option>Senior</option>
<option>Professor</option>
</select>
<br />
<input id="school" type="text" />
<br />
<input id="study" type="text" />
<div >
<span id="a"></span> at <span id="b"></span> studying <span id="c"></span>.
</div>
document.getElementById('description').onchange = function() {
document.getElementById('a').innerHTML = this.value;
var verb = '';
switch (this.value) {
case 'Professor':
verb = 'teaching';
break;
case 'Sophomore':
verb = 'studying';
break;
case 'Senior':
verb = 'studying';
break;
}
document.getElementById('d').innerHTML = verb;
};
document.getElementById('school').onblur = function() {
document.getElementById('b').innerHTML = this.value;
};
document.getElementById('study').onblur = function() {
document.getElementById('c').innerHTML = this.value;
};

Persisting textbox value using jQuery

I'd like to save the newly entered values, so I could reuse them. However, when I try to do the following, it does not work:
// el is a textbox on which .change() was triggered
$(el).attr("value", $(el).val());
When the line executes, no errors are generated, yet Firebug doesn't show that the value attribute of el has changed. I tried the following as well, but no luck:
$(el).val($(el).val());
The reason I'm trying to do this is to preserve the values in the text boxes when I append new content to a container using jTemplates. The old content is saved in a variable and then prepended to the container. However, all the values that were entered into the text boxes get lost
var des_cntr = $("#pnlDesignations");
old = des_cntr.html();
des_cntr.setTemplate( $("#tplDesignations").html() );
des_cntr.processTemplate({
Code: code,
Value: val,
DivisionCode: div,
Amount: 0.00
});
des_cntr.prepend(old);
This is the template:
<div id="pnlDesignations">
<script type="text/html" id="tplDesignations">
<div>
<label>{$T.Value} $</label>
<input type="text" value="{$T.Amount}" />
<button>Remove</button>
<input type="hidden" name="code" value="{$T.Code}" />
<input type="hidden" name="div" value="{$T.DivisionCode}" />
</div>
</script>
</div>
You want to save the previous value and use in the next change event?
This example uses .data to save the previous value. See on jsFiddle.
$("input").change(function(){
var $this = $(this);
var prev = $this.data("prev"); // first time is undefined
alert("Prev: " + prev + "\nNow: " + $this.val());
$this.data("prev", $this.val()); // save current value
});
jQuery .data
If you want old/Initial text box value, you can use single line code as follows.
var current_amount_initial_value = $("#form_id").find("input[type='text']id*='current_amount']").prop("defaultValue");
If you want current value in the text box, you can use following code
$("#form_id").find("input[type='text']id*='current_amount']").val();

Categories