We Keep Coding

Loop onchange function to manipulate the target class name

I used php and jquery. I have to generate multiple select tag depends on the value of condition. I need to manipulate both html,php and and jquery by using loop but I can't find the answer for this to work.
php html code... I like to populate multiple select tag with different classname
<?php $count = 2; ?>
<div id="comments" hidden><?php echo htmlspecialchars($count); ?></div>
<?php for($i = 1; $i <= $count; $i++){ ?>
<input type="text" readonly="readonly" class="resone<?php echo $i; ?>" id="resone">
<select name="artist_1" class="part<?php echo $i; ?>" id="part">
<option value="" disabled selected>Select Category</option>
<option value="1">medicine</option>
<option value="2">shoes</option>
</select>
<?php }?>
jquery. I like to put the onchange function into the loop to manipulate the target class value
<script>
$(function() {
var count = document.getElementById("comments").textContent;
for (var i = 1; i <= count; i++) {
$('.part' + i).change(function() {
var display = $('.part' + i).find(":selected").val();
$('.resone' + i).val(display);
})
}
})
</script>
I hope you could help me with this one.

You are overcomplicating things and abusing the class by adding a counter to it.
Here is my suggestion - you can actually ignore the IDs and the script does not care about the count, just about how many ".part" there are
$(function() {
$(".part").on("change", function() {
$(this).prev(".resone").val(this.value);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" readonly="readonly" class="resone" id="resone0">
<select name="artist_1" class="part" id="part0">
<option value="" disabled selected>Select Category</option>
<option value="1">medicine</option>
<option value="2">shoes</option>
</select>
<hr/>
<input type="text" readonly="readonly" class="resone" id="resone1">
<select name="artist_1" class="part" id="part1">
<option value="" disabled selected>Select Category</option>
<option value="1">medicine</option>
<option value="2">shoes</option>
</select>
PHP: - the IDs are not even used
<?php for($i = 1; $i <= $count; $i++){ ?>
<input type="text" readonly="readonly" class="resone" id="resone<?php echo $i; ?>">
<select name="artist_1" class="part" id="part<?php echo $i; ?>">
<option value="" disabled selected>Select Category</option>
<option value="1">medicine</option>
<option value="2">shoes</option>
</select>
<?php }?>

You don't need to use a for loop, just give the select a common class and do like this:
$(function() {
$('.part').change(function() {
var display = $(this).val();
$(this).next('.resone').val(display);
})
})
Since I can't see the element with the class resone i can't make sure if $(this).next('.resone').val(display) works.
Code example
$(function() {
$('.part').change(function() {
var display = $(this).val();
$(this).next('.resone').val(display);
})
})
<?php $count = 2; ?>
<div id="comments" hidden>
<?php echo htmlspecialchars($count); ?>
</div>
<?php for($i = 1; $i <= $count; $i++){ ?>
<select name="artist_1" class="part" >
<option value="" disabled selected>Select Category</option>
<option value="1">medicine</option>
<option value="2">shoes</option>
</select>
<?php }?>

check one of the select box is selected

i have 4 selectbox ,first one is vehicle selectbox and other three are sub of that vehicle select box ,if i select vehicle select box and click button i want to show a error message ,because one of the sub select is also i want to selected .... any one help ..i am just beginner in jquery/javascript
in simplest words :p ..check one of the sub select box(cars , caravans,buses select box) is selected if i selected main vehicle selectbox...
my code :
<div class="members-wrap-vehicle">
<label>Vehicle</label>
<select name="reservation[vehicle]">
<option value="0">Select</option>
<?php for($i=1;$i<11;$i++) { ?>
<option <?php if($_POST['reservation']['vehicle'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
<?php } ?>
</select>
</div>
<div class="members-vehicle-list" <?php if($_POST['reservation']['vehicle'] == 0) { echo 'style="display: none;"'; } ?> >
<div class="members-wrap-adult">
<label>Cars</label>
<select name="reservation[cars]">
<option value="0">Select</option>
<?php for($i=1;$i<11;$i++) { ?>
<option <?php if($_POST['reservation']['cars'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
<?php } ?>
</select>
</div>
<div class="members-wrap-child">
<label>Caravans</label>
<select name="reservation[caravans]">
<option value="0">Select</option>
<?php for($i=1;$i<11;$i++) { ?>
<option <?php if($_POST['reservation']['caravans'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
<?php } ?>
</select>
</div>
<div class="members-wrap-infant">
<label>Buses</label>
<select name="reservation[buses]">
<option value="0">Select</option>
<?php for($i=1;$i<5;$i++) { ?>
<option <?php if($_POST['reservation']['buses'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?> </option>
<?php } ?>
</select>
</div>

Take a look at this SO question: How to check if an option is selected?
Using what is suggested in that link, add an alert with whatever message you want if no option has been selected.

There are new lines of code but have certain changes for better understanding for you and test.
HTML code
<div class="members-wrap-vehicle">
<label>Vehicle</label>
<select name="reservation[vehicle]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="members-vehicle-list">
<div class="members-wrap-adult">
<label>Cars</label>
<select name="reservation[cars]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="members-wrap-child">
<label>Caravans</label>
<select name="reservation[caravans]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="members-wrap-infant">
<label>Buses</label>
<select name="reservation[buses]">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
jQuery Code
$(function(){
$('.members-wrap-vehicle select').change(function(){
var cars = $('.members-wrap-adult select option:selected').val();
var caravans = $('.members-wrap-child select option:selected').val();
var buses = $('.members-wrap-infant select option:selected').val();
if ( cars == 0 || caravans == 0 || buses == 0 ){
alert('please select any of cars or caravans or buses');
}
});
});
Hope this works for you. THank YOu

This should work but there are some caveats. You have to change your <select> element names to ids (id = 'xxx'). Also, this function assumes that the number of vehicles in the sub menus totals the number in the vehicles menu. Please let me know if you need anything further! Cheers
$('#BUTTON_ID').on('click', function() {
var vehicle = $('#reservation[vehicle]').val();
var cars = $('#reservation[cars]').val();
var caravans = $('#reservation[caravans]').val();
var buses = $('#reservation[buses]').val();
if (vehicle == (cars + caravans + buses)) {
//do something
} else {
//error message
alert('Error has occurred.');
};
});

Content changeable Dropdownlist from database data

Am loading my user records from database to the table, Am using:
foreach ($userArray as $key => $value) {
I have isAdmin row which contains 'Y', 'N' data.I need to make dropdownlist from this row.If data in Db is 'Y' other dropdownlist option should be 'N' and v/v.
Am using <select id="<?php echo $userArray[$key]["isAdmin"]?>">
I tried something like that, but if my data is Y it gives two more options , Y and N, it should be N, how to repair that?Here is my code:
<select id="<?php echo $userArray[$key]["isAdmin"]?>">
<option value="<?php echo $userArray[$key]["isAdmin"]?>">
<?php echo $userArray[$key]["isAdmin"];
if (strcmp($userArray[$key]["isAdmin"],"Y")==0){
?></option>
<option value="N">N</option>
<option value="Y" style="display:none;">Y</option>
<?php
}
else
?>
<option value="Y">Y</option>
<option value="N" style="display:none;">N</option>
</select>
I found a solution, here is my code:
<option value="<?php echo $userArray[$key]["isAdmin"]?>">
<?php echo $userArray[$key]["isAdmin"];
if (strcmp($userArray[$key]["isAdmin"],"Y")==0){
?></option>
<option value="N">N</option>
<?php
}
if (strcmp($userArray[$key]["isAdmin"],"N")==0){
?>
<option value="Y">Y</option>
<?php
}
?>
</select>

Create a if condition in your nav bar checking isAdmin and then echo the other dropdownlist.
if($isadmin == "Y"){
echo '?>
//Put Html code here for admin
<?php ';
}else{
echo'?>
//Put Html code here for non admin
<?php';
}

Select problems in IE9 - in other browsers it works perfectly

I have problems with this particular form, i need first to select a value and then to submit the form. Submit form works good, however the default selection value in all browsers is selected and it is Acceptable, except in IE where no default selection value is selected. In IE there is nothing selected by default.
How do I fix this?
Picture of the problem :
:
<select name="formQuality" id="formQuality" value="acceptable">
<option value="acceptable">Acceptable</option>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="excellent">Excellent</option>
<option value="best">Best</option>
</select>
<?php
if(isset($_POST['SubmitButton'])){ //check if form was submitted
$input = $_POST['inputText']; //get input text
$varQuality = $_POST['formQuality'];
$message = "Success! You entered: ".$input;
}
?>
<br>
<form action="" method="post">
<h1>Choose Quality:</h1>
<?php
$thequa = htmlspecialchars($_POST['formQuality']);
?>
<select name="formQuality" id="formQuality" value="<?php echo $thequa;?>">
<option <?php if ($thequa1 == 'acceptable') { ?>selected="true" <?php }; ?> value="acceptable">Acceptable</option>
<option selected="true" value="acceptable">Acceptable</option>
<option <?php if ($_POST['formQuality'] == 'good') { ?>selected="true" <?php }; ?> value="good">Good</option>
<option <?php if ($_POST['formQuality'] == 'better') { ?>selected="true" <?php }; ?> value="better">Better</option>
<option <?php if ($_POST['formQuality'] == 'excelent') { ?>selected="true" <?php }; ?> value="excellent">Excellent</option>
<option <?php if ($_POST['formQuality'] == 'best') { ?>selected="true" <?php }; ?> value="best">Best</option>
</select>
<textarea name="inputText" cols="100" rows="20" style="border:solid 1px orange;"><?php echo $thetext;?></textarea>
<p>
<input type="submit" value="Rewrite" name="SubmitButton"/>
</form>

The intended way to preselect an option is setting the selected attribute on the option element, rather than adding a value attribute to the select field.
<select name="formQuality" id="formQuality">
<option value="acceptable" selected>Acceptable</option>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="excellent">Excellent</option>
<option value="best">Best</option>
</select>
This produces the expected result in all browsers, including IE.

Use selected="selected"
Like,
<option value="My Default" selected="selected">
to make an option as default selected value. This works in all browsers.

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.