We Keep Coding

How do I disable a HTML tag [duplicate]

This question already has answers here:
Script to enable/disable input elements?
(5 answers)
Closed 6 years ago.
I have numerous html input tags, which takes the user input and post it to a variable, code :
<form method = "post" action=""select.php>
<input id="nol" style="width: 280px;" type="text" name="searchdisease" placeholder="type diagnosis one">
<input id="nol" style="width: 280px;" type="text" name="searchdisease1" placeholder="type diagnosis two">
<input id="nol" style="width: 280px;" type="text" name="searchdisease2" placeholder="type diagnosis three">
</form>
then this variable i append it to SQL query to retrieve data LIKE user input code:
$search_disease = $_POST['searchdisease'];
$search_disease1 = $_POST['searchdisease1'];
$search_disease2 = $_POST['searchdisease2'];
$query="SELECT diagnosis FROM medications WHERE diagnosis LIKE '%$search_disease%'";
$result= $con->query($query);
$query1="SELECT diagnosis FROM medications WHERE diagnosis LIKE '%$search_disease1%'";
$result1= $con->query($query1);
$query2="SELECT diagnosis FROM medications WHERE diagnosis LIKE '%$search_disease2%'";
$result2= $con->query($query2);
, then echo the results to a select tag.
code:
<select id="disease" style="width: 40%;" name="tdisease">
<option value="">Select Disease</option>
<?php
while ($row=$result->fetch_array(MYSQLI_ASSOC)) {
?>
<option value="<?php echo $row['ICD10']?>"><?php echo $row['diagnosis'];?> </option>
<?php } ?>
</select>
<select id="disease" style="width: 40%;" name="tdisease1">
<option value="">Select Disease</option>
<?php
while ($row=$result1->fetch_array(MYSQLI_ASSOC)) {
?>
<option value="<?php echo $row['ICD10']?>"><?php echo $row['diagnosis'];?> </option>
<?php } ?>
</select>
<select id="disease" style="width: 40%;" name="tdisease2">
<option value="">Select Disease</option>
<?php
while ($row=$result2->fetch_array(MYSQLI_ASSOC)) {
?>
<option value="<?php echo $row['ICD10']?>"><?php echo $row['diagnosis'];?> </option>
<?php } ?>
</select>
So i want to know how can i use JavaScript to disable or hide the select tags when the user input is empty?

You can simply add event listener on your tags, which will add attribute to selected one "disabled".
It will look like:
const target = document.querySelector('<yourtag>');
target.value.length > 0 ? 'it is ok' : target.setAttribute('disabled', 'disabled');

ID should be different for every inputs.then,
var val=$('#id-of-element').val;
check as: if(val==" ") or if(val==null)
it will be blank when the input is nothing.
you can use below line of code to disable an item:
document.getElementById("id-of-selected-element").disabled="true";
To hide:
document.getElementById("id-of-selected-element").style.display="none";

OpenCart 2.2: Instantly change the quantity if option is selected

