We Keep Coding

How can I display selected values together using jQuery?

I have some dropdown fields which trigger a popup that allows the user to enter a value. I want this value to appear in the button here:
<button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">Value should appear here</button>
I'm able to get the most recently selected value to appear in the <button>, but I can't get all three values to appear together. Here is the full source code:
$("#comparator_indicator").on('change', function() {
var comparator_value = $(this).val();
$("#moving_average_output").text(comparator_value);
});
$("#right_side_indicator_select-me").on('change', function() {
//alert($(this).val());
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
simplemovingaverage = $("#simple_moving_average").val();
$("#moving_average_output").text(simplemovingaverage);
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
$("#moving_average_output").text(exponentialstring+','+exponentialnumber);
});
/* ----------------------right side -------------------------------------------*/
$("#left_indicator_side_select-me").on('change', function() {
//alert($(this).val());
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
simplemovingaverage = $("#simple_moving_average").val();
$("#moving_average_output").text(simplemovingaverage);
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
$("#moving_average_output").text(exponentialstring+','+exponentialnumber);
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row block-9">
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Right Side Indicator:</label>
<select class="form-control" id="right_side_indicator_select-me" name="right_side_indicator_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Comparator:</label>
<select class="form-control" id="comparator_indicator" name="comparator_indicator">
<option>Select</option>
<option value="=">=</option>
<option value=">">></option>
<option value="<"><</option>
</select>
</div>
</div>
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Left Side Indicator:</label>
<select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="sel1">Selected values</label>
<button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">value will display here</button>
</div>
<div class="form-group">
<div id="myModal_first" class="modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-content">
<div class="modal-body">
<input type="text" name="simple_moving_average" id="simple_moving_average" class="form-control" placeholder="TEXT">
</div>
<button type="button" id="movingaveragebutton" name="movingaveragebutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<div id="myModal_second" class="modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-content">
<div class="modal-body">
<div class="row block-9">
<div class="col-md-6 pr-md-6">
<div class="form-group">
<select class="form-control" id="exponentialstring" name="exponentialstring">
<option>SELECT THE OPTIONS</option>
<option value="open">OPEN</option>
<option value="close">CLOSE</option>
<option value="low">LOW</option>
<option value="high">HIGH</option>
</select>
</div>
</div>
<div class="col-md-6 pr-md-6">
<div class="form-group">
<select class="form-control" id="exponentialnumber" name="exponentialnumber">
<option>SELECT THE OPTIONS</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" id="exponentialbutton" name="exponentialbutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
If you run the example, you'll see that only the most recently entered value is displayed in the <button>.

OK I think I have this refactored correctly, I changed the order of your indicators because they seemed backwards:
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Left Side Indicator:</label>
<select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Comparator:</label>
<select class="form-control" id="comparator_indicator" name="comparator_indicator">
<option>Select</option>
<option value="=">=</option>
<option value=">">></option>
<option value="<"><</option>
</select>
</div>
</div>
<div class="row block-9">
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Right Side Indicator:</label>
<select class="form-control" id="right_side_indicator_select-me" name="right_side_indicator_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="sel1">Selected values</label>
<button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">Value goes here</button>
</div>
And here is the refactored JS (note that I removed the last two event handlers from your example, as they were not needed):
const output = {
left: '',
compare: '',
right: '',
toString: function() {
return `${this.left} ${this.compare} ${this.right}`;
},
};
let sideIndicator = '';
$("#left_indicator_side_select-me").on('change', function() {
sideIndicator = 'left';
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#comparator_indicator").on('change', function() {
output.compare = $(this).val();
$("#moving_average_output").text(output.toString());
});
$("#right_side_indicator_select-me").on('change', function() {
sideIndicator = 'right';
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
output[sideIndicator] = $("#simple_moving_average").val();
$("#moving_average_output").text(output.toString());
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
$("#moving_average_output").text(output.toString());
});
Here's a JSFiddle where you can work with it and see if this solution meets your needs.
Brief Explanation
I created an object, output which will hold the text of the #moving_average_output <button> element. The properties will hold the text from the elements of the same name on the page:
const output = {
left: '',
compare: '',
right: '',
toString: function() {
return `${this.left} ${this.compare} ${this.right}`;
},
};
So, output.left will have the text content from this HTML element:
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Left Side Indicator:</label>
<select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
This works by creating a variable sideIndicator in the global scope and setting it to the side of the dropdown that was clicked in your 'change' event handlers. Here is the example for the #left_indicator_side_select-me event handler:
let sideIndicator = '';
$("#left_indicator_side_select-me").on('change', function() {
sideIndicator = 'left';
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
We can then use bracket notation to dynamically assign the value of the #simple_moving_average button and the #exponentialstring and #exponential number to the correct side in the output object:
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
output[sideIndicator] = $("#simple_moving_average").val();
$("#moving_average_output").text(output.toString());
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
$("#moving_average_output").text(output.toString());
});
The call to output.toString() will return the correctly formatted string as the button text.
Another Possible Solution
As an aside, you are doing some repetitive things in your version, which I didn't change in my refactor above. If I were approaching this project, I would do things a little differently in my JS. Here's another way of looking at things:
const movingAverageOutput = document.getElementById('moving_average_output');
const simpleMovingAverage = document.getElementById('simple_moving_average');
const output = {
left: '',
compare: '',
right: '',
toString: function() {
return `${this.left} ${this.compare} ${this.right}`;
},
};
const triggerModal = (val) => {
if (val == 1) return $("#myModal_first").modal('show');
if (val == 2) {
simpleMovingAverage.value = '';
$("#myModal_second").modal('show');
}
};
let sideIndicator = '';
const setSideIndicator = (id) => {
if (id === 'left_indicator_side_select-me') return sideIndicator = 'left';
if (id === 'right_side_indicator_select-me') return sideIndicator = 'right';
};
window.addEventListener('change', function(e) {
triggerModal(e.target.value);
setSideIndicator(e.target.id);
});
$("#comparator_indicator").on('change', function() {
output.compare = $(this).val();
movingAverageOutput.textContent = output.toString();
});
$("#movingaveragebutton").on('click', function(event) {
output[sideIndicator] = simpleMovingAverage.value;
movingAverageOutput.textContent = output.toString();
});
$("#exponentialbutton").on('click', function(event) {
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
movingAverageOutput.textContent = output.toString();
});
And here is a JSFiddle of that version if you want to mess around with it.

Create 2 functions like bellow
Function 1 :
$(document).ready(function(){
$('#my_form').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"add_data.php", //This is your page which inserts data in db
method:"POST",
data:form_data,
dataType:"JSON",
success:function(data)
{
if(data.error != '')
{
$('#error_message').html(data.error);
load_my_data(); //This is second function name
}
}
})
});
Now ! we are ready for second function here
load_my_data();
function load_my_data()
{
$.ajax({
url:"fetch_data.php",
method:"POST",
success:function(data)
{
$('#display_data').html(data);
}
})
}
});
Create all your php and html codes in fetch_data.php when data submited in modal it will auto display your data in
<div id="display_data"></div>
And This div will display errors
<div id="error_message"></div>
See this comment system as an example it works same way as you want : https://www.webslesson.info/2017/12/comments-system-using-php-and-ajax.html

