Develop Reference

How do I get auto address when using structural directives?

Hi I am not getting this auto address when I am using *ngIf or trying to append the div, otherwise its working completely fine.
What am I supposed to do to get this auto address along with *ngIf and appending it.
<div class="form-group label-floating">
<label class="control-label">Address1</label>
<input type="text" class="form-control search-address" name="address1" placeholder=" " [(ngModel)]="address1" #address1>
</div>
In the above code auto address is working
<div *ngIf="isShow">
<div class="form-group label-floating" *ngFor="let place of places">
<label class="control-label">Place</label>
<input type="text" class="form-control search-address" name="address2" placeholder=" " [(ngModel)]="place.address2" #address2>
</div>
</div>
In the above code auto address is not working and the only difference is I am using structural directives.
my ts code
const address1 = new google.maps.places.Autocomplete(this.address1.nativeElement, { componentRestrictions: { country: 'IN' }, types: [this.adressType]
});
google.maps.event.addListener(address1, 'place_changed', () => { this.place = address1.getPlace(); this.invokeEvent(this.place);
});
Please suggest me a good solution where I can use all three of them.
Thank You.

Form in HTML with button assigns the value of the last button, no matter which one was selected

I want to create a form with HTML with different types of inputs (such as name, surname, dates, and radio-button options), and when I want to print the object with the data inputted in the form on the console, the value from the radio-buttons is not stored correctly.
First of all, this is my first project on this area and also my first posted question on stackoverflow, so I would appreciate some suggestions on how to pose the question better if I'm forgetting some crucial data.
I have been following help from different resources (mostly youtube videos such as: https://www.youtube.com/watch?v=GrycH6F-ksY ) to create this form and submit the data with AJAX, and the code of my javascript application comes mainly from that video.
All the data is stored correctly and I can see it in the console, except from the data comming from the radio-buttons. No matter what option is selected (either "male" or "female"), the console always shows the value of the last button, which in this case is "female". I suppose I am doing something wrong when defining these buttons, and why they are not being "selected" (I suppose that's what is happening since the data shown is always the last default value) but I haven't been able to find out where I am doing something wrong.
I'm including the part of the code that I think might be relevant
<form action="ajax/contact.php" method="post" class="ajax">
<div class="form-row">
<div class="form-group col-md-6">
<label>Name</label>
<input type="text" class="form-control" name="inputName" required>
</div>
<div class="form-group col-md-6">
<label>Surname</label>
<input type="text" class="form-control" name="inputSurname" required>
</div>
</div>
<div class="form-group">
<label>Date of birth</label>
<input type="date" class="form-control" name="inputDate">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="inputEmail" required>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Gender</label>
</div>
<div class="form-group col-md-4">
<div class="radio-inline"><input type="radio" name="inputGender"
value="male">Male</div>
</div>
<div class="form-group col-md-4">
<div class="radio-inline"><input type="radio" name="inputGender"
value="female">Female</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Number of children</label>
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control" name="inputNumber">
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Javascript function
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
method = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
console.log(data);
return false;
});
PHP file
<?php
if (isset($_POST['inputName'],$_POST['inputSurname'],$_POST['inputDate'],$_POST['inputEmail'],$_POST['inputGender'],$_POST['inputNumber'])) {
print_r($_POST);
}
In the console I'm getting this:
${inputName: "myName", inputSurname: "mySurname", inputDate: "2019-12-13",
$inputEmail: "myMail#gmail.com", inputGender: "female", …}
$inputDate: "2019-12-13"
$inputEmail: "myMail#gmail.com"
$inputGender: "female"
$inputName: "myName"
$inputNumber: "1"
$inputSurname: "mySurname"
$_proto_: Object
but I thought it would be showing:
$...
$inputGender: "male"
$...
when the male option is selected.
Thank you very much

