angularjs interferes with echoing php variable - javascript

I'm trying to pull a php variable ($purpose) and show it on the option select. The code that I have (see below) only works when I took out the element attribute ng-model="purpose". If I left the ng-model in-placed, the option select showed Purpose, which indicated php echoinng is did not go through. It seems echoing php variable and using angularjs conflicting with one another. Does anyone have this issue? Is there a workaround?
<select id="purpose" class="form-control custom-select" name="purpose" value="<?php if(isset($purpose) or !empty($purpose)) {echo $purpose;}?>" ng-model="purpose" autocomplete="on" required/>
<option <?php if($purpose == "") echo 'selected';?> value="">Purpose</option>
<option <?php if($purpose == "1030") echo 'selected';?> value="1030">1Exchange</option>
<option <?php if($purpose == "1040") echo 'selected';?> value="1040">Non-exchange</option>
<option <?php if($purpose == "1050") echo 'selected';?> value="1050">Financing</option>
</select>

Don't use value attribute when using ng-model. Just initialize a variable purpose & assign PHP variable to it. Like below:
<select ng-init="purpose = <?php if(isset($purpose) or !empty($purpose)) {echo $purpose;}?>" id="purpose" class="form-control custom-select" name="purpose" ng-model="purpose" autocomplete="on" required/>
<option <?php if($purpose == "") echo 'selected';?> ng-value="">Purpose</option>
<option <?php if($purpose == "1030") echo 'selected';?> ng-value="1030">1Exchange</option>
<option <?php if($purpose == "1040") echo 'selected';?> ng-value="1040">Non-exchange</option>
<option <?php if($purpose == "1050") echo 'selected';?> ng-value="1050">Financing</option>
</select>

While you might be able to get it work using this style, it is recommended to use JSON to populate data from back-end to angular.
<?php
$purpose_arr = array(
"1030" => "1Exchange",
"1040" => "Non-exchange",
"1050" => "Financing"
);
echo "<script> var purpose='" + json_encode($purpose_arr) + "'; </script>"
?>
html:
<select id="purpose" class="form-control custom-select" name="purpose" ng-model="purpose" autocomplete="on" required
ng-options="value as key for (key, value) in purpose" />
<option value="">Purpose</option>
</select>
controller:
$scope.purpose = purpose;

Related

how to avoid repetition of values in dropdown list while updating in php