Unable to make text box exist when checkbox checked

When i select value 6 then check box exists. When i checked the box then there should appear the text box but when i click on check box the text box is not existing. I tried jQuery and html code. Everything works perfect except existing the textbox.
$(document).ready(function() {
$('#education').on('change', function() {
if ($(this).val() == "6") {
$('#checkBox').show(); //text box exists
} else {
$('#checkBox').hide();
}
if ($('#checkBox').is(":checked")) {
$("#txtData").show();
} else {
$("#txtData").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 col-md-1">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-4"><br />
</label>
<div class="col-md-3">
<input type="checkbox" id="checkBox">
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-8"><br />
</label>
<div class="col-md-9">
<input type="text" class="form-control" id="txtData" style="display: none;">
</div>
</div>
</div>
</div>

If you want your textbox to appear when you change the value of the checkBox, then you need to put the event listener on the checkBox element.
I did this and it works fine.
$(document).ready(function() {
$('#checkBox').on('change', function() {
if ($(this).val() == "6") {
$('#checkBox').show(); //text box exists
} else {
$('#checkBox').hide();
}
if ($('#checkBox').is(":checked")) {
$("#txtData").show();
} else {
$("#txtData").hide();
}
});
});
Here is a codepen where this works : https://codepen.io/shyrro/pen/PagvMK

I tried it on my own. I got a solution. I written separate function to exist textbox.
<script>
$(document).ready(
function() {
$('#education').on(
'change',
function() {
if ($(this).val() == "6") {
$('#checkBox').show(); //check box exists
} else {
$('#checkBox').hide(); //check box exists
}
});
});
$('#checkBox').on(
'change',
function() {
if ($('#checkBox').is(":checked")) {
$("#txtData").show();
} else {
$("#txtData").hide();
}
});
</script>

Show / Hide Elements within the same parent div

I'm having trouble getting a div ('.option-other') within a parent group ('.other-row') to show/hide when the corresponding option of the select element ('.select-toggle') is selected. Right now if "other" is selected from either question set 1 or 2 it will show both of the '.option-other' divs. I tried using .parent() and .closest() as described in this solution, but can't seem to figure out the proper way to utilize it for this use case.
$(".select-toggle").change(function() {
var oth = false;
$(".select-toggle option:selected").each(function() {
if ($(this).val() == "other") oth = true;
});
if (oth) $('.option-other').show();
else $('.option-other').hide();
// tried this method as well but still doesnt work
// if (oth) $(this).closest('.other-row').children('.option-other').show();
// else $(this).closest('.other-row').children('.option-other').hide();
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Question set 1 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you eat?</label>
<select class="select-toggle" multiple>
<option>Pizza</option>
<option>Cake</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>
<!-- Question set 2 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you drink?</label>
<select class="select-toggle" multiple>
<option>Water</option>
<option>Soda</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>

// you wrote:
// tried this method as well but still doesnt work
// if (oth) $(this).closest('.other-row').children('.option-other').show();
// else $(this).closest('.other-row').children('.option-other').hide();
You're close, but $.children only selects direct children of each .other-row. Since .option-other is inside .col inside .other-row, $.children can't see it. Use $.find instead.
// your original code:
var oth = false;
$(".select-toggle option:selected").each(function() {
if ($(this).val() == "other") oth = true;
});
This sets one visibility value for the entire page: if at least one "other" option is selected, anywhere, show all the text inputs. The change event is fired for the <select> that actually changed, so focus your efforts there:
var oth = false;
$(this).children("option:selected").each(function() {
if ($(this).val() == "other") oth = true;
});
if (oth) $(this).closest('.other-row').find('.option-other').show();
else $(this).closest('.other-row').find('.option-other').hide();
This works, but it could be cleaner. Showing or hiding an element based on a boolean is a common enough requirement that jQuery has a function for it: $.toggle. You can replace the if/else lines with
$(this).closest('.other-row').find('.option-other').toggle(oth);
Your $.each loop does one thing: set oth if there exists at least one selected <option> with a value of "other". You can get the same logic as a one-liner by using an attribute selector:
var oth = ($(this).find('option:checked[value="other"]').length !== 0);
(I changed :selected to :checked because you're already filtering on option elements, and :selected has a performance penalty.)
The final version:
$(".select-toggle").change(function() {
var oth = ($(this).find('option:checked[value="other"]').length !== 0);
$(this).closest('.other-row').find('.option-other').toggle(oth);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Question set 1 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you eat?</label>
<select class="select-toggle" multiple>
<option>Pizza</option>
<option>Cake</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>
<!-- Question set 2 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you drink?</label>
<select class="select-toggle" multiple>
<option>Water</option>
<option>Soda</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like" />
</div>
</div>
</div>
Vanilla JS version:
document.querySelectorAll('.select-toggle').forEach(el => {
el.addEventListener('change', evt => {
const oth = evt.target.querySelector('option:checked[value="other"]');
evt.target
.closest('.other-row')
.querySelector('.option-other')
.style.display = (oth ? '' : 'none');
});
// trigger change event programmatically
const event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
el.dispatchEvent(event);
});

Here is a solution that is a little clunky but I did it relatively quick. It's kind of a work around for having to know which of your two selectors with the same class had been selected.
Here is a working example using your code.
$(".select-toggle").change(function () {
var oth = false;
$(".select-toggle option:selected").each(function () {
if ($(this).val() == "otherFood") {
oth = true;
$('.option-other-food').show();
} else {
$('.option-other-food').hide();
};
if ($(this).val() == "otherDrink") {
oth = true;
$('.option-other-drink').show();
} else {
$('.option-other-drink').hide();
};
});
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Question set 1 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you eat?</label>
<select class="select-toggle" multiple>
<option>Pizza</option>
<option>Cake</option>
<option value="otherFood">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other-food">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like"/>
</div>
</div>
</div>
<!-- Question set 2 -->
<div class="wrapper other-row">
<div class="col">
<div class="form-group">
<label>What stuff do you drink?</label>
<select class="select-toggle" multiple>
<option>Water</option>
<option>Soda</option>
<option value="otherDrink">Other</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group option-other-drink">
<label>Other</label>
<input type="text" placeholder="what other stuff do you like"/>
</div>
</div>
</div>
Cheers!

Uncaught TypeError: Cannot read property 'reset' of undefined

I am trying to reset a forms values to the initial ones:
This is the jquery being used and this is the line that is getting the error. Specifically the $("#gquestion")[0].reset();
function questionhide() {
$("#gquestion")[0].reset();
}
and it's called like this as I want this to happen on the hiding of the form:
$("#gquestion").hide(questionhide());
in this file:
$(document).ready(function() {
$("#passwordreset").hide(passwordhide());
$("#hardwareissue").hide(hardwarehide());
$("#softwareissue").hide(softwarehide());
$("#servicerequest").hide();
$("#question").hide(questionhide());
$("#problemtype").change(function() {
if ($("#problemtype").val() == "passwordreset") {
$("#question").hide(questionhide());
$("#hardwareissue").hide(hardwarehide());
$("#softwareissue").hide(softwarehide());
$("#servicerequest").hide();
$("#passwordreset").show();
} else if ($("#problemtype").val() == "hardware") {
$("#question").hide(questionhide());
$("#passwordreset").hide(passwordhide());
$("#softwareissue").hide(softwarehide());
$("#servicerequest").hide();
$("#hardwareissue").show();
} else if ($("#problemtype").val() == "software") {
$("#passwordreset").hide(passwordhide());
$("#question").hide(questionhide());
$("#hardwareissue").hide(hardwarehide());
$("#softwareissue").show();
} else if ($("#problemtype").val() == "servicerequest") {
$("#servicerequest").show();
} else if ($("#problemtype").val() == "question") {
$("#passwordreset").hide(passwordhide());
$("#hardwareissue").hide(hardwarehide());
$("#softwareissue").hide(softwarehide());
$("#question").show();
}
});
// Password jquery handling ---------------------------------
function passwordhide() {
$("#system option:eq(0)").attr('selected','selected');
$("#passwordreset")[0].reset();
$("#otherdiv").hide();
}
$("#system").change(function() {
if ($("#system").val() == "Other") {
$("#otherdiv").show();
}
else {
$("#otherdiv").hide(function () {
$("#pwother").val('');
});
}
});
// General Question handling ---------------------------------
function questionhide() {
$("#question")[0].trigger('reset');
}
and here is the entire html form that it refers to:
<form method="POST" action="/ticket" id="gquestion">
{{ csrf_field() }}
<input name="probtype" type="hidden" value="General Question">
<div class="form-group">
<label form="control-label">Please tell us your question:</label>
<textarea class="form-control" name="other" id="gqtext"></textarea>
<br>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
The form is included in this:
<h1 id='CaT'>Create a Ticket</h1>
<div class="container">
<form method="POST" action='/ticket' name="categoryselect">
{{ csrf_field() }}
<div class="form-group">
<label class="control-label">Please select what you are having a problem with:</label><br>
<div class="selectContainer">
<select class="form-control" name="problemtype" id="problemtype">
<option disabled selected value>--Select a Category--</option>
<option value="passwordreset">I want to reset my password</option>
<option value="hardware">I want to report a hardware issue</option>
<option value="software">I want to report a system/software issue</option>
<option value="sevicerequest">I want to submit a service request</option>
<option value="question">I have a general question</option>
</select>
</div>
</div>
</form>
#include('createTicket/question')
I have used the indexing on other forms as can be seen with the password reset in the same document, and it has worked. They have more elements in them but they do contain textarea and they have cleared properly and I haven't encountered errors. Doing
function questionhide() {
$("#gtext").val('');
}
works but I would like to know why it won't work with the reset line I have now when other forms do. The title is the error I get when I load it up.

Try one of the following:
$("#gquestion").hide(100, questionhide()); // You can change 100 to any other number. It represents the duration of the hide effect.
or:
$("#gquestion").hide({complete: questionhide()});
And Change: $("#gquestion")[0].reset(); to $("#gquestion").trigger('reset');
Didn't test it, but it should work.
You may also try:
function questionhide(){
document.forms.namedItem("gquestion").reset();
}
Looks to me like your function is being created before the document loads, making $('#gquestion') undefined.

Remove Attributes on Page Load and On Change

How does one remove attributes and "gray out" a textbox based on the value of a dropdown upon both page load and dropdown selection change? I've tried following advice here and here, but it only seems to be working on a dropdown change. No errors are showing in Visual Studio or in the Chrome console.
The View has a dropdown that loads with the User's saved selection, and the text box becomes unavailable only after a dropdown selection change and change back, when the original value of the dropdown value should also originally load the text box as unavailable. In other words, the text box should be unavailable at every point where the dropdown value == 1, but the following doesn't seem to do it:
<div class="col-md-12" style="clear: left;">
<label for="preferenceId" class="req">Preference</label>
<div class="col-xs-8 no-left">
#Html.DropDownListFor(m => m.PreferenceTypeID, StaticCache.GetPreferenceTypes(), new { #class = "form-control", data_parsley_required = "true" })
</div>
<div class="col-xs-4 no-right">
<div id="customAmount">
#Html.TextBoxFor(m => m.PreferenceCustomAmount, new { #class = "form-control" })
</div>
</div>
</div>
#section Scripts{
<script>
$(function () {
if ($("#PreferenceTypeID").val() != 1) {
$("#PreferenceCustomAmount").hide();
} else {
$("#PreferenceCustomAmount").show();
}
});
$("#PreferenceTypeID").change(function () {
if ($("#PreferenceTypeID").val() == 1) {
$("#PreferenceCustomAmount").attr("disabled", "disabled");
} else {
$("#PreferenceCustomAmount").removeAttr("disabled", "disabled");
}
});
</script>
}

In other words, the text box should be unavailable at every point where the dropdown value == 1
You'd be better of triggering .change() on load as well. Use .prop() to add/remove element properties. Take a look at the below code.
$(function() {
var $amountInput = $("#PreferenceCustomAmount");
$("#PreferenceTypeID").change(function () {
if ( this.value == 1 ) {
$amountInput.prop("disabled", true);
} else {
$amountInput.prop("disabled", false);
}
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" style="clear: left;">
<label for="preferenceId" class="req">Preference</label>
<div class="col-xs-8 no-left">
<select id="PreferenceTypeID">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col-xs-4 no-right">
<div id="customAmount">
<input type="text" id="PreferenceCustomAmount" />
</div>
</div>
</div>