Develop Reference

JQuery on('click') does not work when clicked

So I'm currently working on this project and I am stuck this problem. I tried looking at the console but it doesn't show anything when I clicked the button. What I'm trying to do is when I click the button, it will trigger the file input, but so far, when I clicked it, nothing happens, not even an error is shown.(The code is based on the answer in this question: Bootstrap form upload file layout) Can you guys help me find out what I did wrong
These are the codes
TabUploadDokumen.html
<script>
$(document).ready(function () {
/* Some code here */
});
$('#btn_IdentitasKTP/Paspor').on('click', function () {
$('#file_IdentitasKTP/Paspor').trigger('click')
});
$('#file_IdentitasKTP/Paspor').change(function () {
var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
$('#text_IdentitasKTP/Paspor').val(file_name);
});
</script>
<!--Some other code -->
<div class='form-group'>
<label class='control-label'>Nama Dokumen<br /><span style='font-weight:normal;'>Silahkan scan/foto dokumen Anda disini</span></label>
<div class='form-group'>
<label for="text_IdentitasKTP/Paspor" id="lbl_IdentitasKTP/Paspor" class="control-label">Identitas(KTP/Paspor)</label>
</div>
<div class="input-group">
<input type="file" id="file_IdentitasKTP/Paspor" name="name_file_IdentitasKTP/Paspor" accept="image/jpg,image/jpeg,application/pdf,image/png" style="display: none" />
<input type="text" class="form-control" id="text_IdentitasKTP/Paspor" readonly />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btn_IdentitasKTP/Paspor">Upload KTP/Paspor</button>
</span>
</div>`
</div>
<!-- Some other code -->
I'm using ASP.NET MVC 5 and Bootstrap version 3.00 and Jquery version jquery version 1.11.1 if it is any help.
Thanks in advance

Your selectors contain forward slashes that need to be escaped like this:
$("#btn_IdentitasKTP\\/Paspor'")

Ensure that your jQuery code is sat within your document.ready() function.
Escape the selectors that contain forward slashes (click here for more)
I would also replace
$('#btn_IdentitasKTP/Paspor').on('click', function () {
with
$('document').on('click','#btn_IdentitasKTP\\/Paspor', function () {

The on('click') function needs to run in the $(document).ready function, otherwise it will run before the DOM is ready and won't find the element it's supposed to bind to.
$(document).ready(function () {
$('#btn_IdentitasKTP\\/Paspor').on('click', function () {
$('#file_IdentitasKTP\\/Paspor').trigger('click')
});
});
(And escape the slashes as suggested in another answer)

it doesn't work because script tag is render before the html elements. it will work if you change the code as below,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Some other code -->
<div class='form-group'>
<label class='control-label'>Nama Dokumen<br /><span style='font-weight:normal;'>Silahkan scan/foto dokumen Anda disini</span></label>
<div class='form-group'>
<label for="text_IdentitasKTP_Paspor" id="lbl_IdentitasKTP_Paspor" class="control-label">Identitas(KTP/Paspor)</label>
</div>
<div class="input-group">
<input type="file" id="file_IdentitasKTP_Paspor" name="name_file_IdentitasKTP_Paspor" accept="image/jpg,image/jpeg,application/pdf,image/png" style="display: none" />
<input type="text" class="form-control" id="text_IdentitasKTP_Paspor" readonly />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btn_IdentitasKTP_Paspor" >Upload KTP/Paspor</button>
</span>
</div>`
</div>
<script>
$(document).ready(function () {
/* Some code here */
});
$('#btn_IdentitasKTP_Paspor').on('click', function () {
$("#file_IdentitasKTP_Paspor").click()
});
$('#file_IdentitasKTP_Paspor').change(function () {
var file_name = this.value.replace(/\\/g, '/').replace(/.*\//, '');
$('#text_IdentitasKTP_Paspor').val(file_name);
});
</script>
<!-- Some other code -->

Concatenate the value of a textbox with a link and use it in an href (HTML)

I have some problems passing the text value of a textbox to a href. I want to do something like this:
<div class="form-group mx-sm-3 mb-2">
<label for="inputWord" class="sr-only">word</label>
<input type="text" class="form-control" id="inputWord" placeholder="Word">
</div>
And then I want to do a google search:
<a type="button" class="btn btn-primary mb-2" href="https://www.google.com.uy/search?q=" + 'inputWord' target="_blank">Search</a>
I know that it's wrong but I've no idea about how to make it work. I put everything inside a form.

Replace a tag element with button
<button onclick="doSearch()">Search</button>
<script>
function doSearch() {
let word = document.querySelector('#inputWord').value;
window.location = "https://www.google.com.uy/search?q=" + word;
}
</script>

What you need to do is collect the form value and send it as a variable to the link with js.
This script sends data when the input field has Changed
<div class="form-group mx-sm-3 mb-2">
<label for="inputWord" class="sr-only">word</label>
<input type="text" class="form-control" id="inputWord" placeholder="Word" onChange="setHref(this.value)"> </div>
<script>
function setHref(val){
document.getElementsByClassName("btn").setAttribute("href", val)
}
</script>

Jquery each loop in rows not working

i want to get each value when a button clicked.
what i missed?
//add row
$("#btnAdd").click(function(){
$(".oItem:last").clone().insertAfter(".oItem:last");
});
//submit
$("#btnCalc").click(function(){
$("[id^=txtItemName]").each(function(){
alert($("#txtItemName").val());
});
});
my fiddle here
https://jsfiddle.net/k5ndm840/3/
thanks

You are using the same ID for each new field being added. You should use class instead of id in your case as id has to be unique.

Use $(this).val(); as you will be getting this => current element in each iteration. In each callback, this refers to the element
$("#txtItemName") will always select first element having id as txtItemName
Try this:
$("#btnAdd").click(function() {
$(".oItem:last").clone().insertAfter(".oItem:last");
});
$("#btnCalc").click(function() {
$("[id^=txtItemName]").each(function() {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnAdd">Add</button>
<button id="btnCalc">Submit</button>
<div class="masterItem">
<div class="row oItem">
<div class="col-md-4">
<div class="form-group">
<div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
<input id="txtItemName" type="text" class="form-control" placeholder="put random number here" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</div>
Fiddle here
Edit: As per the www standards, There must not be multiple elements in a document that have the same id value. [Ref]. As you are dealing with attribute selector, you are not facing any issue but ID MUST BE UNIQUE
Edit: To find another child under the parent element, use .closest() to find the parent element and .find() to select child of the parent.
Try this:
$("#btnAdd").click(function() {
$(".oItem:last").clone().insertAfter(".oItem:last");
});
$("#btnCalc").click(function() {
$("[id^=txtItemName]").each(function() {
alert($(this).val());
alert($(this).closest(".form-group").find('[id=txtTwo]').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btnAdd">Add</button>
<button id="btnCalc">Submit</button>
<div class="masterItem">
<div class="row oItem">
<div class="col-md-4">
<div class="form-group">
<div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
<input id="txtItemName" type="text" class="form-control" placeholder="put random number here" aria-describedby="basic-addon1">
<input id="txtTwo" placeholder="second input">
</div>
</div>
</div>
</div>
</div>

when you are trying to access the elements with id it will always give the first element matching the selector criteria.
$("#txtItemName").val()
This will always give the value of first matching element. Try to do like this.
//submit
$("#btnCalc").click(function(){
$("[id^=txtItemName]").each(function(){
console.log($(this).val());
});
});

How to remove space after using remove() function jquery

I'm making reminder app here is the interface
Now when i click the "All Checked" button all the check boxes removes. I'm using remove() function for that but after removing these check boxes the space remains there, and when I'm putting the new value it's coming after that space. I was trying trim function but its not working
MY HTML
<div class="has-success topSpaceFromRoof">
<div class="checkbox">
</div>
</div>
<button class="btn btn-default btn-block slight" id="allFinished">
ALL Checked
</button>
MY JAVASCRIPT
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').trim();
});
MY JAVASCRIPT FOR INPUT VALUES
$('<label><span>' +
'<input type="checkbox" id="checkboxSuccess" value="option1">' +
input.val().toUpperCase() +
'</span></label><br/>').appendTo('.checkbox');
event.preventDefault();
Looks Like This

Try this,
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').html('');
});
Another option you can use by using some CSS like,
.checkbox label{
display:inline-block;
margin:2px 0;
}
And no need to add <br/> after your dynamically added label's.
And some jquery code like,
$('#allFinished').click(function(){
$('.checkbox label').remove();
});

Try
$('#allFinished').click(function(){
$('.checkbox').find('*').remove();
// $('.checkbox').empty();
});

Please try this :
Use .empty(); method
$('#allFinished').click(function(){
$('span').empty();
});
Reference
Demo

This is what you need to code
DEMO
HTML
<input type=text />
<input type=button value=Submit />
<div class="has-success topSpaceFromRoof">
<div class="checkbox">
</div>
</div>
<button class="btn btn-default btn-block slight" id="allFinished">
ALL Checked
</button>
CODE
$(document).ready(function(){
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').empty();
});
$(":button[value=Submit]").click(function(){
var input=$(":text");
$('<label><span>' + '<input type="checkbox" id="checkboxSuccess" value="option1">' + input.val().toUpperCase() + '</span></label><br/>').appendTo('.checkbox');
});
});

Think about your markup first. Try to come up with a structure which allows you identify a whole block of your checkboxes with its label, the input itself and whatever element you want to associate with this checkbox.
Something like this:
<div class="checkbox-wrapper">
<label>
Blablub
<input type="checkbox" value="1" />
</label>
</div>
Now in your click event you could loop through all your checkboxes (elements with your identifiying class checkbox-wrapper) and remove the whole element if its checkbox is checked:
$(document).ready(function(){
$('#allFinished').on("click", function(){
$(".checkbox-wrapper").each(function(){
if($(this).find("input[type=checkbox]").prop("checked")){
$(this).remove();
}
});
});
});
Working Demo: https://jsfiddle.net/n1o3t3nz/1/

jQuery keyup - not visible second input

HTML:
<div id="block">
<input type="text" value="1" id="number" />
<div id="price"></div>
</div>
<div id="block">
<input type="text" value="1" id="number" />
<div id="price"></div>
</div>
jQuery:
<script type="text/javascript">
$(function() {
$("#number").keyup(function () {
var value = $(this).val()*5;
$("#price").text(value);
}).keyup();
});
</script>
Price is only displayed at first. Why?
How it is correct to make?
Blocks can be endless.
UPDATE:
Make:
var id = 1;
$('.number').each(function() {
$(this).attr('id', 'id_' + id++);
});
How it associate?
Blocks can be endless.

Your code is searching for id = price where as your html has price as class.
Basically instead of
$("#price").text(value);
you should be using
$(".price").text(value);
# is used for id selector and . is used for class selector
Update:
As per edited Code:
In your html there are two div with the same id, whereas every element should have a unique id. Please change id of the element to be unique may be price1, price2 and then use
jQuery('#price1').text(value) or jQuery('#price2').text(value) as per your case

I'd suggest using the following:
$('input:text.number').keyup(
function() {
var v = parseFloat($(this).val()),
s = v*5;
$(this).next('.price').text(s);
});​
JS Fiddle demo.
The jQuery, onkeyup, takes the current user-entered value of the input, parses it to make sure it's a number, and then updates the next sibling-element that matches the supplied selector (.price) of the text-input, with the calculated number.
The above uses corrected, and now-valid, HTML:
<div class="block">
<input type="text" value="1" class="number" />
<div class="price"></div>
</div>
<div class="block">
<input type="text" value="1" class="number" />
<div class="price"></div>
</div>​
References:
next().
parseFloat().
text().
:text selector.
val().