I want to update "profile of a user" in php. There is a repetition of one value for two times in dropdown list. for example i take language value='Punjabi' from database but there is also a value placed in dropdown with name of 'Punjabi'.
The issue is simply that there is a repetition of value which i don't want.
<?php $result=mysqli_query($conn, "select * from profile where id=$firstPerson");
while($queryArray=mysqli_fetch_array($result)){ ?>
<select name="language" id="language" >
<option value='<?php echo $queryArray["language"];?> '> <?php echo $queryArray["language"]; ?></option>
//for example, the value from database is "Punjabi"
<option value="Hindi">Hindi</option>
<option value="Punjabi">Punjabi</option>
<option value="Urdu">Urdu</option>
</select>
<?php } ?>
when a value='Punjabi' from database is selected in dropdown list, the dropdown should not show the value='Punjabi' that is already placed in dropdown.
Remember: i have more than 1000 values in my dropdown(html) list.
screenshot
Instead of creating a new option according to the user data, Check if existing options are equal to user data:
<select name="language" id="language" >
<option value="Punjabi" <?php if ($queryArray["language"]=="Punjabi"){echo 'selected="selected"'} ?>>Punjabi</option>
<option value="Hindi" <?php if ($queryArray["language"]=="Hindi"){echo 'selected="selected"'} ?>>Hindi</option>
<option value="Urdu" <?php if ($queryArray["language"]=="Urdu"){echo 'selected="selected"'} ?>>Urdu</option>
</select>
If there are large number of options and you don't want to hard code these conditions, you can remove the second option using javascript on DOM ready:
$(document).ready(function(){
$('option[value="<?php echo $queryArray["language"] ?>"]').eq(1).remove();
})
skip the loop when value is equal to Punjabi, Urdu and Hindi.
<?php $result=mysqli_query($conn, "select * from profile where id=$firstPerson");
while($queryArray=mysqli_fetch_array($result)){ ?>
<select name="language" id="language" >
<?php if($queryArray["language"]!="Punjabi" && $queryArray["language"]!="Urdu" &&
$queryArray["language"]!="Hindi") { ?>
<option value="Hindi">Hindi</option>
<option value="Punjabi">Punjabi</option>
<option value="Urdu">Urdu</option>
<?php } ?>
I think you are doing it wrong way the correct way would be having a table which stored all the languages along with values
using selected attribute to achieve your objective
<?php
$result=mysqli_query($conn, "select * from profile where id=$firstPerson");
$queryArray1=mysqli_fetch_array($result);
$langOfUser=$queryArray1["language"];
?>
<select name="language" id="language" >
<?php $result=mysqli_query($conn, "select * from langtab");
while($queryArray=mysqli_fetch_array($result)){ ?>
<option value='<?php echo $queryArray["languageValue"];?> ' <?php if($langOfUser== $queryArray["languageValue"]){ echo 'selected';}?>> <?php echo $queryArray["languageName"]; ?></option>
<?php } ?>
</select>
You have to use if condition to display values in select option.
<select name="language" id="language" >
<?php $result=mysqli_query($conn, "select * from profile where id=$firstPerson");
while($queryArray=mysqli_fetch_array($result)){
if($queryArray["language"]!="Punjabi") {
$opval = "<option value=" . $queryArray["language"] . ">". $queryArray["language"]. " </option> "
echo $opval;
}
?>
<option value="Punjabi">Punjabi</option>
<option value="Hindi">Hindi</option>
<option value="Urdu">Urdu</option>
</select>
So your problem is that you have html hardcoded options and database options. You need to merge them into one on that website.
So you can use some javascript
elements = [1, 2, 9, 15].join(',')
$.post('post.php', {elements: elements})
But you can fill your elements like this is you don´t want to write it by hand
$("#id select").each(function()
{
allOptionsInSelect.push($(this).val());
});
Than on php side you can do
$elements = $_POST['elements'];
$elements = explode(',', $elements);
And now you have html hardcoded select on server side. Now you need to check if it doesn´t already exist when you are printing from database
You can do that like this
if(in_array(value_from_database, $elements) {
// It is so skip
} else {
// It is not, so print it
}
You can use if elseif this way.
<select name="language" id="language" >
<option value='<?php echo $queryArray["language"];?>'><?php echo $queryArray["language"]; ?></option>
<?php if ($queryArray["language"] == "Hindi") { ?>
<option value="Punjabi">Punjabi</option>
<option value="Urdu">Urdu</option>
<?php } elseif ($queryArray["language"] == "Urdu") { ?>
<option value="Punjabi">Punjabi</option>
<option value="Hindi">Hindi</option>
<?php } elseif ($queryArray["language"] == "Punjabi") { ?>
<option value="Urdu">Urdu</option>
<option value="Hindi">Hindi</option>
<?php } ?>

passing a html select value to a JS object

So I have a regular HTML form with some inputs and 1 select value that i am passing to a JS object..
I don't know how to grab the value of the selected option.
var dataObj = {
firstName: $("input[name='firstName']", _form).val(),
lastName: $("input[name='lastName']", _form).val(),
lastName2: $("input[name='lastName2']", _form).val(),
email: $("input[name='email']", _form).val(),
oldPassword: $("input[name='oldPassword']", _form).val(),
newPassword: $("input[name='newPassword']", _form).val(),
userType: $("select[name=usertype]", _form).val(),};
I am grabbing al the values of the inputs fine, but the value of the select menu comes undefine... any help for a noob?
<select class="uk-select" name="usertype" id="userType">
<option value="0" <?php if ($UserEdit ->userType == 0) {echo "selected";} ?> >Needs Auth</option>
<option value="1" <?php if ($UserEdit ->userType == 1) {echo "selected";} ?> >Super Admin</option>
<option value="2" <?php if ($UserEdit ->userType == 2) {echo "selected";} ?> >Supervisor</option>
<option value="3" <?php if ($UserEdit ->userType == 3) {echo "selected";} ?> >Operator</option>
<option value="4" <?php if ($UserEdit ->userType == 4) {echo "selected";} ?> >Hotel Admin</option>
<option value="5" <?php if ($UserEdit ->userType == 5) {echo "selected";} ?> >Guest</option>
<option value="6" <?php if ($UserEdit ->userType == 6) {echo "selected";} ?> >Visitor</option>
</select>
You're almost there. You wanna use the :selected psuedo selector:
userType: $("select[name='usertype'] option:selected").val()
// or it could be .text()
userType: $("select[name='usertype'] option:selected").text()
//without the attribute select - give it an id
userType: $("#userType option:selected").text()
Learn jQuery has a great page on exactly what you're doing:
Learn jQuery
I put an id# on the select tag and used this userType: $("#userType option:selected", _form).attr('value'), in my javascript to grab the value. It worked like a charm. The main issues is that I was trying to grab the value of select, which technically it doesn't have. So I needed to grab the attribute value of the selected option.

Keep the selected options after submitting the form

Good morning, I have a problem that is: I can not keep several options selected after submitting the form and I would like someone to help me.
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
<option value="<?php echo $reg_sql['ID_USER']; ?>"><?php echo $reg_sql['NOMEUSER']; ?></option>
<?php } ?>
</select>
<script type="text/javascript">
document.getElementById('utilizadores').value = "<?php echo $_POST['utilizadores[]'];?>";
</script>
this is my code to have the various options in the select box
You have to check if $_POST['utilizadores'] or $_GET['utilizadores'] it depends on your request type. I will use $_POST in here for explain my answer.
your select is multiple, you can use in_array function for checking that if result from db record is in array of $_POST['utilizadores']
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
**<option value="<?php echo $reg_sql['ID_USER']; ?>"
<?php
if(isset($_POST['utilizadores'])){
if(in_array($reg_sql['ID_USER'], $_POST['utilizadores'])){
echo 'selected';
}else{
echo '';
}
}
?>
>**<?php echo
$reg_sql['NOMEUSER']; ?></option>
<?php } ?>
</select>
You may be able to do it more efficiently if your database result also contains which rows are selected, but when you loop through, just add the selected="selected" attribute to the <option> tag.
Assuming your $_POST array exists in this scope, you can use the in_array function in PHP to determine if the option has been selected (docs).
The ternary based operation is as follows:
in_array($reg_sql['ID_USER'],$_POST['utilizadores']) ? 'selected="selected"' : ''
Which says "if the ID_USER is in the post array, then print the selected attribute, otherwise, print a blank string"
Putting it all together:
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
<option value="<?php echo $reg_sql['ID_USER']; ?>" <?= in_array($reg_sql['ID_USER'],$_POST['utilizadores']) ? 'selected="selected"' : '' $?>>
<?php echo $reg_sql['NOMEUSER']; ?>
</option>
<?php } ?>
</select>
An example of how you can do this. Either add the "selected" string if yes or leave blank if no. You can also write selected="selected". You can do the same thing to set disabled or readonly.
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
<?php $selected = isset($reg_sql["mi_variable"]) ? "selected" : ""; ?>
<option value="<?php echo $reg_sql['ID_USER'];?>" <?php echo $selected; ?> >
<?php echo $reg_sql['NOMEUSER']; ?>
</option>
<?php } ?>
</select>
<script type="text/javascript">
document.getElementById('utilizadores').value = "<?php echo $_POST['utilizadores[]'];?>";
</script>

