We Keep Coding

Using ng-click in my HTML to call two different functions in JavaScript

So I am having an issue with a Sharepoint App I am developing. Upon a button click I would like one screen to change the status of an item, close the pop up box and open a new pop up box to another window. So my understanding of the ng-click function is that it should be able to achieve my goal of running two functions simultaneously. So my code was working fine in terms of updating the item but once I added in the following line I expected this to achieve two of my aims 1. Change the items status and 2. Close the window.
<input ng-disabled="saving" type="button" value="Accept" ng-click="approval(true); $close()">
What happened instead though is it broke the original code and now the items status is not updating nor is it closing.
The Original Code which achieved changing the Item
<div ng-show="tab == 'New'">
<table style="width: 100%;">
<tr>
<th>Reasons</th>
<td>
<select ng-model="Reason" ng-change="ReasonChange()">
<option value="Inadequate instructions provided">Inadequate instructions provided</option>
<option value="Document missing">Document missing</option>
<option value="Outside of remit">Outside of remit</option>
</select>
</td>
</tr>
<tr>
<th colspan="2" style="text-align: left">Comments (this will be emailed to the customer)</th>
</tr>
<tr>
<td colspan="2"><textarea ui-tinymce="tinymceOptions" ng-model="a.Body" style="height: 200px;"></textarea></td>
</tr>
</table>
<div>
<input ng-disabled="saving" type="button" value="Accept" ng-click="approval(true)"> <!--1st Approval Screen accept-->
<input ng-disabled="saving" type="button" value="Reject" ng-click="approval(false)" /> <!--1st Approval Screen reject-->
<input type="button" value="Close" ng-click="$close()" /> <!--1st Approval Screen Close-->
</div>
The New Code which was supposed to achieve changing the Item and closing the window box
<div ng-show="tab == 'New'">
<table style="width: 100%;">
<tr>
<th>Reasons</th>
<td>
<select ng-model="Reason" ng-change="ReasonChange()">
<option value="Inadequate instructions provided">Inadequate instructions provided</option>
<option value="Document missing">Document missing</option>
<option value="Outside of remit">Outside of remit</option>
</select>
</td>
</tr>
<tr>
<th colspan="2" style="text-align: left">Comments (this will be emailed to the customer)</th>
</tr>
<tr>
<td colspan="2"><textarea ui-tinymce="tinymceOptions" ng-model="a.Body" style="height: 200px;"></textarea></td>
</tr>
</table>
<div>
<input ng-disabled="saving" type="button" value="Accept" ng-click="approval(true); $close()"> <!--1st Approval Screen accept-->
<input ng-disabled="saving" type="button" value="Reject" ng-click="approval(false)" /> <!--1st Approval Screen reject-->
<input type="button" value="Close" ng-click="$close()" /> <!--1st Approval Screen Close-->
</div>
I am confused as I believe ng-click="approval(true); $close()" is the correct way to call two js functions in one click.
The other issue I have is navigating to another window from the one in my attached picture. Is there a way as part of the ng-click to navigate to another window in the javascript?
Thanks a lot everyone for any information that can help me.

Ajax HTML FORM not sending input