I'm running an online store for contact lenses using OpenCart 2.2.
I would need to modify the product page a little in the following way :
When you buy a contact lenses you have 2 dropdown lists where you select the diopter (power) for each eye. What I want to do is, if you select the power on for one eye only, the minimum quantity for purchase of the product to be 1, but if both eyes are selected, the minimum quantity should be 2.
So I'm thinking of a if-else-elseif function, because there are only 3 cases possible - 1 - Only left eye selected; 2 - Both eyes selected; 3 - Only right eye selected. This is how the product page looks now.
Qty = 1 is by default, but I want to make it switch instantly to 2, if something is selected in both dropdown lists.
I suppose I would need some AJAX to do this? I have very minimum knowledge of AJAX.
I DON'T expect someone to do it for me, I'm just trying to find out what I would need to make it happen..
The real boner and what makes me lost is that the select options are named "option[XXX]" by default from OpenCart and the number ([xxx]) is different for each product on the store and each option..
Could anyone give me any clues if that is even possible?
Edit :
Here is how I display my select tags :
<div id="product">
<?php if ($option['type'] == 'select') { ?>
<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
<label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label>
<select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($option['product_option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</option>
<?php } ?>
</select>
</div>
<!-- ... -->
<?php } ?>
<!-- ... -->
</div>
Thanks for the answers! Here is the quantity HTML code as well:
<div class="form-group">
<label class="control-label" for="input-quantity"><?php echo $entry_qty; ?></label>
<input type="text" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control" />
<input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
<br />
<button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block"><?php echo $button_cart; ?></button>
</div>

I don't see any reason to use AJAX for this, it can be done just using jQuery/JavaScript:
(function($) {
'use strict';
$(document).on('ready', function() {
var optionNames = ['power - right eye', 'power - left eye'];
var $qtyInput = $('#product input[name=qty]');
var $options = $('#product select').filter(function() {
var text = $.trim($(this).prev('label').text().toLocaleLowerCase());
return $.inArray(text, optionNames) > -1;
});
$options.on('change', function() {
var selectedTotal = $options.filter(function() {
return !!$(this).val();
}).length;
if (selectedTotal > 0) {
$qtyInput.val(selectedTotal).prop('min', selectedTotal);
}
});
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="product">
<div class="form-group required">
<label class="control-label" for="input-option1">power - left eye</label>
<select name="option[1]" id="input-option1" class="form-control">
<option value="">-- Please Select --</option>
<option value="1">First</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="input-option2">power - right eye</label>
<select name="option[2]" id="input-option2" class="form-control">
<option value="">-- Please Select --</option>
<option value="1">First</option>
</select>
</div>
<div class="form-group">
<input type="number" name="qty" value="1" min="1" required />
</div>
</div>
</div>
You may need to change the selectors to match what you have because you didn't show us your quantity input field.
A couple other things to consider with this code:
The quantity is always set to 2 or 1, regardless of whether or not the user has already entered 6 for example. You may want to add in logic to stop this happening.
Also, OpenCart uses an option_id as well as a product_option_id for each option, with the option_id being the same ID regardless of what product you're on. It may be worth adding this to the select HTML so you can look up the elements more efficiently than checking the label's text value as I have done.

php html form select option to populate text field jquery

I'm editing a wordpress plugin:
It currently has a dropdown option list for a user, and based on that user, I want to fill a text field with that users email.
selection option dropdown:
<div>
<label for="Customer_ID"></label>
<select name="Customer_ID" id="Customer_ID" />
<option value='0'>None</option>
<?php foreach ($Customers as $Customer) { ?>
<option value='<?php echo $Customer->Customer_ID; ?>'><?php echo $Customer->Customer_Name; ?></option>
<?php } ?>
</select>
</div>
The customer email is stored in $Customer->Customer_Email
And Im trying to fill in the following value when a user changes the selected user:
<div class="form-field">
<label for="Order_Email"></label>
<input type='text' name="Order_Email" id="Order_Email" />
</div>
I've played around with filling the Order_Email with the following script, but it just sents the value as the customer_id. How do I change the value to the email
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#Customer_ID').on('change', function () {
var selection = $(this).val();
$('#Order_Email').val(selection);
});
});
</script>

You could just add a title attribute to the options to equal whatever the email value is:
Play around with it here: http://jsfiddle.net/7BUmG/3876/
This might not be the best solution and hacky, but it should do the trick. This will also break after the plugin is updated
<div>
<label for="Customer_ID"></label>
<select name="Customer_ID" id="Customer_ID" />
<option value='0'>None</option>
<?php foreach ($Customers as $Customer) { ?>
<option title='<?php echo $Customer->Customer_Email; ?>'value='<?php echo $Customer->Customer_ID; ?>'><?php echo $Customer->Customer_Name; ?></option>
<?php } ?>
</select>
</div>
and
$(document).ready(function(){
$('#Customer_ID').change(function() {
var email = $(this).find("option:selected").attr("title");
$('#Order_Email').val(email);
});
});

Cannot retrieve option value from a add/remove list using php, jquery and html5

I am having trouble passing/displaying the values inside of a selected list.
I created a add/remove list using Jquery and I tried to display the values passed using foreach and for loops but it is still not working. The values I am trying to get are $existing_mID[$j] from the list named selectto. FYI, I am new to Javascript and therefore I have little understanding to the Jquery code below as I took different references and came up with it.
Please kindly let me know what should I do in order to get the values and I really appreciate your help.
Below is the function that I used to implement the add/remove function.
$(document).ready(function() {
$('#btn-add').click(function(){
$('#select-from option:selected').each( function() {
$('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$('#select-to option').attr('selected',true);
$(this).remove();
});
});
$('#btn-remove').click(function(){
$('#select-to option:selected').each( function() {
$('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
$('#select-to option[value=' +$(this).val()+ ']').attr('selected',true);
$(this).remove();
});
});
});
And this is the form that I am using to set up the option attributes:
<form action = "" method = "POST">
<select name="selectfrom[]" id="select-from" multiple="" size="10">
<?php $j=0; foreach($existing_mTitle as $item) { ;?>
<option value="<?php $existing_mID[$j];?>" >
<?php echo "$existing_mID[$j] & $item";$j++;?>
</option> <?php }?>
</select>
Add »
« Remove
<select name="selectto[]" id="select-to" multiple="" size="10"> </select>
<input type="submit" name="addArticle" value="Add" /> </form>
Below is how I tried to call the variables. They all don't work. So I am thinking if there is anything wrong with the Jquery code.
<?php
if(isset($_POST['selectto']))
{
$selected = $_POST['selectto'];
echo "something in selected<br />";
for ($i=0;$i<count($selected);$i++)
echo "selected #1 : $selected[$i]";
foreach ($selected as $item)
echo "selected: item: $item";
foreach ($selected as $idx => $item)
{
echo "selected: {$idx}: {$item}<br>\n";
}
}
?>
Below is every line of my code that I am working on. I think that there is something wrong either with my option value attribute in my selectto list or my javascript. But I have no idea where to look for the errors. I apologize for posting a lot of codes but not much information given.
Please take a look at it and identify the reasons why the selectto option values are not displaying properly
$messagesql = "SELECT mID, mTITLE from test.message";
$mQuery = mysqli_query($dbc, $messagesql) or die (mysqli_error($dbc));
$num_Mrows=mysqli_num_rows($mQuery);
echo "Number of message rows: $num_Mrows<br />";
while ($row = mysqli_fetch_array($mQuery,MYSQLI_BOTH))
{
$existing_mTitle[] = $row [ 'mTITLE' ];
$existing_mID[] = $row ['mID'];
}
if(isset($_POST['selectto']))
{
$selectedValues = '';
foreach($_POST['selectto'] as $index => $value) {
$selectedValues .= $value.', ';
}
$selectedValues = rtrim($selectedValues , ''); // remove last comma and whitespace
echo 'The selected values are: '. $selectedValues ;
}
else
echo "nothing in selected<br />";
$articleSubmit = $_POST['addArticle'];
if(isset($articleSubmit))
{
$titleSubmit = $_POST['articleTitle'];
$summarySubmit = $_POST['articleSummary'];
$abstractSubmit = $_POST['articleAbstract'];
$regionSubmit = $_POST['articleRegion'];
$populationSubmit = $_POST['articlePopulation'];
$docTypeSubmit = $_POST['articleDocType'];
$docStatusSubmit = $_POST['articleDocStatus'];
$docYearSubmit = $_POST['articleDocYear'];
$keywordSubmit = $_POST['articleKeyword'];
if (null ==($titleSubmit) or null ==($summarySubmit) or null ==($abstractSubmit) or null ==($regionSubmit) or null ==($populationSubmit)
or null ==($docTypeSubmit) or null ==($docStatusSubmit) or null ==($docYearSubmit) or null ==($keywordSubmit) /*or !isset($selected)*/)
{
echo "you need to fill in all the fields in order to add a new article.";
}
else
{
echo "article submitted";
$aSQL = "INSERT INTO test.article
(name, abstract, summary, region, population, docType, docStatus, docYear, keyword) values
('$titleSubmit', '$abstractSubmit', '$summarySubmit', '$regionSubmit', '$populationSubmit',
'$docTypeSubmit', '$docStatusSubmit', '$docYearSubmit', '$keywordSubmit')";
echo $aSQL;
$aQuery = mysqli_query($dbc,$aSQL) or die (mysqli_error($dbc));
$aidSQL = "SELECT aID from article where name = '$titleSubmit' and abstract = '$abstractSubmit' and summary = '$summarySubmit'";
$aidQuery = mysqli_query($dbc, $aidSQL) or die (mysqli_error($dbc));
while ($row = mysqli_fetch_array($aidQuery, MYSQLI_BOTH))
{
$assocAID = $row;
}
echo "<br />assocAID: $assocAID[0]<br />";
$selected = $_POST['selectto'];
foreach($selected as $item)
{
$amSQL = "INSERT INTO a_m (assocAID, assocMID) values ($assocAID[0], $item)";
$amQuery = mysqli_query($dbc,$amSQL) or die (mysqli_error($dbc));
}
}
}
?>
<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="test5-1-1.js"></script>
<link rel="stylesheet" type="text/css" href="test5-1-1.css"/>
<head>
<meta charset="utf-8">
<title>Add New Content</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<link rel="stylesheet" href="cyjm4.css"/>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Article</li>
<li>Message</li>
<li>Platform</li>
</ul>
<div id="tabs-1">
<form action="" method="POST">
<p>Title:</p> <textarea name="articleTitle" cols="40" rows="3"></textarea>
<p>Summary:</p> <textarea name="articleSummary" cols="40" rows="8"></textarea>
<p>Abstract:</p> <textarea name="articleAbstract" cols="80" rows="6"></textarea>
<p>Keyword:</p> <textarea name="articleKeyword" cols="40" rows="2"></textarea>
<div id="left">
<p>Regions:</p>
<select name="articleRegion">
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<option value="EUROPE">Europe</option>
</select>
<p>Populations:</p>
<select name="articlePopulation">
<option value="General">General</option>
<option value="Elderly">Elderly</option>
<option value="Women">Women</option>
</select>
<p>Document Type:</p>
<select name="articleDocType">
<option value="Research">Research</option>
<option value="Report">Report</option>
</select>
<p>Document Status:</p>
<select name="articleDocStatus">
<option value="Published">Published</option>
<option value="Unpublished">Unpublished</option>
</select>
<p>Documnet Year:</p>
<select name="articleDocYear">
<option value="2004">2004</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
<br /><br />
</div>
<fieldset>
<select name="selectfrom[]" id="select-from" multiple="" size="10">
<?php $j=0; foreach($existing_mTitle as $item) { ;?>
<option value=" <?php $existing_mID[$j]; ?> " ><?php echo "$existing_mID[$j] & $item";$j++;?></option>
<?php }?>
</select>
<button type="button" id="btn-add">Add</button>
<button type="button" id="btn-remove">Remove</button>
<select name="selectto[]" id="select-to" multiple="" size="10">
</select>
</fieldset>
<input type="submit" name="addArticle" value="Add" />
</form>
</div>
<div id="tabs-2">
<p>Title:</p> <textarea name="articleTilte" cols="40" rows="3"></textarea>
<p>Summary:</p> <textarea name="articleSummary" cols="40" rows="8"></textarea>
</div>
<div id="tabs-3">
<p></p>
</div>
</div>
</body>
</html>

I simplified the code a bit for you as an example.
Lets say u have the following code
<form method="POST">
<select name="selectfrom[]" id="select-from" multiple="" size="10">
<?php
for($i = 0; $i < 10;$i++) {
echo '<option value="'.$i.'">Item '.$i.'</option>';
}
?>
</select>
<button id="btn-add" type="button>Add »</a>
<button id="btn-remove" type="button">« Remove</a>
<select name="selectto[]" id="select-to" multiple="" size="10"> </select>
<input type="submit" name="addArticle" value="Add" /> </form>
</form>
<?php
print_r($_POST);
/*
Array
(
[selectto] => Array
(
[0] => 2
[1] => 3
)
[addArticle] => Add
)
*/
//So this means that :
$selectedValues = '';
foreach($_POST['selectto'] as $index => $value) {
$selectedValues .= $value.', ';
}
$selectedValues = rtrim($selectedValues , ', '); // remove last comma and whitespace
echo 'The selected values are: '. $selectedValues ;
?>

How to keep the dropdown menu selected value after form is submitted?

I am creating a very simple form with a dropdown menu and a text filed.
It shows the errors if the form has empty field during the submission.
I want to show the filled values after the form submission if there is any error.
It works on text field as I expected.
Ex: If fill the name and submit the form without filling the title dropdown menu, it showing the name I typed on the filed during the the error is appeared.
But how can I do that for dropdown menu also?
Ex: If I select the title drop down menu and submit the form without filling name field, it should show the selected title dropdown value during the the error is appeared.
how can I do that?
here is my code and it's a wordpress site:
<?PHP
$errors = array();
if($_POST["submit"]) {
$name_title = $_POST["name_title"];
$sender = $_POST["sendername"];
//Check the name title that it is selected or none.
if($name_title === none){
//if selected is none, add error to $errors array.
$errors['name_title'] = "Please select the title of your name!";
}
if(empty($sender)){
//Blank string, add error to $errors array.
$errors['sendername'] = "Please enter your name!";
}
// sending form
if(empty($errors)){
$mail_sent = wp_mail( $to, $subject, $mailBody, $headers );
}
}
if ($mail_sent) {
?>
<h1 style="color: #007f00;">Request sent.</h1>
<?php
} else {
?>
<form id="" name="" action="<?php echo get_permalink(); ?>" method="post">
<div class="label-input-wrapper">
<div class="form-label">Title</div>
<div class="form-input">
<select name="name_title" class="name-title-input">
<option value="none" selected="selected">Select Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="4">Ms</option>
</select>
<div class="error-msg">
<?php if(isset($errors['name_title'])) { echo '<span style="color: red">'.$errors['name_title'].'</span>'; } ?>
</div>
</div>
</div>
<div class="label-input-wrapper">
<div class="form-label">Name</div>
<div class="form-input">
<input type="text" name="sendername" value="<?PHP if(!empty($errors)) { echo $sender;} ?>" />
<div class="error-msg">
<?php if(isset($errors['sendername'])) { echo '<span style="color: red">'.$errors['sendername'].'</span>'; } ?>
</div>
</div>
</div>
<input type="submit" value="Submit" name="submit">
</form>
<?php
}
?>

although the answer by #CKocer can also work but I like to use variables instead and using $_POST in HTML and also more readable
In declare $name_title out side of if($_POST) and can do it like this <?php $name_title = ''; ?>
For Drop Down code change like this
<select name="name_title" class="name-title-input">
<option value="none" selected="selected">Select Title</option>
<option value="Mr" <?php if($name_title == 'Mr') { ?> selected <?php } ?>>Mr</option>
<option value="Mrs" <?php if($name_title == 'Mrs') { ?> selected <?php } ?>>Mrs</option>
<option value="Miss" <?php if($name_title == 'Miss') { ?> selected <?php }
?>>Miss</option>
<option value="4" <?php if($name_title == 'Ms') { ?>selected <?php } ?>>Ms</option>
</select>

Try this.
<select name="name_title" class="name-title-input">
<option value="none" selected="selected">Select Title</option>
<option value="Mr" <? if(#$_POST['name_title'] == 'Mr') { echo 'selected = \"selected\"'; } ?>>Mr</option>
<option value="Mrs" <? if(#$_POST['name_title'] == 'Mrs') { echo 'selected = \"selected\"'; } ?>>Mrs</option>
<option value="Miss" <? if(#$_POST['name_title'] == 'Miss') { echo 'selected = \"selected\"'; } ?>>Miss</option>
<option value="4" <? if(#$_POST['name_title'] == 'Ms') { echo 'selected = \"selected\"'; } ?>>Ms</option>
</select>

I'll borrow #ThinkingWeb's code and tidy it up a bit. One of the great features of HTML tags is that you can line-break them, which makes for much more readable code. Each if statement here gets its own line:
<select name="name_title" class="name-title-input">
<option value="none"
>Select Title</option>
<option value="Mr"
<?php if($name_title == 'Mr'): ?> selected="selected" <?php endif ?>
>Mr</option>
<option value="Mrs"
<?php if($name_title == 'Mrs'): ?> selected="selected" <?php endif ?>
>Mrs</option>
<option value="Miss"
<?php if($name_title == 'Miss'): ?> selected="selected" <?php endif ?>
>Miss</option>
<option value="4"
<?php if($name_title == 'Ms'): ?> selected="selected" <?php endif ?>
>Ms</option>
</select>
I've dropped the selected="selected" in the first option - this will select automatically if there is no explicit selection, and you don't want more than one! I've switched all the selections to use the attribute="value" format, though I don't think it's mandatory for HTML.
I've used the colon form of the if statement too - for HTML I find it preferable to the brace approach.