How to call HTML required attribute when the value is 0?

I have a drop down list where I'm populating data from the database.
<div class="form-group">
<label>Title:</label>
<select class="form-control" name="Title" id ="titleselect" required>
<!-- <option value="" selected="selected">?</option> -->
<?php foreach ($titles as $row) {
if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
<option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
<?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
</select>
</div>
My form,
How values are populated from the database,
My database table,
I want to add a validation when the title form is populated with the value "0", which is "?", it should call the HTML required attribute.
Or I would like to disable the option with the '?' mark.
How can I do achieve this?
I have managed to find a solution to my issue. I managed to do it without any JS or Jquery. Just added an if statement.
<div class="form-group">
<label>Title:</label>
<select class="form-control" name="Title" id ="titleselect" required>
<?php foreach ($titles as $row) {
if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
<?php if(($this->session->userdata('Title') == 0)) { ?>
<option value="" selected disabled><?php echo $row->value; ?></option>
<?php } else{?>
<option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
<?php } ?>
<?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
</select>
you can use jquery like this: you can use an id for ? like id="yourZeroOption" and then
$('option#yourZeroOption').each(function() {
if ($(this).isChecked())
$("select").attr("required", true);
else
alert('this filled cannot be ?');
});
since what you asked was'nt clear enough this code might helf and if you manipulate this code you can get what you want from your code. but this for sure will give you a gist of what you should do. by the way this code does not need to submit it will show the alert before that
If this is in Laravel there is a way to catch certain number to be pass. In this case, try with greater_than rule with a custom message.
Example
$this->form_validation->set_rules('title', 'Title', 'greater_than[0]');
$this->form_validation->set_message('greater_than', 'Please select one of these value');
Note: JS validation works, But keep mind it's not always.
You should mark your <select> field as required, then the first option as disabled (and selected):
<select required>
<option value="" selected disabled>?</option>
<option value="1">Mr.</option>
<option value="2">Miss</option>
<option value="3">Mrs.</option>
</select>
This will make the first entry work as a placeholder basically.
we cant make it require with 0 value it can be done only if value=""
here is my idea,
<form action="/action_page.php">
<select required>
<option value="0">?</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select option:selected").val("");
});
</script>
<style>

