We Keep Coding

Jquery chosen remove attributes by name or id

I'm using Chosen from jQuery to add/hide some form datas based on previous inputs.. I want to ask how I can not hide an entire select only a few elements from in based on id/name.
Thank you.
Based on
$("#otherField2").chosen()
$("#seeAnotherField2").chosen()
// This way I can hide all options if nothing is chosen
$("#seeAnotherField2").change(
function() {
if ($(this).val() == "nothing") {
$('#otherFieldDiv2').show();
$('#otherField2').attr('required', '');
$('#otherField2').attr('data-error',
'This field is required.');
} else {
$('#otherFieldDiv2').hide();
$('#otherField2').removeAttr('required');
$('#otherField2').removeAttr('data-error');
}
});
$("#seeAnotherField2").trigger("change");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" />
<div class="form-group" id="otherFieldDiv3">
<label for="otherField3">Sev</label>
<select class="form-control" id="otherField2">
<option value="nor" id="1">Nor</option>
<option value="sev" id="2">Sev</option>
<option value="min" id="3">Min</option>
</select>
</div>
Hide only option1 from this:
<div class="form-group">
<label for="seeAnotherField2">Options</label>
<select class="form-control" id="seeAnotherField2">
<option value="nothing">Nothing</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
</div>

Try this:
$("#seeAnotherField2").change(function() {
if ($(this).val() == "nothing") {
$("#otherField2 option[value='nor']").hide();
$("#otherField2 option[value='sev']").attr('selected','selected');
}else{
$("#otherField2 option[value='nor']").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="otherFieldDiv3">
<label for="otherField3">Sev</label>
<select class="form-control" id="otherField2">
<option value="nor" id="1">Nor</option>
<option value="sev" id="2">Sev</option>
<option value="min" id="3">Min</option>
</select>
</div>
Hide only option1 from this:
<div class="form-group">
<label for="seeAnotherField2">Options</label>
<select class="form-control" id="seeAnotherField2">
<option value="nothing">Nothing</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
</div>

Jquery On change array ID

I have multiple selector on loop in php code
var new_acc = $("div[id^=new_acc]").hide();
for (var i = 1; i <= id; i++) {
$('#reason_change\\['+id+'\\]').change(function(e) {
$( "#reason_change\\["+id+"\\] ").show();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>
if i click on change my selctor id = reason_change[2] i wanna show id="new_acc[2]" showing

Your JS doesn't need the loop and doesn't need to reference the individual element IDs, because you can select all of the select elements at once and bind a single change handler to them, then within the handler use this to reference the changing element and (DOM navigation method) .next() to get its associated div element:
$("select[id^=reason_change]").change(function() {
$(this).next().show();
});
If you wanted to make it so that the div is only shown when certain values are selected in the select element, and hidden otherwise, you can do something like this:
var new_acc = $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
if(this.value === "2") { // show only if certain option is selected
$(this).next().show();
} else {
$(this).next().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]" >
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>

var new_acc = $("div[id^=new_acc]").hide();
$("select[id^=reason_change]").change(function() {
if($(this).val() === "2"){
$(this).next().show();
} else {
$(this).next().hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reason_change[1]" id="reason_change[1]" >
<option value="">--Select--</option>
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[1]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[1]" value="">
</div>
<select name="reason_change[2]" id="reason_change[2]">
<option value="">--Select--</option>
<option value="0">--0000--</option>
<option value="1">--0001--</option>
<option value="2">--0002--</option>
</select>
<div class="field" id="new_acc[2]">
<label>Account</label>
<input type="text" name="account_cus[1]" id="account_cus[2]" value="">
</div>

how to disable required on cancel selcted

i have two select dropdown one for selected rooms and select cancel booking..
<div>Confirm:</div>
<div>
<select id="status" name="status" class="form-control" required>
<option value="1">room2</option>
<option value="2">rrom2</option>
</select>
</div>
<div>Status:</div>
<div>
<select id="status" name="status" class="form-control" >
<option value="1">Confirm booking</option>
<option value="2">Cancel booking</option>
</select>
</div>
now i want the cancel booking by selecting cancel and submit, but probelm is there first select is required, i want required only in confirm , how i can do this

Try this:
Add select-room and booking-status class in 2 selectbox so that detect it event. because you have same id status in 2 selectbox. please set unique id for each of the element in html.
$(".booking-status").change(function(){ // use change event for select box of booking
if($(this).val() == "2") {
$(".select-room").removeAttr("required");
} else {
$(".select-room").attr("required","required");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Confirm:</div>
<div>
<select id="status1" name="status" class="form-control select-room" required>
<option value="1">room2</option>
<option value="2">rrom2</option>
</select>
</div>
<div>Status:</div>
<div>
<select id="status2" name="status" class="form-control booking-status" >
<option value="1">Confirm booking</option>
<option value="2">Cancel booking</option>
</select>
</div>

Please be sure that id should be unique in an HTML page. You seemed to have used same id's for these two select boxes.
<div>Confirm:</div>
<div>
<select id="room" name="room" class="form-control" required>
<option value="1">room2</option>
<option value="2">rrom2</option>
</select>
</div>
<div>Status:</div>
<div>
<select id="status" name="status" class="form-control" >
<option value="1">Confirm booking</option>
<option value="2">Cancel booking</option>
</select>
</div>
Now use the jQuery code:
$(function(){
$("#status").on("change", function(){
if($(this).val() == 2) {
$("#room").attr("required", false);
} else {
$("#room").attr("required", true);
}
});
});
Refer to this JS Fiddle: https://jsfiddle.net/gx0s27s9/

Javascript - Toggle html5 required="" attribute based on form selection

I have a script that's almost complete but I can't figure out the last piece. The Javascript makes the check box appear or disappear based on the drop down selection (this is working great). But I'm trying to make the check box "Required" if the checkbox is present (the part I can't figure out).
I'm using the htm5 required="" attribute on the check box field, but the form still tries to validate it even with the 3rd option selected, which hides the check box altogether.
Is there a way to toggle on/off the required="" in coordination with the selection of the drop down, or any other suggestions?
<script>
function getTerms(select){
var selectedString = select.options[select.selectedIndex].value;
if(selectedString == "1" || selectedString == "2")
{
document.getElementById("terms_target").style.display = "block";
}else {
document.getElementById("terms_target").style.display = "none";
}
}
</script>
<form action="process_affiliate.php" method="post" onchange="getTerms(this)" >
<select name="InquiryType" required="">
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>

Here is a newer version using addEventListener
window.addEventListener("DOMContentLoaded", () => {
const sel = document.querySelector("[name=InquiryType]"),
terms = document.getElementById("terms_target"),
form = document.getElementById("myForm"),
agree = form.checked; // checked is a poor name for a field
toggleAgree = () => {
const show = ["1", "2"].includes(sel.value);
terms.hidden = !show;
agree.required = show;
};
sel.addEventListener("change", toggleAgree)
toggleAgree(); // initialise
})
<form action="process_affiliate.php" id="myForm" method="post">
<select name="InquiryType" required>
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" hidden>
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>
Older version
window.onload=function() {
var sel = document.getElementsByName("InquiryType")[0];
sel.onchange=function() {
var selectedString = this.value,
show = selectedString == "1" || selectedString == "2",
terms = document.getElementById("terms_target"),
checked=document.getElementsByName("checked")[0];
terms.style.display = show?"block":"none";
if (show) checked.setAttribute("required","required");
else checked.removeAttribute("required");
}
sel.onchange(); // initialise
}
<form action="process_affiliate.php" method="post">
<select name="InquiryType" required="">
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>

onclick using Button for select option

I would like to perform a search based on the chosen value from select dropdown list but I am not sure how to use javascript to perform that search. Below is my code.
<form name="countryOpt">
<select name="region" id="region" onchange="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="all">
<select name="country" id="country" style="display: none;">
<option value="http://www.google.com.my">Google</option>
</select>
<select name="country" id="state" style="display: none;">
<option value="http://www.yahoo.com">Yahoo</option>
</select>
<select name="country" id="city" style="display: none;">
<option value="http://www.facebook.com">Facebook</option>
</select>
</div>
<input type="button" name="go" value="Search" onclick="window.location=document.countryOpt.country.options[document.countryOpt.country.selectedIndex].value" />
</form>
<script type="text/javascript">
$(window).load(function(){
$("select").change(function () {
$("select option:selected").each(function () {
if($(this).val() == "1") {
$('#all select').css('display','none');
$('#country').css('display','block');
} else if($(this).val() == "2") {
$('#all select').css('display','none');
$('#state').css('display','block');
} else if($(this).val() == "3") {
$('#all select').css('display','none');
$('#city').css('display','block');
}
});
});
});
</script>

change your javascript code to this and try :
$(window).load(function()
{
$("#region").change(function ()
{
$('select[name=country]').css('display','none');
if($(this).val() == "1")
$('#country').css('display','block');
if($(this).val() == "2")
$('#state').css('display','block');
if($(this).val() == "3")
$('#city').css('display','block');
});
});
JSFiddle

Maybe you are looking for something like this?
<form name="countryOpt">
<select name="region" id="region">
<option value="http://www.google.com.my">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
<input type="button" name="go" id="go" value="Search"/>
</form>
<script>
$(document).ready(function(){
//Triggered by clicking the selectbox
$("#region").change(function () {
//window.location.href=$('#region').val();
alert($('#region').val());
});
//Triggered by clicking the button
$("#go").click(function () {
//window.location.href=$('#region').val();
alert($('#region').val());
});
});
</script>
jsbin