We Keep Coding

How do I put two values in the same input with jquery?

How do I put two values in an input with jquery?
I already made this code where I put the value of an input in the textarea, but I want it to put the value of the input along with a customized text.
Example:
Custom text: 'The value is' | Typed in the input: '10'
Final result within the textarea:
'The value is 10'
I don't know if I was specific, but whoever can help me thank you :)
$('.payOnDeliveryValor').change(function() {
$('.woocommerce-input-wrapper textarea').val($('.payOnDeliveryValor').val());
});
<input class="payOnDeliveryValor" />
<div class="input-wrapper">
<textarea></textarea>
</div>

You can use simple string concatenation to join the custom text with the input value:
var custom_text = "The value is ";
$('.payOnDeliveryValor').change(function() {
var text = $(this).val();
if (text) text = custom_text + text;
$('.woocommerce-input-wrapper textarea').val(text);
});

Getting text from input to replace label text in another form

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.

how do I know user info submited?

This is what i have http://jsfiddle.net/bd9wv/... what i am trying to do is have boxes users can input numbers in, and be able to comment back based on the numbers they gave..what i have works for one only...if someone would not mind telling me...what holds the input, i think it's var val? i think i should be able to add more boxes. exp... var al id="number1" type="text"/> ...and then in js..... msg = 'Thank you for the wonderful number: ' + (val+al); but that does not work for me. i would like maybe 10 boxes..but 2-3 is good for me to see how it is done. what i am not understanding is what holds the input and how to use it...explaning a little would be great, i think the submit might be getting me. but if you have an example i can look at it an figure it out,i will be very thankful!!
$('#someButton').click(function () {
var val = $('#inputFieldId').val();
var $outputDiv = $('#outputFieldId');
var msg = '';
if (! $.isNumeric(val)) {
msg = 'Please enter a valid number';
}
else if (parseInt(val, 10) > 100) {
msg = 'Enter number less than 100';
}
else {
msg = 'Thank you for the wonderful number: ' + val;
}
$outputDiv.text(msg);
}

Keeping much of your code in place you can make this work. I changed your ID's to classes, since there will be multiple similar elements. I modified a piece of your JS to the following:
var val = $(this).prev(".number").val();
var $outputDiv = $(this).next().next(".feedback");
Using this you can find the closest elements to the input the user was typing.
And your HTML:
Enter number: <input class="number" type="text"/>
<button class="btnNumber">Submit</button>
<br/>
Feedback: <div class="feedback"></div>
Demo: http://jsfiddle.net/bd9wv/1/

I could not understand clearly; but please try whether this work for you or no http://jsfiddle.net/bd9wv/2/
Example:
var val = $(this).parent().find('.number').val();
Here I have used class and have surround the html block with another div

Best way to add/show additional form fields

I am hoping for some insight on the best way to accomplish the following. I want to create a form that will allow for more fields to be added when a + or add button is clicked. So for example the user would fill out a text field lets call it "Description" and then next to it another field called "Unit number". I want to allow for multiple "Description" and "Unit number" fields without submitting the form after each entry, but for the sake of keeping the site looking "Clean" I don't want there to be several duplicate fields if the user only needs to enter information into one of them. I was thinking about using JavaScript to hide the additional fields by just setting display:none. Is this a good/efficient solution? Is there a better solution? I am new to programming so take it easy if you feel this is a dumb question.

The best way to do this is to make your fields and put them in a div and then hide it. Use jQuery to .clone your first row and then update the field names any time the user clicks an add link.

You can use a templating library like mustache or handlebars. You can also do this using jQuery. My approach would be to generate new elements on the fly. I won't hide it so that the user can see if he is already inputting duplicate. But if you want to make your markup cleaner, you can also hide the field once the user has already inputted something. So when the user clicks on the add button, you will need to check if the user has actually inputted something, if there is an input, then hide it and then generate a new input again.
If you need a code sample, feel free to ask.

Here's some javascript I wrote on my own site awhile ago:
var SITE = SITE || {};
SITE.fileInputs = function() {
var $this = $(this),
$val = $this.val(),
valArray = $val.split('\\'),
newVal = valArray[valArray.length-1],
$button = $this.siblings('.button'),
$fakeFile = $this.siblings('.file-holder');
if(newVal !== '') {
$button.text('File Chosen');
if($fakeFile.length === 0) {
$button.after('<span class="file-holder">' + newVal + '</span>');
} else {
$fakeFile.text(newVal);
}
}
};
var counter = 1;
var limit = 5;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<span class=\"file-wrapper\"><input type=\"file\" name=\"screenshot[]\" id=\"screenshot\" /><span class=\"button\">Choose a screenshot</span></span>";
document.getElementById(divName).appendChild(newdiv);
counter++;
$('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs);
}
}
$(document).ready(function(){
$("#addss").click(function(){
addInput("screenshots");
});
});
Then you can just use the array for the name in the php or whatever else you're using to handle the data.
HTML:
<div id="screenshots">
<span class="file-wrapper">
<input type="file" name="screenshot[]" class="screenshot" />
<span class="button">Choose a screenshot</span>
</span>
</div>
<input type="button" id="addss" value="+Screenshot" class="btn" />

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;
};