i've got a problem I can't figure out.
I have a page (index.php) that open a form, includes another page with PHP (indexsearch.php) and close the form.
This included page is working with a script that display some datas from my website, the data are requested on the page with an AJAX function that is linked to search.php, that is working with a table and checkboxes so we can choose which data to work with.
See this schema :
Everything is working fine but the checkboxes are not send even when they are checked. I did added the name and the value in search.php
<td> <input type="checkbox" name="ajout[]" value="<?php echo $result['id']; ?>"/> </td>
I also did not opened another form.
So I guess the problem may come from the fact the AJAX datas work as an independant form that is not included in my page.
Please see the html code :
<body>
<div class="division">
<table id="text-p">
<tr>
<td>
<form action="" method="get" enctype="multipart/form-data">
<textarea id="text-p1" name="text-p1" maxlength="300" placeholder="Text1"></textarea>
</td>
<td>
<textarea id="text-p2" name="text-p2" maxlength="300" placeholder="Text2"></textarea>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p1" type="file" accept="image/*">
</td>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p2" type="file" accept="image/*">
</td>
</tr>
</table>
</div>
<div class="division">
<div width="100%" style="height: 50px;">
<input type="text" name="recherche" id="recherche" style="width: 75%; float:left; display: inline-block;" placeholder="Rechercher...">
<div style="float:right;">
<input type="radio" name="onglet" value="val1" id="act" checked="">Activité
<input type="radio" name="onglet" value="val2" id="sect">Secteur
<input type="radio" name="onglet" value="val3" id="ecr">Ecrans
</div>
</div>
<div width="100%" id="resultats">
<input id="ok" type="button" class="pageselector" name="pageselector" value="1" checked=""><table id="resultat1" width="100%" style="text-align: center;" class="resultatshow">
<tbody><tr>
<td>Cat</td>
<td>Text-1</td>
<td>Text-2</td>
<td>Sélec</td>
</tr>
<tr>
<td>Cat1</td>
<td>NULL</td>
<td>NULL</td>
<td> <input type="checkbox" name="ajout[]" value="1"> </td>
</tr>
<tr>
<td>CAT2</td>
<td>EMPTY</td>
<td>EMPTY</td>
<td> <input type="checkbox" name="ajout[]" value="2"> </td>
</tr>
</table></div>
<input type="submit" value="UPDATE">
</div>
</body>
How can I fix that ?

I am not sure but I guess it can be caused by square brackets in the name attribute of your checkboxes. If you have reason to do it, you have to work with it properly. For example, here is the HTML form field:
<input type='checkbox' name='checkbox[myOption]'>
You have to remember that POST is an array of options. So doing like above you have to access it in the right way on the server side:
$_POST['checkbox']['myOption'];
I don't know if that solves your problem but I hope it helps a little bit

AngularJs:loading angular page from normal Javascript

I have a situation here. I have used angularJS for my application and also using $resource for service call. Now i want to implement a new functionality in this. In this i need to show a checkbox for which i have a code in index.html and i need to load the services conditionally. but i am not specifying ng-app in this. I want my application to behave as angular from the second page which i am redirecting from index. Is it possible to do? If yes can anyone help me please?
Here is the sample code which i have tried but am stuck:
Index.html
<body>
<div>
<table style="margin-left:40%">
<td style="width:62%">
<label id="sampleEnv" style="margin-top:10%">First Login</label>
</td>
<td>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</td>
</tr>
</table>
<input type="button" value="submit" onclick="checkVal()">
</div>
<script>
function onclick(){
alert(document.getElementById("myonoffswitch").checked);
location.href="views/login.html";
}
</script>
</body>
Login.html
<html ng-app="sampleApp">
<head>
</head>
<body ng-controller="sampleController">
<form name="sampleForm" ng-submit="authenticate()" novalidate>
<div>
<table align="center">
<tr>
<td>ID</td>
<td> <input name="sampleId" type="text" maxlength="9" ng-model="sampleIdModel" integer/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" ng-model="password" passwordmin /></td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
App.js
var app = angular.module("sampleApp", ["sampleService"]);
After clicking on the submit button on index page, login page comes but fully distorted. After debugging in chrome, i found that login.html doesn't have any support from any other controller or js which was loaded in index.html .
Any help will be very useful.
Thanks in advance.

Multiple buttons on an html page to reveal text step by step rather than simultaneously?

trying to create a list of about 7 questions with a click to reveal answer button next to each question.
only problem is when i click one button, it runs the entire js code and shows ALL the answers not just that particular one.
here is my code
<table>
<tr>
<td>Question 1 </td>
<td class = "aligncenter">
<form action="javascript:void(0);">
<div id="reveal-space">
<input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space").text("Answer 1").show();
return true;
});
</script>
</td>
</tr>
<tr>
<td>Question 2</td>
<td class = "aligncenter">
<form action="javascript:void(0);">
<div id="reveal-space1">
<input type="submit" name="b2" value="2" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space1").text("Answer 2").show();
return true;
});
</script>
</td>
</tr>
<tr>
<td>Question 3</td>
<td class = "aligncenter">
<form action="javascript:void(2);">
<div id="reveal-space2">
<input type="submit" name="b3" value="3" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space2").text("Answer 3").show();
return true;
});
</script>
</td>
</tr>
<tr>
<td>Question 4</td>
<td class = "aligncenter">
<form action="javascript:void(0);">
<div id="reveal-space3">
<input type="submit" name="b4" value="4" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space3").text("Answer 4").show();
return true;
});
</script>
</td>
</tr>
</table>
how do i fix it to make it so that when the "1" button is clicked it doesn't reveal the texts to the other buttons ?
i may need to take an entirely different approach
thanks for the help in advance

Your form needs unique ID, because when you are setting up your form submit function $("form") is selecting all your forms.
Try changing
<form action="javascript:void(0);">
<div id="reveal-space">
<input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("form").submit(function() {
$("#reveal-space").text("Answer 1").show();
return true;
});
</script>
To
<form id="form1" action="javascript:void(0);">
<div id="reveal-space">
<input type="submit" name="b1" value="1" class="submitbutton aligncenter"/>
</div>
</form>
<script>
$("#form1").submit(function() {
$("#reveal-space").text("Answer 1").show();
return true;
});
</script>
The changes are id="form1" and $("#form1")

Slightly different approach: you can load in all the answers in hidden divs within the form element, and selectively show those divs by finding them in relation to the form that called the submit function, so that the other dormant form don't get triggered.
$("form").submit(function() {
$(this).find("#answer").show();
$(this).find("#reveal-space").hide();
});
Benefits: you don't need unique IDs, you only need one submit function, the text doesn't have to be contained in the jQuery.
jsFiddle

<table id="QnA">
<tr>
<td>Question 1</td>
<td class = "aligncenter">
<input type="button" value="Show Answer" data-answer="Answer goes here" class="submitbutton aligncenter"/>
</td>
</tr>
</table>
<script type="text/javascript">
$("#QnA :input").on("click", function() {
$(this).parent().html($(this).data("answer"));
});
</script>
You don't need a form or any submits, just make everything self-referential (you actually probably don't even need an ID on that table, but I don't know what the rest of your page looks like).

Why the text fields are not getting disabled="disabled" in colorbox popup?

I'm using PHP, Smarty , jQuery, Colorbox - a jQuery lightbox plugin, etc. for my website. Now I'm displaying some output in a popup which is generated by using " Colorbox - a jQuery lightbox plugin". Now I want to disable all the text fields present in this popup when the form loads but if I go to the HTML source of page the disabled="disabled" attribute from the <input> tag gets removed and the text boxes are not getting disabled. Can you tell me why this is happening? For your reference I'm putting below the code which will display the data in a Colorbox pop up.
{if $subject_topic_questions}
{foreach from=$subject_topic_questions item=subject_topic_data}
<div class="hidden">
<div id="topics_{$subject_topic_data.subject_id}" class="c-popup">
<h2 class="c-popup-header">Select Topics</h2>
<div class="c-content">
<input type="hidden" name="subject_names[{$subject_topic_data.subject_id}]" id="subject_names" value="{$subject_topic_data.subject_name}">
<h2 class=""> {$subject_topic_data.subject_name}</h2>
<div class="c-tbl-wrap">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="c-tbl">
<tbody>
<tr>
<td>
<p class="custom-form">
<input class="custom-check" type="checkbox" name="" id="">
<label class="blue">Select All</label>
</p>
</td>
{foreach from=$difficulty_levels item=diff_levels key=dkey}
<input type="hidden" name="diff_levels[{$dkey}]" value="{$diff_levels}">
<td width="22%" align="center"><strong>{$diff_levels}</strong></td>
{/foreach}
</tr>
{foreach from=$subject_topic_data.topics item=topic_diff_level_data}
<input type="hidden" name="subject_{$subject_topic_data.subject_id}_topics[]" value="{$topic_diff_level_data.topic_id}">
<tr>
<td valign="middle">
<p class="custom-form">
<input type="checkbox" class="custom-check" name="{$sheet_type}_topics_{$subject_topic_data.subject_id}[]" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}" value="{$topic_diff_level_data.topic_id}" onChange="enable_topic_ques('{$sheet_type}', '{$subject_topic_data.subject_id}', '{$topic_diff_level_data.topic_id}'); return false;">
<label>{$topic_diff_level_data.topic_name}</label>
<!-- <input type="hidden" name="topic_names[{$topic_diff_level_data.topic_id}]" value="{$topic_diff_level_data.topic_name}"> -->
</p>
</td>
{foreach from=$topic_diff_level_data.difficulty_level item=diff_level key=key_diff_lvl}
<td valign="middle">
{if $site_id=='ENTPRM'}<em>Total {$diff_level.question_count}</em>{/if}
<input type="text" name="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" maxlength="3" class="mini" value="{$diff_level.added_no_questions}" disabled="disabled">
<input type="hidden" name="{$sheet_type}_available_questions_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" value="{$diff_level.question_count}">
</td>
{/foreach}
</tr>
{/foreach}
</tbody>
</table>
</div>
<p class="center">Done Cancel</p>
</div>
</div>
</div>
{/foreach}
{/if}
The main code you need to consider is as below from the above code:
<input type="text" name="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" maxlength="3" class="mini" value="{$diff_level.added_no_questions}" disabled="disabled">
Can you tell me how the disabled="disabled" attribute gets vanishes after page load and if there is any way to apply to it, please tell me. Thanks in advance.

$('.mini').prop("disabled", true);
$('.mini').prop("disabled", false);
try this