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.
Related
Am working on the frontend part of an application whereby I have
some form inputs (wrapped in divs). Each div has a button called
Add Beneficiary. Basically when the user clicks on the button, the div
below it should be displayed (which is hidden by default) and the
sequence continues (each button on a div clicked the div below it
displays).
On the button of each div I have writen some logic whereby on click event
a function called addBeneficiary is triggered. I parse the id of the
button clicked. Next in the function I manipulate the DOM by reaching
out to the parent div and displaying it but the logic does not
work.
~ Kindly assist?
Markup
<!--Person One-->
<div class="container mg-t-30" id="beneficiary1">
<div class="row col-11 mx-auto">
<div class="col-12">
<div class="row">
<div class="col-6">
<label> Category</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="col-6">
<label>Family Size</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="row">
<div class="col-12">
<button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
</div>
</div>
</div>
</div>
</div>
<!--Person Two-->
<div class="container mg-t-30" style="display:none;" id="beneficiary1">
<div class="row col-11 mx-auto">
<div class="col-12">
<div class="row">
<div class="col-6">
<label> Category</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="col-6">
<label>Family Size</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="row">
<div class="col-12">
<button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
</div>
</div>
</div>
</div>
</div>
Logic
function addBeneficiary(beneficiary){
let check = $('#' + beneficiary).parents('div').last().prop('id');
//console.log(check);
$("check").css("display", "block");
}
Its not working because both parents div id is "beneficiary1". And you can't use same id with multiple tag. It should be unique like beneficiary1, beneficiary2 & so on... And also little bit change into your script.
function addBeneficiary(beneficiary){
let check = $('#' + beneficiary).parents('div').next('div');
//console.log(check);
check.css("display", "block");
}
jsfiddle https://jsfiddle.net/y2mva6es/
i have a case here. when clicked on button i want the class to be change for example if the button is clicked i want hide-tab to be removed and at the same time i want to add show-tab class this is my jquery code please help me with it
$(document).ready(function() {
$('#button').on('click', function() {
$('.form-group').removeClass('hide-tab');
$(this).addClass('show-tab');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-container">
<form class="fs-form fs-form-full">
<div class="form-group">
<label class="field">What is your name?</label>
<input type="text" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What is your mobile number?</label>
<input type="text" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What is your email address?</label>
<input type="email" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What type of event do you want us to organize?</label>
<select class="form-control">
<option>Dance Events</option>
<option>Birthday Events</option>
<option>Family Gathering Events</option>
<option>Marathon Events</option>
<option>Awards Ceremony</option>
<option>Art Competition</option>
</select>
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">Breif your thoughts</label>
<textarea class="form-control"></textarea>
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">Schdule Meeting</label>
<input type="date" class="form-control">
<div class="border"></div>
</div>
<div class="form_group">
<button type="submit" class="btn btn-primary" id="button">Continue</button>
</div>
</form>
</div>
Since your button type is submit.So changes happen but at-once form is processed and everything is reloaded. That's why you are unable to see the changes.
Use preventDefault() like below:-
$(document).ready(function() {
$('#button').on('click', function(e) {
e.preventDefault();
$('.form-group').removeClass('hide-tab'); // remove hide-tab class from all elements having form-group class
$(this).addClass('show-tab'); // this will add class to the button only not to others
});
});
I am trying to create/make my first drag/drop/select image upload.
I have a backend to a site where I am trying to add a "car" and see the form below. I am trying to figure out, do I need to handle the images outside the form or what is the best way to get around it?
Ideally I would like to allow the user to drag/select images after the "supporting text" area in a drag/drop box.
Upload Page is Here
I suppose what I am asking, as I believe this is generally handled by jquery, what is the best way to handle it. Ideally when I hit the create button I would like to send it all off to another php page to be submitted into the database and the path for the images store but I know I need to "upload the images" before I move to the next page?
See this example. It might help you.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<!-- FORM START -->
<form class="form-horizontal">
<fieldset>
<div class="col-md-6">
<h3> Preexisting Fields </h3>
<hr/>
<!-- First Name -->
<div id="firstnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">First Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="John" class="form-control pull-right">
</div>
</div>
<!-- Last Name -->
<div id="lastnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
<label class="col-md-3 control-label" for="textinput">Last Name</label>
<div class="col-md-9" >
<input id="textinput" name="textinput" type="text" placeholder="Doe" class="form-control input-md">
</div>
</div>
</div>
</fieldset>
</form>
<!-- INSERT HERE: i want to be able to drag those items above into the panel and create a new form -->
<div id="builder" class="panel panel-default">
<h3> Drag Fields </h3> <hr/>
<div class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
<form id="target" class="form-horizontal">
<fieldset >
</fieldset>
</form>
</div>
</div>
I'm trying to get a couple of date time selector widgets working, but whenever I submit my form, the values returned are undefined. I'm still new to Javascript, and haven't worked with jQuery at all.
My code follows the basic example here: http://eonasdan.github.io/bootstrap-datetimepicker/#minimum-setup
<form method="post" action="/requser/direct-user">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="directTrainingDate">Training Date</label>
<div class='input-group date' name="directTrainingDate" id='directTrainingDate'>
<input type='text' class="form-control">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<script>
$('#directTrainingDate').datetimepicker({
format: 'YYYY-MM-DD'
});
</script>
</div>
</div>
<div class="row"> <!-- Submit button -->
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-custom">Submit</button>
</div>
</div>
</div> <!-- End Submit button -->
</form>
And then back in my Node/Express route, I'm just logging the value of req.body.directTrainingDate, and it's always undefined.
Just for documentation, from my comment above:
You put the name attribute directTrainingDate on the div instead of the input.
I have a form that submits with empty required fields.
I'm using Twitter BootStrap with it.
I posted this example in jsFiddle.
Maybe is just an tag issue from BootStrap, but i'm really not seeing what is wrong.
3 things:
That is not how you use required.
You need to wrap your jQuery code in .ready().
Move the <button> element inside the <form> and make it type="submit".
Updated Code:
$(document).ready(function(){
$(".action").click(()=>{
$(".ajaxForm").submit();
});
$(".ajaxForm").submit(()=>false);
});
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form class="ajaxForm">
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group">
<span class="input-group-addon">
Nome
</span>
<input type="text" class="form-control nome" required />
</div>
</div>
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group">
<span class="input-group-addon">
CPF
</span>
<input type="text" class="form-control cpf" required />
</div>
</div>
<button type="submit" class="action btn btn-success">Teste</button>
</form>
Updated jsFiddle
Thanks for the answers.
Since I have a button (div, actually) outside the form that will trigger the submit, I found my way by (quick fix) triggering a click on a hidden submit button.
The HTML:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form class="ajaxForm">
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group"> <span class="input-group-addon">
Nome
</span>
<input type="text" class="form-control nome" required />
</div>
</div>
<div class="container col-sm-6 col-xs-12">
<div class="form-group input-group"> <span class="input-group-addon">
CPF
</span>
<input type="text" class="form-control cpf" required />
</div>
</div>
<input type="submit" style="display:none" /> <!-- The hidden button -->
</form>
<button class="action btn btn-success">Teste</button>
The JavaScript:
$(".action").click(() = > {
$(".ajaxForm input[type='submit']").click();
});
$(".ajaxForm").submit(() = > false);
So, this quick fix will work, for now. Here is the jsFiddle updated.