We Keep Coding

Multiple Values in Valvalue?

I am new in jquery and I got a very few knowledge I created an input field in which jquery grab a dropdown selected values if I put only one value in setting value field its working fine as I want to grab all var value in a single //Setting Value and also want only first two letters of the selected value: like if I choose dropdown value as Morning Class I want only "MO" and same for the rest variables as Section XI Class I am looking for only XI my code is given below:
Html Code
<form id="form1" method="post" enctype="multipart/form-data">
<div class="col-md-3">
<div class="form-group">
<select id="section_id" name="section_id" class="form-control" >
<option value="XI Class">XI Class</option>
<option value="XII Class">XII Class</option>
</select>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<input id="input" name="input" placeholder=""
type="text" class="form-control " value="" /></div></div>
</div>
</form>
jquery Code
$("#class_id,section_id").on("change",function(){
//Getting Value
var selValue = $("#class_id :selected").text();
var selValue1 = $("#section_id :selected").text();
//Setting Value
$("#input").val(selValue,selValue1);
});

How to link to a page when dropdown and checkboxes are marked

I have some HTML code that has a few drop down menus and some check boxes and I was wondering how I would go about writing Javascript that would link to a page that specifies their selection. the code is:
<div class="dropdown">
<font color="black">
<div>
<select name="Days">
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
<option value="Friday & Saturday">Friday & Saturday</option>
<option value="Saturday & Sunday">Saturday & Sunday</option>
<option value="Friday, Saturday, & Sunday">Friday, Saturday, & Sunday</option>
</select>
</form>
</div>
</div>
<p></p>
<div2>Number of Tickets:</div2>
<div class="dropdown">
<select name="ticketNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<h4>Total: </h4>
<form action="http://paypal.com">
<input type="submit" value="Submit" />
</form>
</div>
<div class="main">
<h3>Choose Passes</h3>
<form action="">
<input type="checkbox" name="gender" value="male"> VIP<br>
<input type="checkbox" name="gender" value="female"> Meet & Greet<br>
<input type="checkbox" name="gender" value="other"> Shuttle
</form>
</div>
For example: if a user were to select the saturday option, for 2 tickets, with VIP, i'm not sure how i would do either if statements or case statements to link to another page. Hopefully I've been clear enough, Thanks!

This depends on the meaning of 'link to' – whether you're trying to "auto-navigate" the user as soon as they've selected the options, or change where the form submits to once it's submitted, that is.
Either way, the beginning concept is the same: you'll need to listen to change events on the inputs, extract the input's value, followed by some kind of logic that maps input values to desired URLs and does with the URL whatever your desired outcome is.
For instance, if each ticketNumber maps to some kind of "ticket ID" in, say, a URL query string, you could dynamically change where the form will submit to by changing its action property like so:
function getUrl(id) {
return 'https://super-tickets.com/order?id=' + id;
}
var form = document.querySelector('form');
document.querySelector('select[name=ticketNumber]').onchange = function changeEventHandler(event) {
form.action = getUrl(event.target.value);
}

How to select options from two different dropdowns of same css class name using javascript or jquery

I want to update values of two dropdowns as shown in attached image, have a look on html code for the same(using same css proprty for both select)
<div class="container-fluid" role="main" style="margin-top: 100px;">
<form id="allPhotoForm">
<fieldset>
<legend>
Total Pending photos : ${count} <input type="button"
id="allPhotoFormBtn" class="btn btn-primary btn-xs pull-right"
value="Update All">
</legend>
</fieldset>
<div class="checkbox">
<label> <input type="checkbox" class="checkbox1"
id="selecctall"> Select All
</label>
</div>
<select class="form-control" name="status" id="${imageId}">
<option value="APPROVED">Approved</option>
<option value="REJECTED">Rejected</option>
<option value="PENDING">Pending</option>
</select>
Reason : <span style="float: right;">
<select class="form-control" name="status">
<option value="Animal" id="animal">Animal</option>
<option value="Bad" id="bad">Bad</option>
<option value="Baby" id="baby">Baby</option>
<option value="Celebrity" id="celebrity">Celebrity</option>
<option value="Flower" id="flower">Flower</option>
<option value="God" id="god">God</option>
<option value="Good" id="good">Good</option>
<option value="Others" id="others">Others</option>
</select>
</span>
and
<div class="checkbox"><label> <input type="checkbox" class="checkbox1 status" value="id=${id}&objectId=${imageId}&status=&reason=">Check me out
</label>
</div>
AJAX code for the same is as follows which binds all input data and pushes to API
$('#allPhotoFormBtn').on(
"click",
function(event) {
event.preventDefault();
var allCheckBox = document.querySelectorAll('.status');
var data = [];
$(allCheckBox).each(
function(index) {
if ($(this).is(':checked')) {
var status = $(
$(this).parent().parent().prev())
.val();
data.push($(this).val().replace("status=",
"status=" + status));
}
});
$.ajax({
url : "/curation/updateAll",
data : {
'data' : data.join(',')
},
type : "POST",
success : function(response) {
if (response)
location.reload();
},
error : function(rs) {
console.log(rs);
}
})
});
I am able to fetch one drop down value successfully, but unable to fetch another one, below statement gives only one dropdown value but not both.
var status = $($(this).parent().parent().prev()).val();

