We Keep Coding

AngularJS and PHPMailer email button function

I am currently developing an application that allows users to send emails with one click of a button, whether its a singular email to an individual or bulk too all contacts.
I am stuck on how to link AJAX to the singular send button and PHPMailer file.
This is where the button is located as 'Send Single':
<script type="text/ng-template" id="display">
<td>{{data.customer_name}}</td>
<td>{{data.customer_email}}</td>
<td>
<input type="checkbox" name="single_select" class="single_select" />
</td>
<td>
<button type="button" class="btn btn-info btn-sm email_button" ng-click="sendData(data.customer_name)">Send Single</button>
</td>
<td>
<button type="button" class="btn btn-primary btn-sm" ng-click="showEdit(data)">Edit</button>
<button type="button" class="btn btn-danger btn-sm" ng-click="deleteData(data.id)">Delete</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td><input type="text" ng-model="formData.customer_name" class="form-control" /></td>
<td><input type="text" ng-model="formData.customer_email" class="form-control" /></td>
<td></td>
<td></td>
<td>
<input type="hidden" ng-model="formData.data.id" />
<button type="button" class="btn btn-info btn-sm" ng-click="editData()">Save</button>
<button type="button" class="btn btn-default btn-sm" ng-click="reset()">Cancel</button>
</td>
</script>
I have tried editing what the delete button is doing to allow this to send, but failed.
$scope.sendData = function sendData(){
if(confirm("Are you sure you want to send?"))
{
$http({
method:"POST",
url:"send_mail.php",
}).success(function(data){
$scope.success = true;
$scope.successMessage = data.message;
$scope.fetchData();
});
}
}
This is how the application currently looks, link below:
Image of current application
EDIT
The HTML code for the email is sat in the PHPMailer file, I do not need it to be processed through a form.
ORIGINAL WORKING VERSION
PHP
<?php
$count = 0;
foreach($result as $row)
{
$count++;
echo '
<tr id="index_table">
<td>'.$row["customer_name"].'</td>
<td>'.$row["customer_email"].'</td>
<td>
<input type="checkbox" name="single_select" class="single_select" data-email="'.$row["customer_email"].'" data-name="'.$row["customer_name"].'" />
</td>
<td><button type="button" name="email_button" class="btn btn-info btn-xs email_button" id="'.$count.'" data-email="'.$row["customer_email"].'" data-name="'.$row["customer_name"].'" data-action="single">Send Single</button></td>
</td>
<td></td>
<td><button type="button" name="delete" id="delete" data-row="row"+count+"" class="btn btn-danger btn-xs delete">DELETE</button></td>
</tr>
';
}
?>
AJAX (didnt like code block)
$.ajax({
url:"send_mail.php",
method:"POST",
data:{email_data:email_data},
beforeSend:function(){
$('#'+id).html('Sending...');
$('#'+id).addClass('btn-danger');
},
success:function(data){
if(data = 'ok')
{
$('#'+id).text('Success');
$('#'+id).removeClass('btn-danger');
$('#'+id).removeClass('btn-info');
$('#'+id).addClass('btn-success');
}
else
{
$('#'+id).text(data);
}
$('#'+id).attr('disabled', false);
}
});
});
});
Thanks everyone :)

