passing option selected value to angular model to trigger floating label - javascript

I have an issue with the code below where the floating label stops working when executing the php script via function "loadStaff". The floating label works prior to the execution of the php script. My limited knowledge suggests that the issue is caused by the option select value not being passed on to the angular model which in turn did not trigger the floating label since the option select retains the selected value ($('select#account_list').val('<?php echo $_POST['account_list'];?>') as I can see it showing up. However, the floating label is not executing even though I see the selected value in the option select field. How do we pass the selected value to the angular model for it to trigger the floating label? I could be wrong with my reasoning.
<div ng-app="myApp">
<form id="orderformstaff" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
<div class="field" style="width: 100%">
<label class="show-hide" ng-show="account">Account</label>
<div class="input-group mb-4">
<span class="input-group-addon gi gi-user-key"></span>
<select id="account_list" class="form-control custom-select" name="account_list" ng-model="account" onchange="loadStaff()" autocomplete="on" required/>
<?php
$a_list = $DB_CON_A->query("SELECT `id`, `email` FROM `staffs` ORDER BY `id` ASC");
$data_row = '<option value="" disabled>Choose an account</option>';
if($a_list !== false) {
foreach($a_list as $row){
$data_row .= '<option value="'.$row['email'].'">'.$row['email'].'</option>'."\n";
}
}
unset($row);
echo $data_row;
?>
</select>
</div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script> var myApp = angular.module('myApp', ['ngAnimate']);</script>
<script>
function loadStaff() {
var form =
document.getElementById('orderformstaff');
form.submit();
};
</script>
<script type="text/javascript"> <!--allows option select to retain value after executing loadStaff-->
$(document).ready(function(){
$('select#account_list').val('<?php echo $_POST['account_list'];?>');
});
</script>

Actualy you don't need using AngularJS because did all jobs with PHP.
However if you want to fix current code
REMOVE
$('select#account_list').val('<?php echo $_POST['account_list'];?>');
THEN set attribute on select element
<select id="account_list" class="form-control custom-select" ng-init="account = <?php echo $_POST['account_list'];?>" name="account_list" ng-model="account" onchange="loadStaff()" autocomplete="on" required/>
EDIT
If you want to use AngularJS you should bind data with angularjs not with PHP.
If there is no JQuery you cannot use $(document).ready etc...
If you want to start learn AngularJS, you can start from here http://www.journaldev.com/7750/angularjs-simple-forms-tutorial
It use PHP on back-end.

Related

How to make dependent dropdown list and input text to be able to obtain values to pass mysql

I am building a calculator (php-html) that gets numbers entered by the user. See my snippet below. The output is one query that loop entries from the database (mysql). The text-box options work expectedly it returns the output from the SQL, but when I add the cascade dropdown list to fetch other parameters, the script just gets failing. Looks to me like the "isset" is not able to check the value passed that was selected from the list. How would both dropdown list and text-box options work together? I prefer the GET method to obtain values in both cases.
<form action="" method="GET">
<div class="row">
<div class="col-md-8">
<label for="">Építésű kategória: </label>
<input list="lakas" name="lakas" /></label>
<datalist id="lakas">
<option value="csúszózsalus">
<option value="panel-lakás">
<option value="tégla-építésű">
</datalist>
<?php
if(isset($_GET['lakas'])) {
echo $_GET['lakas'];
}
?>
</div>
<div class="col-md-8">
<label for="">Kerület: </label>
<input type="text" name="stud_id" value="<?php if(isset($_GET['stud_id'])){echo $_GET['stud_id'];}?>"placeholder = "Egy kerület megadása szüséges, pl.: '9'" class="form-control">
</div>
<div class="row">
<div class="col-md-12">
<hr>
<?php
$con = mysqli_connect("localhost","root","","ingatlan");
if(isset($_GET['stud_id']))
{
$stud_id = $_GET['stud_id'];
$stud_id2 = $_GET['stud_id2'];
$stud_id3 = $_GET['stud_id3'];
$lakas = $_GET['lakas'];

Keep input value after refresh page

I have a form with input field and this input contain a drop down menu read information from database.
If the user enters value and when he arrives to the drop menu he doesn't find what he wants he go to another page to add this info to the drop down menu and then go to the first page to continue enter the information.
How can I keep this information if he goes to another page to add info to drop menu and how can after adding the info to drop menu find this info without refresh and without submit.
This is the first page with the form
<form name='' method='post' action='<?php $_PHP_SELF ?>'>
<input name='txt_name' id='' type='text'>
This drop menu read from database
<select id="groups" name="txt_label" class="form-control">
';?>
<?php
$sql=mysqli_query($conn,"select DISTINCT db_label from tbl_label")or die(mysqli_error($conn));
echo'<option value="">-- Select --</option>';
while($row=mysqli_fetch_array($sql)){
$label=$row['db_label'];
echo "<option value='$label'>$label</option>";
}echo'</select>';?><?php echo'
</div>
</form>
Second form in another page
<form class="form-inline" role="form" name="form" method="post" action="';?><?php $_PHP_SELF ?><?php echo'">
<div class="form-group">
<label for="pwd">Label</label>
<input id="txt_label" name="txt_label" type="text" placeholder="Label" class="form-control input-md">
</div>
<div class="form-group">
<label for="pwd">Sub Label</label>
<input id="txt_sublabel" name="txt_sublabel" type="text" placeholder="SubLabel" class="form-control input-md">
</div>
<input type="submit" name="addlabel" value="Add" class="btn btn-default">';
EDIT: Keep value of more inputs
HTML:
<input type="text" id="txt_1" onkeyup='saveValue(this);'/>
<input type="text" id="txt_2" onkeyup='saveValue(this);'/>
Javascript:
<script type="text/javascript">
document.getElementById("txt_1").value = getSavedValue("txt_1"); // set the value to this input
document.getElementById("txt_2").value = getSavedValue("txt_2"); // set the value to this input
/* Here you can add more inputs to set value. if it's saved */
//Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e){
var id = e.id; // get the sender's id to save it .
var val = e.value; // get the value.
localStorage.setItem(id, val);// Every time user writing something, the localStorage's value will override .
}
//get the saved value function - return the value of "v" from localStorage.
function getSavedValue (v){
if (!localStorage.getItem(v)) {
return "";// You can change this to your defualt value.
}
return localStorage.getItem(v);
}
</script>
if the above code did not work try this:
<input type="text" id="txt_1" onchange='saveValue(this);'/>
<input type="text" id="txt_2" onchange='saveValue(this);'/>
You can also use useContext() from react context() if you're using hooks.
In MVC/Razor,
first you should add a variable in your model class for
the textBox like this:
namespace MVCStepByStep.Models
{
public class CustomerClass
{
public string CustomerName { get; set; }
}
}
Then in Views --> Index.cshtml file make sure the Textbox
is created like this:
#Html.TextBoxFor(m => m.CustomerName)
For a complete example, please check out this site:
How to update a C# MVC TextBox By Clicking a Button using JQuery – C# MVC Step By STep[^]

Submit and Generate Dynamic PHP Form

I have a form with text boxes and drop down menus. One of the drop down menus is Dependant on the value of another, e.g. InventoryUsage is dependent on the value in InventoryID.
So far I have done the entire site using PHP since I do not know JavaScript, though I found a JavaScript function that can get the value entered in InventoryID, but I cannot use that value in the PHP since PHP is server-side.
What I need to do is change the second dropdown options depending on that of the first dropdown. Then submit the data as I would with a normal form.
Edit:
I used ob_start and included the tpl page and sent all the variables to the page which were pulled from the database prior. All the variables have the same index meaning that InventoryID['0']=ID3456 corresponds to InventoryUsage['0']=60. Therefore when InventoryID is ID3456 i would like to display the Number located at InventoryUsage['0']. I hope this adds some context to the problem.
The index is determined by the php variable $i in my code snippet. The $i would be changed to match the index of the InventoryID field. Say the value of InventoryUsage is 20 then I want to display numbers 1 to 20.
Snippet of code below:
<label>TypeOfSurgery</label> <input type="text" name="TypeOfSurgery" size="35" value="" />
<label>CauseOfSurgery</label> <input type="text" name="CauseOfSurgery" size="35" value="" />
<label>AnaesthesiaUsage</label> <input type="text" name="AnaesthesiaUsage" size="35" value="" />
<label>SurgeryOutcome </label> <input type="text" name="SurgeryOutcome" size="35" value="" />
<label>RecoveryTime</label> <input type="text" name="RecoveryTime" size="35" value="" />
<label>Stages </label> <input type="text" name="Stages" size="35" value="" />
<label>EmployeeName </label> <p>
<select name="EmployeeName">
<option value=""></option>
<?php
for($i=0;!empty($EmployeeName[$i]);$i++)
echo '<option value="">'.$EmployeeName[$i].'</option>';
?>
</select><p>
<label>Cost</label> <input type="text" name="Cost" size="35" value="" />
<label>InventoryID</label> <p>
<select name="InventoryID">
<option value=""></option>
<?php
for($i=0;!empty($InventoryID[$i]);$i++)
echo '<option value="">'.$InventoryID[$i].'</option>';
?>
</select><p>
<label>InventoryUsage </label> <p>
<select name="InventoryUsage">
<option value=""></option>
<script type="text/javascript">
var model= document.getElementById('InventoryUsage');
</script>
<?php
//if inventory in
for($i=0;!empty($InventoryUsage[$i]);$i++)
echo '<option value="">'.$InventoryUsage[$i].'</option>';
?>
</select><p>
In order to populate the InventoryUsage dropdown you need to use JavaScript.
You can use the onChange event for the dropdown InventoryID then fetch the corresponding values via Ajax.
$('#InventoryID').change(function () {
var value =$(this).val(); // selected InventoryID option
//get InventoryUsage values
$.ajax({
method: "POST",
url: "myfile.php",
data: { data: value },
success: function(data){
// Populate new dropdown $("#InventoryUsage")
// this is an example without knowing what is the returned data
var Newoptions = [];
for (var i = 0; i < data.length; i++) {
Newoptions.push('<option value="',
data[i].someValue, '">',
data[i].someName, '</option>');
}
$("#InventoryUsage").html(Newoptions .join(''));
}
});
});
});
then in your PHP file you need to handle the $_POST['data'] , then query your database and return the drop-down options( Arrays ) that will be populated above...
edit :
If you are sure that this index matches the Inventory_Usage and that the InventoryUsage dropdown has previously been populated then
you could try to select the InventoryUsage option using the index of the InventoryID dropdown on change and load events...
try adding this function to you select :
<select name="InventoryID" onChange="set_inventory_usage()"></select>
then add this script to your page's HEAD section..
<head>
<script type="text/javascript">
function set_inventory_usage(){
// Change to getElementById if it is the ID not the name
var Inventory_ID = document.getElementsByName('InventoryID')[0];
var Inventory_Usage = document.getElementsByName('InventoryUsage')[0];
// returns the index of the selected option in the InventoryID dropdown
var InventorySelected = Inventory_ID.selectedIndex ;
// Sets the Usage dropdown to the same index as the Inventory selected option
Inventory_Usage.selectedIndex = InventorySelected ;
}
window.onload = set_inventory_usage ;
</script>
</head>
Option 1: Without JavaScript, the best option is to add an onchange to your first dropdwon list, and when a value is selected submit the form. Since the form is not complete, and only the dropdown value and elements before that are passed, you can set a condition to query the database, get values based on first drop down and reload the form with those options. IThere is nothing wrong with this solution if done properly but to be honest I perfer to do such things with Ajax, hence option 2 below.
Option 2: Learn some JavaScript and use Ajax (Use caution when using other people's scripts in your system)
Edit: Perhaps instead of wring Ajax code from scratch, use jQuery where most things are already done for you. Learning jQuery is very useful if you are going to do web development

Retain textbox value on return to same button

The question look quite confusing but here is what i need, I use snipe IT ams application which is built on laravel framework.
I have a html page with a textbox and two radio button namely automatic and manual when user clicks on automatic button a php function is called and a random number is generated and the textbox field will become disabled on the other hand whenever a user clicks the manual button the textbox field must become enabled and the user can enter a value in the textbox field.
<script>
function CreateRandomNumber()
{
$('#asset_number').attr('value',("<?php CreateRandomNumber(); ?>"));
$('#asset_number').attr('disabled','disabled');
}
function EnableManualTextfield()
{
$('#asset_number').removeAttr('disabled');
$('#asset_number').val("");
}
</script>
<div class="form-group {{ $errors->has('asset_number') ? ' has-error' : '' }}">
<label for="asset_number" class="col-md-3 control-label">#lang('admin/assetdetails/form.number')</label>
<div class="controls col-md-7">
<input class="form-control assettext" type="text" name="asset_number" id="asset_number" value="{{ Input::old('asset_number', $assetdetail->asset_number) }}" />
{{ $errors->first('asset_number', '<span class="alert-msg"><i class="icon-remove-sign"></i> :message</span>') }}
<input class="radio-button" type="radio" id="automatic" name="asset" onclick="CreateRandomNumber()" value="{{ Input::old('automatic',$assetdetail->automatic) }}" class="align-check1">
<label for="automatic" class="control-label">#lang('admin/assetdetails/form.auto')</label>
<input class="radio-button align-check2 manualradio" type="radio" id="manual" name="asset" onclick="EnableManualTextfield()" checked="checked" value="{{ Input::old('manual',$assetdetail->manual) }}">
<label for="manual" class="manualtext">#lang('admin/assetdetails/form.manual')</label>
</div>
</div>
/* CreateRandomNumber Function */
/* This function is written seperately in a php file */
<?php
function CreateRandomNumber() {
$letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
$numbers = rand(100, 999999);
$prefix = "SS-";
$randomNumber = $prefix . $numbers ;
echo $randomNumber;
}
?>
Now the problem is whenever a user clicks on automatic a number is getting generated and if returned back to manual the text field gets enabled as expected, but i need do design it in such a way that if the user return backs to automatic button the pre-generated number must be display in the textfield.
Please note that the form is not yet submitted i need to store the generated random number in a variable and get the same number back when gets backs to the automatic field i do know how to achieve this please help me i am new to php and laravel.
Value is not an attribute, so you have to change
$('#asset_number').attr('value',("<?php CreateRandomNumber(); ?>"));
into
$('#asset_number').val("<?php CreateRandomNumber(); ?>");

Select combobox value and send it to next page by hidden field

I have a select combo box , I have to catch the value of selected item of combo box and set it for a hidden field so that I can catch it in next page. But I am not able to do it. Can any one help me in this.
My form tag is as follow ,
<form class="well" name="ddm" id="ddm" style="margin-left: 30px;" action="<%=request.getContextPath()%>/controller/SMSManagementController">
<input type="hidden" name="flowName" value="PERSIST_SCHOOLYEAR_INFO" >
<input type="hidden" name="schoolYearId" id="schoolYearId" value="">
next my select tag is ,
<div class="form-group control-group">
<select class="form-control selectpicker" name="schoolYear" id="schoolYear">
<option>--Select Grade--</option>
<c:forEach var="grade" items="${gradeInfo}">
<option value="${grade.getDropDownId()}">${grade.getDropDownName()}</option>
</c:forEach>
</select>
</div>
I used javascript to do this as,
<script language="JavaScript">
var schoolYear = document.form.schoolYea.value;
document.ddm.schoolYearId.value = schoolYear;
document.write (schoolYear);
</script>
What is the mistake I am doing?
Guys I solved it like this. ,
<script type='text/javascript'>
$(function() {
$('#schoolYear').change(function() {
// get value from combobox
var x = $(this).val();
// set it to hidden fields
$('#schoolYearId').val(x);
});
});
</script>
it worked.

Categories