The problem is in your JS. You're looping through everything with a name attribute, in order, and adding its value to your submit data. In the case of radio buttons, you have to check if they're selected and only add if so, otherwise, the last one always wins, as you're seeing.
And since you appear to be using jQuery, you can probably just let its serialize helper do this work for you.

Mustache loop duplicate div

I have mustache :
my mustache
after I render, there are 4 divs (which are the same 2 div).
html
I want to display only 2 div or remove duplicate div, can someone help me?
code :
{{#bya_jsa}}
{{#jasa}}
{{#bya_jsa}}
{{#no}}
<div id="divbiayapekerjaan" form-no="{{no}}">
{{/no}}
{{/bya_jsa}}
<div class="form-group">
<label><b>Jasa</b></label>
<input type="text" name="bya_js[][jasa]" value="{{jasa}}" class="form-control" placeholder="Masukkan jasa yang ada" required="required">
</div>
{{/jasa}}
{{#by_mulai}}
<div class="form-group">
<label><b>Dimulai</b></label>
<input type="text" name="bya_js[][by_mulai]" value="{{by_mulai}}" class="form-control uang" placeholder="Contoh; Rp 10.000.000" required="required">
</div>
{{/by_mulai}}
{{#by_sampai}}
<div class="form-group">
<label><b>Sampai</b></label>
<input type="text" name="bya_js[][by_sampai]" value="{{by_sampai}}" class="form-control uang" placeholder="Contoh; Rp 60.000.000" required="required">
</div>
<hr>
<br>
{{#bya_jsa}}
{{#no}}
</div>
{{/no}}
{{/bya_jsa}}
{{/by_sampai}}
{{/bya_jsa}}

I think one potential answer you are looking for is found here, a way to handle if/else statements.
OR:
Refactor to include a dynamic "by" value:
...
<div class="form-group">
<label><b>{{by_name}}</b></label>
<input type="text" name="bya_js[][{{by_val}}]" value="{{by_val}}" class="form-control" placeholder="{{placeholder}}" required="required">
</div>
...
I chose by_name as the formatted name, by_val as the value that was more system-looking, and placeholder as that related value. This would allow you to only create one form instead of several. You would need to set by_name and by_val a little differently ahead of time.

Adding a new component instance in Vue via a button click returning error

Just to preface this whole thing-- I'm not even sure that the way I'm going about this is the most correct way to do it. Basically, I need to add an instance of a Vue component when the user clicks a button, expanding. I used this discussion in the vue.js forum to help. Unfortunately, triggering this insert function via a button click is not working. Console is showing an "addNewStop is not defined at HTMLButtonElement.onclick" error.
The HTML in my template:
<div id="newCont"></div>
<button type="button" class="btn-primary" id="addStop" onclick="addNewStop()">Add Stop</button>
The script I'm calling:
import Stops from '#/components/Stops'
const ComponentCtor = Vue.extend(Stops)
const componentInstance = new ComponentCtor({})
function addNewStop() {
componentInstance.$mount('#newCont')
}
I will freely admit that I wasn't sure how to go about doing this in the first place, and have found surprisingly little information about how to insert new component instances. If there are other, better options I should be exploring beyond this, please let me know!
Edit:
Stops is actually a template containing form inputs, allowing the user to specify a delivery stop along a truck route. Here is its template:
<template>
<div class="stops">
<h4>Delivery</h4>
<div class="form-group">
<label for="shipName">Shipper Name</label>
<vue-simple-suggest
:list="simpleSuggestionList"
:filter-by-query="true" id="shipName" placeholder="Start typing a name" autocomplete="autofill-myself"></vue-simple-suggest>
</div>
<div class="form-group">
<label for="locationPickup">Location</label>
<vue-simple-suggest
:list="simpleSuggestionList"
:filter-by-query="true" id="locationPickup" placeholder="Start typing an address" autocomplete="custom-addresses"></vue-simple-suggest>
</div>
<div class="form-group row">
<label>Date</label>
<flat-pickr
:config="dateConfig"
class="form-control"
placeholder="Select date"
name="date" id="date1"></flat-pickr>
</div>
<div class="row">
<div class="form-group col left">
<label>Time</label>
<flat-pickr
:config="timeConfig"
class="form-control"
placeholder="Select time"
name="time1" id="time1"></flat-pickr>
</div>
<div class="form-group col right">
<label v-show="pickupChecked">Time 2</label>
<flat-pickr
:config="timeConfig"
class="form-control"
placeholder="Select time"
name="time2" v-show="pickupChecked" id="time2"></flat-pickr>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" v-model="pickupChecked" id="apptCheck1" >
<label class="form-check-label" for="apptCheck1">
Time range?
</label>
</div>
<div class="form-group row">
<label for="userAboutMe">Location notes:</label>
<textarea class="form-control" id="userAboutMe" rows="3" placeholder="Is there any information about the location that the driver should know?"></textarea>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Save location notes for this place?
</label>
</div>
</div>
</div>
</template>

In most cases, trying to manipulate the DOM directly (e.g. by adding a component) is a sign that you're not using Vue.js as it was intended. Vue is data-driven, which means that your code should simply update the data, leaving the DOM manipulation to Vue itself. Your question doesn't provide enough details for a specific solution, but there are a couple of general approaches that might work.
If you have a number of Stop components in the DOM, and clicking on the button simply adds another, then use v-for to render the stops from data, and have the button click handler simply add another entry in the data array.
<template>
<form>
<fieldset v-for="(stop, index) in stops" :key="index">
<stop v-bind="whatever"/>
</fieldset>
<button #click="onClick">Add one</button>
</form>
</template>
<script>
export default {
data() {
return {
stops: []
};
},
methods: {
onClick() {
this.stops.push(/* whatever */)'
}
},
components {
Stop
}
};
</script>

Entering data in an input and then displaying just the text entered elsewhere on page

I am creating a checkout page and I cannot figure out how to do the following. When the customer enters their shipping information, I want to display that same information further down the page in a confirmation section. I will not be submitting the information until the customer places the order, so there is no way to echo this information as I won't be submitting to my db until after they submit it.
I looked into this and I see things with a data-copy function and that is basically what I need except I do not want the copied data to show up in an input field. I just want it to display the text.
So if I had the following field:
Shipping street:
123 Main St.
I would want the 123 Main St to show up in a different section of the page.
I tried doing the data-copy function and I couldn't even get that to work. I'm not sure if this is the best method to use for this. I do not want the copied data to be editable. I have disabled that from my code.
I tried doing this:
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="name" name="ShipToFullname" required> </div>
</div>
This is the confirmation part farther down the page:
<p><input type="text" class="preview" id="name" disabled></p>
The Jquery
$(document).ready(function() {
$(".preview").keyup(function() {
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
});
});
Is there a better way I can do this and most importantly an input field not show up with the copied data?
UPDATED CODE
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
</div>
Confirmation part
<p>Shipping to:</p>
<p><div class="preview" id="name"></div></p>
The Jquery
$(document).ready(function() {
$(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
});
});

Is this what you want?
Note that data-copy="name" should now be data-copy="#name" for it to work
$(document).ready(function() {
$(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center">
<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
</div>
</div>
<br>
Your name is:
<div id="name"></div>

Simply change
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
to
$('#name').val($('#ShipToFullname').val());
Basicaly it says to set the value of id nameto the value of id ShipToFullname
Here the fiddle => http://jsfiddle.net/9sgcydmg/1/
If you don't want to output the data in another input you can simply set an id to any html element and use instead:
$('#name').html($('#ShipToFullname').val());
Here the fiddle => http://jsfiddle.net/89oeyq0h/
FINAL ANSWER : in it's most simple way, using jQuery, i would do something like this:
<input onkeyup="$('#name').html(this.value)" ... />
<p id='name'></p>
<input onkeyup="$('#addr').html(this.value)" ... />
<p id='addr'></p>
and so on...
http://jsfiddle.net/oky005a0/