Here You Send Parameter and in function you not received
<button type="button" class="btn btn-info btn-sm email_button" ng-click="sendData(data.customer_name)">Send Single</button>
the workaround
$scope.sendData = function sendData(para){

In Angualr Js you should pass the parameter to the PHP script.
I guess you are not passing the value to PHP.
var Indata = {param:'val1',.....}
$scope.sendData = function sendData(){
if(confirm("Are you sure you want to send?"))
{
$http({
method:"POST",
url:"send_mail.php",
params: Indata
}).success(function(data){
$scope.success = true;
$scope.successMessage = data.message;
$scope.fetchData();
});
}
}
Try this method,
if you face still issue i think it's better if you share your PHP code here.....

laravel ajax form won't execute submit button

Basically my form adds to blade by help of javascript and then i can fulfill data and hit the save button.
The issue is save button doesn't work.
Here is screen record of the process and error you can watch
Code
This function will add new row and form to view where you see in video i filled input and hit save button
var textFieldsCount = 0;
function addTextField(){
textFieldsCount++;
var textfieldhelper = '';
var my_row = $('<div class="row mt-20" id="textField-' + textFieldsCount + '">');
var my_html = '{{Form::open()}}<input name="product_id" id="product_id" type="hidden" value="{{$product->id}}"><div class="col-md-4">{{ Form::label('customsubspecifications', 'Specifications') }}<select class="form-control" id="specification_id" name="specification_id"><option value="">Select</option>'+specifications+'</select></div>';
my_html += '<div class="col-md-4">{{ Form::label('text_dec', 'Your Custom Input') }}'+
'<input class="text_dec form-control" onkeypress="myFunction()" type="text" name="text_dec[]" id="'+ textFieldsCount.toString() +'">'+
'</div>';
my_html += '<div class="col-md-4">{{ Form::label('', 'Actions') }}<br><button type="button" class="btn btn-danger btn-xs" onclick="removeTextField(\'textField-' + textFieldsCount.toString() + '\')">Remove</button><button type="button" class="btn btn-info btn-xs" onclick="addTextField();">Add New</button><button type="button" id="custmodalsave" class="myButton custmodalsave btn btn-xs btn-success">Save</button>{{Form::close()}}</div>';
my_row.html(my_html);
$('#fields').append(my_row);
}
here is where thing happen and I actually try to send data to back-end
$("#custmodalsave").click(function(e){
e.preventDefault();
$.ajax({
type: "post",
url: "{{ url('admin/addnewcustomsubspecifications') }}",
data: {
'_token': $('input[name=_token]').val(),
'product_id': $('#product_id').val(),
'specification_id': $('#specification_id').val(),
'text_dec': $('.text_dec').val(),
'longtext_dec': $('.longtext_dec').val(),
},
success: function (data) {
$('#custspacmsg').append('<span class="text-success">Custom Specification added successfully in your product!</span>');
console.log(data);
},
error: function (data) {
console.log('Error:', data);
}
});
});
just to be clear I attached output form of my first ajax code so you
can see how things are printed
<div class="row mt-20" id="textField-1">
<form method="POST" action="http://newsite.pp/admin/products/15" accept-charset="UTF-8">
<input name="_token" value="DLrcOa0eOm90e4aaGSYp2uCeiuKtbGCT9fCOUP16" type="hidden">
<input name="product_id" id="product_id" value="15" type="hidden">
<div class="col-md-4">
<label for="customsubspecifications">Specifications</label>
<select class="form-control" id="specification_id" name="specification_id">
<option value="">Select</option>
<option value="1">CPU</option>
<option value="2">ram</option>
<option value="3">LCD</option>
<option value="4">Mouse</option>
<option value="5">Graphic</option>
<option value="6">Keyboard</option>
</select>
</div>
<div class="col-md-4">
<label for="text_dec">Your Custom Input</label>
<input class="text_dec form-control" onkeypress="myFunction()" name="text_dec[]" id="1" type="text">
</div>
<div class="col-md-4">
<label for="">Actions</label>
<br>
<button type="button" class="btn btn-danger btn-xs" onclick="removeTextField('textField-1')">Remove</button>
<button type="button" class="btn btn-info btn-xs" onclick="addTextField();">Add New</button>
<button type="button" id="custmodalsave" class="myButton custmodalsave btn btn-xs btn-success" style="display: inline-block;">Save</button>
</div>
</form>
</div>
PS: I should add that I have this function working on bootstrap modal
but i wanted to change modal the way you see in video (print by click in blade)
Back-End is working perfectly since I can save data by this Ajax code with modal. Whatever the issue is, is coming from here.

You're defining your click function as
$("#custmodalsave").click(function(e){
But, when this function is defined, $("#custmodalsave") is not available in your DOM as you're appending it:
$('#fields').append(my_row); // my_row contains `[...] id="custmodalsave"`
To fix this, simply use event delegation:
$("body").on("click", "#custmodalsave", function(e){ ... });
For more info on event delegation, please check out the jQuery reference:
http://api.jquery.com/on/

How to change the file input value after selected using javascript?

<div class="form-group">
<span class='btn btn-file btn-block btn-default'> <i class='pe pe-7s-video'> </i> Choose from Library
<input type='file' class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>
How to change the value "Choose from Library" to "video selected" after choosing file through file input using javascript

On change event, check if the this.files are more than 0.
Demo
document.querySelector( "[name='answer_video']" ).addEventListener( "change", function(){
if ( this.files.length > 0 )
{
this.parentNode.querySelector(".videoLabel").innerHTML = "file selected";
}
else
{
this.parentNode.querySelector(".videoLabel").innerHTML = "Choose from Library";
}
});
<div class="form-group">
<span class='btn btn-file btn-block btn-default'> <i class='pe pe-7s-video'> </i> <span class="videoLabel">Choose from Library</span>
<input type='file' class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>

You can use EventListener DOMContentLoaded and onchange do something
reference here
document.addEventListener('DOMContentLoaded',function() {
document.querySelector('[type="file"]').onchange=changeEventHandler;
},false);
function changeEventHandler(event) {
// You can use “this” to refer to the selected element.
document.getElementById('video_option').innerHTML = 'video selected';
}
<div class="form-group">
<span class='btn btn-file btn-block btn-default'> <i class='pe pe-7s-video'> </i><span id='video_option'> Choose from Library</span>
<input type='file' class='form-control' name='answer_video' accept='video/*' capture='camera' placeholder='Record' id='answer_video'></span>
</div>

you may take help with jquery, hope it will help you.
$("input[type='file'][name='answer_video']").change(function(){
var id = $(this).attr("id");
var thisVal = document.getElementById(id).files[0].name;
var nameBox = '<div class="fileContainer"><span class="docFileName">'+thisVal+'</span><span class="glyphicon glyphicon-remove" onclick=removeAttachment("'+id+'")>X</span></div>';
$(this).before(nameBox).hide();
});
function removeAttachment(id){
$("#"+id).val("").show();
$(".fileContainer").remove();
}

You only need to use the onchange function with your input.
function changeName(){
document.getElementById("change").innerHTML = "changeName"
}
<div class="form-group">
<span id="change" class='btn btn-file btn-block btn-default'> <i class='pe pe-7s-video'> </i> Choose from Library
</span>
<input type='file' class='form-control' name='answer_video' placeholder='Record' id='answer_video' onchange="changeName()">
</div>

Generate json array with javascript

I am looking to generate a json string based on the button selection on a html page.
<div id="btnStudios" >
<button type="button" id="01" value="warner" class="btn btn-default">Warner</button>
<button type="button" id="02" value="tf1" class="btn btn-default">TF1</button>
<button type="button" id="03" value="gaumont" class="btn btn-default">Gaumont</button>
<button type="button" id="04" value="pathe" class="btn btn-default">Pathe</button>
<button type="button" id="05" value="studiocanal" class="btn btn-default">StudioCanal</button>
<button type="button" id="06" value="francetv" class="btn btn-default">FranceTV</button>
<button type="button" id="07" value="m6snd" class="btn btn-default">M6SND</button>
</div>
<div id = "btnplatforms" class="btn-group">
<button type="button" id = "11" value="orange" class="btn btn-default">Orange</button>
<button type="button" id = "12" value="itunes" class="btn btn-default">iTunes</button>
<button type="button" id = "13" value="sfr" class="btn btn-default">SFR</button>
</div>
$(".btn").click(function() {
$(this).toggleClass('active');
});
Based on the active state of the button i want the result to be for example
{Studios : Warner, Gaumont
Platform : Orange, iTunes}
Is this possible to achive this with javascript? If yes how?
Thanks in advance for your help.

You can try this :
var btn_active_array = {
"Studios" : [],
"Platform":[]
};
$('#btnStudios .btn.active').each(function(index,btn_active){
btn_active_array["Studios"].push($(btn_active).text());
});
$('#btnplatforms .btn.active').each(function(index,btn_active){
btn_active_array["Platform"].push($(btn_active).text());
});
jsfiddle link : https://jsfiddle.net/5kb5fdyz/

You can try this:
var output = {
Studios: $('#btnStudios button.active').map(function() {
return $(this).val();
}).get(),
Platform: $('#btnplatforms button.active').map(function() {
return $(this).val();
}).get()
};
here is jsFiddle.

update model value in AngularJS?

Here is a code snipped of view and controller. Here what I want just click on save button I mean
<input class="btn btn-primary btn-lg mr-r15" type="button"
ng-click="$parent.saveReleaseNotes(latestReleaseNotes,isEditabel);$apply()"
ng-disabled="formSubmitted" value="{{saveButton}}" />
A request will be sent to server and when get success then tag must be hidden and tag will show but not working
HTML:
<div class="clearfix mr-b25 bdr-b">
<h6 class="mr-tb20">Release Notes
<a ng-if="isEditabel == false" href="" ng-click="$parent.isEditabel = true"
class="f-14 semi-bold mr-l15"> Edit </a>
</h6>
</div>
<p ng-show="!isEditabel" class="form-control-static f-14">{{latestReleaseNotes}}</p>
<div ng-show="isEditabel">
<textarea ng-model="latestReleaseNotes" rows="3" columns="15"
class="form-control" ng-disabled="formSubmitting"></textarea>
<br /> <input class="btn btn-primary btn-lg mr-r15" type="button"
ng-click="$parent.saveReleaseNotes(latestReleaseNotes,isEditabel);$apply()"
ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
type="button" ng-click="isEditabel = false" id="backLink"
class="btn btn-link btn-lg" value="Cancel">
</div>
In controller:
$scope.saveReleaseNotes = function(latestReleaseNotes,isEditabel) {
$scope.backgroundWorking = true;
$scope.saveButton = 'Updating...';
$http({
url: '/apps/'+$scope.app.id+'.json',
method: "PUT",
data: {
releaseNotes: latestReleaseNotes,
appBuildId:$scope.app.latestBuild.id
},
headers: {
'Content-Type': 'application/json'
}
}).success(function(data, status, headers, config) {
if (data.result == "success") {
flash.showSuccess(data.message);
$scope.isEditabel = false;
} else {
flash.showError(data.message);
$scope.latestReleaseNotes = $scope.app.latestBuild.releaseNotes;
}
$scope.backgroundWorking = false;
$scope.saveButton = 'Save';
}).error(function(data, status, headers, config) {
flash.showError("Error occued while updating release notes");
$scope.backgroundWorking = false;
$scope.saveButton = 'Save';
});
}
but model isEditable is not updated in view. I need hide <div> tag and show <p> tag on success.I'm trying by $scope.isEditabel = false; but it is not working.

I think your issue is you are toggling between using $parent.isEditable and isEditable. My first suggestion is to be consistent. Idealy isEditable is contained within the scope that you are using it. It seems a little odd to always be referencing "isEditable" of a parent.
If isEditable truly is contained within the parent you need to be careful about setting $scope.isEditable = true. You can end up redeclaring it on the child scope. I always suggest using functions like setIsEditable(true) and define that in the parent scope.
Trying to create a fiddle for you based on what you have given us.. but I think the below code would work.
//Parent scope
$scope.isEditabel = false;
$scope.setIsEditabel = function(value){
$scope.isEditabel = value;
}
<!-- updated html -->
<div class="clearfix mr-b25 bdr-b">
<h6 class="mr-tb20">Release Notes
<a ng-if="$parent.isEditabel == false" href="" ng-click="$parent.setIsEditabel(true)"
class="f-14 semi-bold mr-l15"> Edit </a>
</h6>
</div>
<p ng-show="!$parent.isEditabel" class="form-control-static f-14">{{latestReleaseNotes}}
</p>
<div ng-show="$parent.isEditabel">
<textarea ng-model="latestReleaseNotes" rows="3" columns="15"
class="form-control" ng-disabled="formSubmitting">
</textarea>
<br />
<input class="btn btn-primary btn-lg mr-r15" type="button"
ng-click="$parent.saveReleaseNotes(latestReleaseNotes,$parent.isEditabel);$apply()"
ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
type="button" ng-click="$parent.isEditabel = false" id="backLink"
class="btn btn-link btn-lg" value="Cancel"/>
</div>
the better solution(always debatable)*:
I created a myModel this isn't necessary but it does clean things up a bit, esp. if you ever have to have multiple editable things on the same page.
We dont have to worry about passing around isEditable to the save, we shouldn't have to worry about apply. General suggestion is to make your html dumber..
//child scope
$scope.myModel = {
latestReleaseNotes: latestReleaseNotes,
isEditabel: false
}
$scope.saveReleaseNotes = function(){
//do save
//we have everything we need on $scope (myModel, isEdiabel, etc.)
}
<!-- updated html -->
<div class="clearfix mr-b25 bdr-b">
<h6 class="mr-tb20">Release Notes
<a ng-if="myModel.isEditabel == false" href="" ng-click="myModel.isEditabel = true"
class="f-14 semi-bold mr-l15"> Edit </a>
</h6>
</div>
<p ng-show="!myModel.isEditabel" class="form-control-static f-14">{{myModel.latestReleaseNotes}}
</p>
<div ng-show="myModel.isEditabel">
<textarea ng-model="myModel.latestReleaseNotes" rows="3" columns="15"
class="form-control" ng-disabled="formSubmitting">
</textarea>
<br />
<input class="btn btn-primary btn-lg mr-r15" type="button"
ng-click="saveReleaseNotes(myModel);"
ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
type="button" ng-click="myModel.isEditabel = false" id="backLink"
class="btn btn-link btn-lg" value="Cancel"/>
</div>