You are searching all dropdowns in the DOM by the css class ".status" but, in your code, dropdowns have not css class but both a "name" attribute set to status. So either you change your dropdowns adding class="status" or you have to change the way you search for them in js.
By the way in html 4 having more elements with same name attribute is legit but not reccomended, in html 5 now is consider error.
In your case you can modify your html like this:
<select class="form-control" class="status" id="${imageId}">
<option value="APPROVED">Approved</option>
<option value="REJECTED">Rejected</option>
<option value="PENDING">Pending</option>
</select>
Reason : <span style="float: right;">
<select class="form-control" class="status">
<option value="Animal" id="animal">Animal</option>
<option value="Bad" id="bad">Bad</option>
<option value="Baby" id="baby">Baby</option>
<option value="Celebrity" id="celebrity">Celebrity</option>
<option value="Flower" id="flower">Flower</option>
<option value="God" id="god">God</option>
<option value="Good" id="good">Good</option>
<option value="Others" id="others">Others</option>
</select>
without changing your js.

Reset/uncheck/unselect Users choice on Questionair/Survey

I recently working on a survey and I am fairly new and simply use jQuery to show and hide based on my survey logic. Now I am facing an issue that I need a way to reset the block(content) back to its original status (unchecked, unselected..etc). What i am currently doing is manually go into the child element and uncheck/unselect/empty all the user answers. But I dont really like my approach since I have to HARD CODE all div-id in advance. I am looking(or write a function) for a jQuery function to implement dynamically reset instead of the hard code way.
Can any one provide me a direction to go? You can try my code (and JS) here on Fiddle.
jQuery:
$("#q2Back_btn").click(function(){
//put Q2 logic here..
$('#select_2a').prop('selectedIndex',0);
$('#div_2b').find("input[type='checkbox'],input[type='radio']").prop('checked',false);
$("#secdiv").hide(500);
$("#firstdiv").show(500);
});
HTML:
<div id="firstdiv">
<div name = "div_1a">
1a. Q1a ( choose 1 and go to Q2)
<select id="select_1a" name="select_1a" >
<option checked ></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<br>
<div name= "div_1b">
<p>1b. Q1b?</p>
<input type="radio" name="1bradiogroup" value="1"> 1 <br>
<input type="radio" name="1bradiogroup" value="2"> 2 <br>
<input type="radio" name="1bradiogroup" value="3"> 3 <br>
</div>
<input type='button' id = "q1Next_btn" value='Save and Continue' />
</div>
<div id="secdiv" style="display:none">
<h1>2. Q2a</h1>
<br>
<div id="div_2a" name = "div_2a">
2a. just hit back btn to go back to Q1
<select id="select_2a" name="select_2a">
<option ></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div id="div_2b" name= "div_2b">
<p>2b. Q2b?</p>
<input type="radio" name="2bradiogroup" value="1"> No <br>
<input type="radio" name="2bradiogroup" value="2"> Yes <br>
</div>
<input type='button' id="q2Back_btn" value='Back' />
<input type='button' id="q2Next_btn" value='Save and Continue'/>
</div>

You can use jQuery's function trigger! in your form:
$('#form').trigger('reset');
Also check this: Resetting a multi-stage form with jQuery!

selecting specific element within one parent

This is my HTML form structure:
EDIT: Each section is generated by PHP script, and the section id will change depending on user input. I am not able to use the whole selector because of this
<section id="JaneDoe">
<div class="gcolumn1">Jane Doe</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
<section id="JohnSmith">
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
I'd like for the dropdown Meal[] to be enabled only after the chk_food[] is selected as yes. However, I am having some trouble figuring out how to tell jQuery to enable only the dropdown box within the same section.
I currently have this as the jQuery: (I added the alert boxes to see which part of the code is not working)
var update_meal = function () {
alert ("Hi");
var sec_id = $(this).closest("section").attr("id");
alert (text(sec_id));
if ($(sec_id + "> #chk_food[]").is(":checked")) {
$(sec_id + "> #Meal[]").prop('disabled', false);
} else {
$(sec_id + "> #Meal[]").prop('disabled', 'disabled');
}
};
$(update_meal);
$("#chk_food[]").change(update_meal);
When I tried to run this on JSFiddle, no bugs show up, but the coding doesn't work at all.
I see the alert box popping up with "Hi" as soon as the document loads
Thank you for your help

You can't have multiple elements on the same page with the same ID. It is invalid HTML and it will confuse your code terribly. To get this to work, you first need to use classes to find things:
<section>
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food yes" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food no" value="N">No
</div>
<div class="gcolumn3">
<select name="Meal[]" class="meal" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
Then you can start to target things correctly. Something like this:
$(".chk_food").on("change", function() {
$(this)
.closest("SECTION")
.find("SELECT.meal")
.prop("disabled", $(this).is(".no"));
});
In this case, we bind the change handler on both the Yes and No food radios. The handler will be called for the one the user clicks on, so they are inherently turning that one "on". So we find the parent section, and then the meal select within it, and set its disabled property to true if this is the .yes radio and false if this is the .no radio.
I think that should do it.