Develop Reference

Change label text for multiple inputs

I have a dynamic page that can have a lot of input[type="file"] fields. I need to change the label of every input once a file is selected.
So, for each input, if:
Empty: text = "upload";
File selected: text = name of file.
Here is a sample of HTML:
<label for="upload-qm1">
<span class="button">upload</span>
<input id="upload-qm1" type="file" accept=".pdf, .doc">
</label>
I know how to do this for a single input, using this code:
$('label[for="upload-qm1"] span').text($(this).val());
However, I don't know how many input fields I will have on my page. I tried something like this:
$(this).parent('label').find('span').text($(this).val());
but unfortunately it doesn't work. Any help on how I can get a method for changing all input fields?

You can use DOM traversal to find the span related to the input which was changed. Try this:
$('input:file').change(function() {
$(this).prev('span').text($(this).val());
})
Working example

The most of the code you tried ist corret.
The problem is that you have set a parameter for the parent() function.
Try something like this:
$(this).parent('label').find('span').text($(this).val());
Also make sure that $(this) is the input field not the label itself,
if you click on the label $(this) is the label.

$('input[type="file"]').on('change', function() {
id = $(this).attr('id');
console.log("change event")
var file = $('#'+id).val().split('\\').pop();
if(file!='') {
$('label[for="'+id+'"] span').text(file)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="upload-qm1">
<span class="button">upload</span>
<input id="upload-qm1" type="file" accept=".pdf, .doc">
</label>

Add required attribute when radio is checked

I have a set of radiobuttons called 'price'. When the '€' radio button is selected, I want to focus on a text input field and that text input field should be required.
When I click another option, the requried attribute should be removed.
Is this possible through Javascript or jQuery?
I found a jQuery snippet here, but it doesn't seem to be working. This is what I have now:
<input type="radio" name="price" value="value" id="value_radio" onclick="document.getElementById('value_input').focus()" required>
<label for="value_input">€</label>
<input type="text" name="price_value" id="value_input" pattern="\d+(,\d{1,2})?"
onclick="document.getElementById('value_radio').checked=true">
<script>
$('#value_radio').change(function () {
if($(this).is(':checked')) {
$('#value_input').attr('required');
} else {
$('#value_input').removeAttr('required');
}
});
</script>
<input type="radio" name="price" id="free" value="free">
<label for="free">Free</label>
JSFiddle: http://jsfiddle.net/fhfrzn1d/

According to this answer, you have to monitor the change on both radio inputs. So move your javascript script after the second radio.
Also there was missing a )
Fiddle updated: http://jsfiddle.net/fhfrzn1d/1/
$('input[name="price"]').change(function () {
if($("#value_radio").is(':checked')) {
$('#value_input').attr('required', true);
} else {
$('#value_input').removeAttr('required');
}
});

You have two (really three) mistakes in your code.
First. The syntax is invalid. You should fix the closing brace as #Hushme recommends in the comments.
First (2). Your usage of jsfiddle is invalid too. You should paste the code to the JavaScript section of the site and also enable jQuery library.
Second. $('#value_input').attr('required') is not creating an attribute; it's a getter. You should use the proper setter there:
$('#value_input').attr('required', true);
Third. The radiobutton change event is not firing when user deselects the radiobutton. So you should handle events on all the buttons:
$('input[name="price"]').change(function () { ... });
I've fixed your jsfiddle, see http://jsfiddle.net/fhfrzn1d/4/

jQuery click function on an array of inputs

I try to implement a change function on every input field named plz_von.
<input type="text" name="plz_von[]" class="plz_von" placeholder="10000">
<input type="text" name="plz_von[]" class="plz_von" placeholder="20000">
<input type="text" name="plz_von[]" class="plz_von" placeholder="30000">
<input type="text" name="plz_von[]" class="plz_von" placeholder="40000">
I want to do it this way:
$('input[name="plz_von[]"]').change(function() {
alert("got it");
});
I don't know what's going wrong. Any idea? I tried it with the class name as well.

Because [ ] is an attribute selector. You need to escape it.
$('input[name="plz_von\\[\\]"]')
Since you have a class that is common, you might as well use that instead.
$('input.plz_von')

Thanks all for the support. Finally I found the failure.
I had to put the jQuery code into the ready function! This is quite clear, because the function cannot by added to the inputfield, when the input field isn't already loaded in the DOM.. grrr
$(document).ready(function() {
$('input[name="plz_von[]"]').change(function() {
alert("hu");
});
});
Best regards,
Marco

How to erase the text input that the user typed using JavaScript

<div class = "search ui-widget">
<label for = "keyword"></label>
<input type="text" id="keyword" onkeypress="searchKeyPress(event)" placeholder="Search here" required>
<input type="button" id="btnSearch" onclick="loadDeals('search', keyword.value,'')" />
</div>
$('.search input#keyword').Value('');
Basically what I want is to remove the user's input in the text box after the user clicks another menu tab. I tried $('.search input#keyword').Value(''); and $('.search input#keyword').css("value", ''); but it didn't work.

.val() is the right name of the jQUery method, not Value().
You can use jQuery like this:
$('#keyword').val('');
Or you can use plain javascript like this:
document.getElementById('keyword').value = '';
If there are more input fields beside the ones you posted and you want to clear all inputs you can use:
$('.search input').val('');

Here's a pure javascript solution:
document.getElementById('keyword').value = '';

Since HTML id attributes are supposed to be unique I would recommend not using the '#keyword' id in your jquery selector. The solution does work if there's only one text field, but it isn't scalable to multiple text fields. Instead, I would make 'keyword' a class for the input element and use the selector:
$('.search input.keyword').val('');
This is very similar to the solution Sergio gave except it allows you to control, via the 'keyword' class, which input elements have their values cleared.

Use this
$("the_class_or_id").val("");
Link for this: jQuery Documentation
This is introduced in jQuery API. You can use .value in JavaScript, but in jQuery its val(). It gets the value of the object and to clear the value, just add quotes!
JavaScript code would be:
document.getElementById("id_name").value = "";

How to name inputs when having several jquery raty in one form?

I'm using the jquery raty plugin http://www.wbotelhos.com/raty/ to make a form with star rating.
The plugin generates a hidden field for each star rating input like this :
<input id="question8-score" type="hidden" name="score">
<input id="question6-score" type="hidden" name="score">
<input id="question5-score" type="hidden" name="score">
The is when I validate the form (I use codeigniter) It just get confused with 3 input with the same name. So I want to make a script that do something like :
For each input with name="score", put the id attribute value as the name attribute value.
I think it's probably possible with jQuery but I don't know how to do that. Could someone help me? Thanks!!

$("input[name=score]").each(function () {
this.name = this.id;
});
Edited the selector

$(document).ready(function() {
$('input[name^="score"]').each(function() { // starts with score
this.name=this.id;
});
}

$('input[name=score]').each(function(){
$(this).attr("name", $(this).attr("id"));
});