We Keep Coding

Access the value of an input that is loaded after the dom

how can I access the value of an input text field, which loads propably after the dom?
I am working with leaflet at the moment and a plugin creats an input field and I don't know, how to access it.
If I try this:
$('#myTextbox1').on('input', function() {
alert($('#myTextbox1').val());
});
I don't get any result. I guess, jQuery can't handle the created input field.
My HTML looks like this:
#extends('layouts.app')
#section('head')
<link rel="stylesheet" type="text/css" href="{{ asset('css/leaflet/leaflet.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/leaflet/leaflet-search.css') }}">
#ensection
#section('content')
<div class="col-md-8 col-md-offset-2 form-container">
<div id="map-adress"></div>
<div class="panel panel-default marker-panel">
<div class="panel-heading">Create a post</div>
<div class="panel-body">
<div class="col-md-8 col-md-offset-4">
<p>Insert the adress of the marker position<br>
(You can move the marker on the map to the right position).</p>
</div>
<div class="form-group">
<label for="findbox-adress" class="col-md-4 control-label find-label">Marker Location</label>
<div class="col-md-6">
<div id="findbox-adress"></div>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-primary user_marker_btn">
Validate
</button>
</div>
</div>
</div>
</div>
<div id="user_marker_adress" class="panel panel-default">
<div class="panel-heading">Validate the marker adress</div>
<div class="panel-body">
<form class="form-horizontal" method="POST" action="{{ route('userposts.create') }}">
{{ csrf_field() }}
<div class="form-group">
<label for="a_street" class="col-md-4 control-label">Street</label>
<div class="col-md-6">
<input id="a_street" type="text" class="form-control" name="a_street" required>
</div>
</div>
<div class="form-group">
<label for="a_street_no" class="col-md-4 control-label">Street No.</label>
<div class="col-md-6">
<input id="a_street_no" type="text" class="form-control" name="a_street_no" required>
</div>
</div>
<div class="form-group">
<label for="a_zip_code" class="col-md-4 control-label">Zip Code</label>
<div class="col-md-6">
<input id="a_zip_code" type="text" class="form-control" name="a_zip_code" required>
</div>
</div>
<div class="form-group">
<label for="a_state" class="col-md-4 control-label">State</label>
<div class="col-md-6">
<input id="a_state" type="text" class="form-control" name="a_state" required>
</div>
</div>
<div class="form-group">
<label for="a_country" class="col-md-4 control-label">Country</label>
<div class="col-md-6">
<input id="a_country" type="text" class="form-control" name="a_country" required>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="reset" class="btn btn-danger">
Clear
</button>
<button type="submit" class="btn btn-primary">
Next
</button>
</div>
</div>
</form>
</div>
</div>
#endsection
#section('scripts')
<script type="text/javascript" src="{{ asset('js/leafleat/leaflet.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/leafleat/leaflet-search.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/leafleat/marker-adress.js') }}"></script>
#endsection
The div with the ID "findbox-adress" triggers the plugin, which will create the form with the input, that I can't access.
Hope, someone got an idear of my problem...
Edit:
OK, I have found an ID in this element and with the ID it is working, but only the text, that I have typed in. The plugin gives me a dropdown selection(autocomplete like ajax) where I can choose a unordered list with some li's. But there I can't get a value? How can I get the value, if someone is clicking on the autocomplete(li's)?
My try:
$(".user_marker_btn").click(function(){
console.log($("#searchtext9").val());
});

On dynamically created elements, use event delegation to attach event listeners.
Attach the event listener to a parent element that existed on DOM-load, and then pass the element that you wish to delegate the event to:
$('body').on('input', '#myTextbox1', function() {
alert($('#myTextbox1').val());
});

First of all, your given code doesn't look right. Please refer to jQuery manual: http://api.jquery.com/on/
This might be:
$( "body" ).on( "click", "input#myTextbox1" function() {
console.log( $( this ).val() );
});
As you said, "The div with the ID "findbox-adress" triggers the plugin, which will create the form with the input"
If you can track the event when the div 'findbox-adress' get clicked or triggered, you can easily check for the form whether it has been added in the DOM or not and then check for input field by using $("input#myTextbox1").val();
Or if you cannot track the event of loading the form, you will need to have a function to check always when the form is getting loaded into the DOM. That might be using setTimeout() or any other method by framework/library. And finally stop the tracking when the form loaded.

How to Clean input file Bootstrap field

Person,
I have a page with 2 input text and 2 input file when I get the ajax response, send clear the entire form as the code below, but only a field is not cleared the field:
Here my page
<input class="fileUploadAudio" id="fileUploadAudio" name="fileUploadAudio" type="file"></span>
I believe we should have some conflict, I have done everything and I can not clear this blessed country.
PS: If you need I publish the page to take a look.
<div class="form-group">
<label class="col-sm-3 control-label">Imagem para Push</label>
<div class="col-sm-6">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://placehold.it/190x140/7761A7/ffffff" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar imagem</span><span class="fileinput-exists">Alterar</span>
<input class="arquivo" id="arquivo" name="arquivo" type="file"></span>
Remover
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Áudio para a campanha</label>
<div class="col-sm-6">
<div class="fileinput fileinput-new" data-provides="fileinput">
<input name="..." value="" type="hidden">
<span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar áudio</span>
<span class="fileinput-exists">Alterar</span>
<input class="fileUploadAudio" id="fileUploadAudio" name="fileUploadAudio" type="file"></span>
<span class="fileinput-filename"></span>
×
</div>
</div>
</div>
In return I send ajax clear the form fields like this:
$(".formulario")[0].reset();
$(".formulario").get(0).reset();
$('#cancelButton').hide();
$("#fileUploadAudio").val("");
$('#submitButton').hide();
I have even tried to clear only the input file this way:
$('#fileUploadAudio').val('');

I assume that you are trying to reset the whole form.
Change the outer div tag to formas followings:
Replace
<div class="form-group">...</div>
with
<form class="form-group" id="formulario">...</form>
Reset form using jQuery
$("#formulario")[0].reset();

if native java script reset function is not working you need to trigger the reset function
$("#formulario").trigger("reset");

Preventing bootstrap from breaking between two form elements

I am using bootstrap with the bootstrap datetimepicker and have a bit of a problem.
My problem is best explained by this JSfiddle.
What I want to do is to have three separate form divs in a row and for them to stay in one row no matter the screen size. I would usually acchieve this by simply having a form-group div (as seen in the "situation I want" of the JSfiddle), however in this case, that is not possible because if I do that, then the second input messes with the javascript of the bootstrap datetimepicker, so I cannot touch the form group div.
Is there any way of acchieving what I want to do?
The HTML in which my problem is isolated is:
<div class="container">
<div class="row">
The situation right now:
<div class="col-sm-2 col-sm-offset-5">
<div class="form-inline">
<div class="form-group">
<div class="input-group date date-filter" id="start-date">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<input type="text" class="form-control" id="end-time" />
</div>
</div>
</div>
<div class="row">
The situation I want:
<div class="col-sm-2 col-sm-offset-5">
<div class="form-group">
<div class="input-group date date-filter" id="end-date">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" class="form-control" id="end-time"/>
</div>
</div>
</div>
</div>
</div>

How is user input submitted in bootstrap 3 form?

I'm using bootstrap 3, which includes jquery 1.11.2.min.js. I'm updating a search webpage with two textfields: keyword and city,state,zip. I have a script for the search results that needs to pull the user input that's typed into these two search textfields for finding the desired search results.
Visual explanation:
My search bar with placeholders and search button:
My search bar with my user input (searching for an engineering job in Boston):
In the HTML, there is no unique value (value="Engineer" or value="Boston") created for my engineering job in Boston search:
Without value="Engineer" and value="Boston" I cannot tell my script to display search results of engineering jobs in Boston. Where do I find/create this to pull into my search script?
Is this located in the bootstrap.js file anywhere? I'm having trouble figuring out where/how this form is pulling the user input value (without having to use value="" for each input).
Your help is much appreciated - my form is below.
<div id="somebanner" class="somebanner-bgsearch-red hero1 hidden-xs">
<div class="container-fluid">
<div class="top-section">
<div class="container">
<form class="form-inline no-margin center-block" action="http://www.somesite.com/unknown" method="POST" role="form">
<div class="row">
<center>
<fieldset>
<!-- Search input-->
<div class="form-group center-block">
<div class="col-sm-4">
<input id="keyword" name="keyword" type="search" placeholder="Keyword" class="form-control input-lg">
</div>
</div>
<!-- Search input-->
<div class="form-group center-block">
<div class="col-sm-4">
<input id="location" name="location" type="search" placeholder="City, State, or Zip Code" class="form-control input-lg">
</div>
</div>
<input type="hidden" name="unknown" value="unknown">
<!-- Button -->
<div class="form-group center-block">
<div class="col-sm-2">
<button type="submit" id="btn-search" name="btn-search" class="btn btn-primary btn-lg btn-tusaj">Search</button>
</div>
</div>
</center>
</fieldset>
</div>
</form>
</div>
</div>
</div>
</div>
Here's the link to the bootstrap.js code: http://getbootstrap.com/dist/js/bootstrap.js
Herer's the link to the jquery code:
https://code.jquery.com/jquery-1.11.2.js

You're trying to use Bootstrap for modifying HTML, but Bootstrap is a CSS framework used for responsive design. It's incapable of doing such HTML modification. You need to use jQuery:
$(document).ready(function(){
$("#btn-search").click(function(e){
e.preventDefault();
var x = $("#keyword").val();
var y = $("#location").val();
$("#keyword").attr("value", x);
$("#location").attr("value", y);
});
});
That should do the work. If you have further questions, let me know in the comments.

Functions in Angular controller not activated on button click

I am trying to make a contact me from with Angular. Right now, I have some input fields, a button, and an angular app as a script in the page to try and make things as simple as possible. I was trying to make sure things are talking to each other so I just put a console.log in my angular controller which I think should print to the console when I click the button. However, it just reloads the page every time.
Below is the code that is showing this issue
HTML:
<body ng-app="contactApp">
<div class="container">
<div class="row">
<div class="col-sm-8 blog-main">
<!-- Input Fields for contact form -->
<form ng-controller="ContactCtrl" class="form-horizontal" role="form" ng-submit="submit(name, email, message)">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input class="form-control" type="text" placeholder="Name" ng-model="info.name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input class="form-control" type="email" placeholder="Email" ng-model="info.email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Message</label>
<div class="col-sm-4">
<input class="form-control" type="text" placeholder="Place Message Here" ng-model="info.text">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-success" type="submit">Contact Me</button>
</div>
</div>
</form>
</div><!-- /.blog-main -->
</div><!-- /.row -->
</div><!-- /.container -->
JS:
var contactApp = angular.module('contactApp', [])
.controller('ContactCtrl', function ($scope, $http){
$scope.submit = function (name, email, message){
console.log('contact with controller')
}
})
Most code is just creating the HTML form, see angular app at the bottom.

ooo so close ;) you've got a little typo in there ng-controller="contactCtrl" != .controller('ContactCtrl') check out your first letter.

I was using Firefox as my browser and I was looking for the output in their developer console. It was appearing in the firebug console. I still don't know why it doesn't appear in the regular console, but I will check firebug as well in the future. I accepted btm1's answer because he pointed out my typo and that made everything work when I started up firebug.