reload PHP variable as submitted in dropdown menu via AJAX

On a webpage I am trying to create a dropdown menu with some features. After a selection has been made in the dropdown menu the PHP variable "$bin_sec" gets updated to a new value. After $bin_sec has been updated I want a div element (with the id tag of "WHAT") in my webpage to now be reloaded and now take on the new value of $bin_sec.
I'm open to using AJAX, PHP, jQuery, MySQL, etc...
I can't find or come to a working solution.
My code for the dropdown menu:
<form id="container2" method="post">
<select name="name" onchange='$("#WHAT").load("testing.php",{bin_sec:x});'>
<?php $bin_sec=60;?>
<option selected="selected" <?php if ($_POST['name'] == '60'){ print 'selected'; $bin_sec=60; }?> value="60">1 Minute</option>
<option <?php if ($_POST['name'] == '120'){ print 'selected'; $bin_sec=120; }?> value="120">2 Minutes</option>
<option <?php if ($_POST['name'] == '300'){ print 'selected'; $bin_sec=300; }?> value="300">5 Minutes</option>
<option <?php if ($_POST['name'] == '600'){ print 'selected'; $bin_sec=600; }?> value="600">10 Minutes</option>
</select>
</form>
<div id="WHAT">
<?php
echo $bin_sec;
...
?>
</div>
testing.php:
<?php
$bin_sec = $_POST['name'];
?>
<script type="text/javascript">
$("#WHAT").load("index.php #WHAT")
</script>
I think this code should work but it doesn't...
Any corrections would be very much appreciated. Thank you in advance.
There are Many Ways to do it one sample way is given below
<?php
if(isset($_GET['bin_sec']))
{
$bin_sec=$_GET['bin_sec'];
}
else
{
$bin_sec=60;
}
?>
<select name="bin" onchange="window.location.href='stack.php?bin_sec='+this.value">
<option <?php if($bin_sec == '60'){ print 'selected';}?> value="60">1 Minute</option>
<option <?php if ($bin_sec == '120'){ print 'selected'; }?> value="120">2 Minutes</option>
<option <?php if ($bin_sec == '300'){ print 'selected'; }?> value="300">5 Minutes</option>
<option <?php if ($bin_sec == '600'){ print 'selected'; }?> value="600">10 Minutes</option>
</select>
<div id="WHAT">
<?php
echo $bin_sec;
?>
</div>
I hope it helps and stack.php is your php file where dropdown exists i hope you understand for any doubts revert back
You will need to echo out $bin_sec in PHP in order for it to be sent to the browser.
Additionally you need to change your $_POST var to the same name as you are sending from the browser as $_POST['name'] does is undefined
Example below
<?php
$bin_sec = $_POST['bin_sec'];
echo $bin_sec;
?>
You can use this code:
<option <?php if ($_POST['name'] == '120'){ print 'selected'; =120; }?> value=" <?php $_POST['name'] == '120'? "$bin_sec_value":120 ; ?>">2 Minutes</option>

Categories

Resources