Develop Reference

Remove disabled Input field

I've bought a Wordpress theme, but it collides with one of my essential plugins.
This is the page: https://inspirebyloui.dk/checkout/ (you need to add a product to the basked to see the issue. Then see the button below "GLS Pakkeshop" and "DAO Pakkeshop".)
I've figured out that I need to remove the disabled parameter in the input field.
<input disabled type="button" onclick="getShopList('gls', jQuery('#Pakkelabels_zipcode_field').val());" id="pakkelabels_find_shop_btn" name="pakkelabel_find_shop" class="button alt" value="Find nærmeste udleveringssted">
I've managed to remove it with JS, with the following code
document.getElementById("pakkelabels_find_shop_btn").disabled = false;
However, it seems like this input field is loaded via Ajax, which is why the above JS code works fine in the console, but when I activate the input field again, it's disabled again.
Anyone knows how to deal with this?
BR
Martin

Hej Martin,
You could use jQuery and do something like this:
jQuery("#Pakkelabels_zipcode_field").on("input",function(){
document.getElementById("pakkelabels_find_shop_btn").disabled = false;
});
This would activate the button after the user has input a postal code.
Hope that helps.
God dag!

HTML input "disabled" attribute not working in Bootstrap modals

I have a webpage with an "edit" form that appears in a modal dialog using Bootstrap.
When the form appears, I would like one of the input fields to be disabled at first, and to be enabled if the user clicks a checkbox.
The problem is, my browser (Chrome) is not reflecting the disabled attribute for any form element within the modal dialog. Any form element outside the modal works fine.
This also works fine on another webpage I have with the exact same logic. It is only misbehaving on this page.
I have run the entire page source through the W3 Validator for HTML5 and get no errors back.
Code for the input element:
<form role="form" id="frmEdit" action="group_edit.php" method="post">
<!-- ... -->
<input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled />
<!-- ... -->
</form>
I even tried to brute force disable it with jQuery on document ready; this does not work:
$(document).ready(function() {
$("#txtEditAlternate").attr("disabled", true);
// ...
});
The only thing that does work when it comes to disabling the text field is when the checkbox is checked and then unchecked:
$("#chkbox").click(function() {
$("#txtEditAlternate").attr("disabled", !$(this).prop("checked"));
});
Although that kind of defeats the purpose, since the text field is supposed to be disabled until the checkbox is checked.
I have read that simply including disabled with no value is valid HTML5 (the validator did not even warn about this), and it works elsewhere.
I have tried everything I can think of, and can only speculate that it has something to do with the Bootstrap modal functionality. But like I said, the same logic works perfectly on another webpage I have.
And yes, I know Chrome likes to cache things. I have "hard-refreshed" many times, does not change anything.
Any suggestions?

try to use disabled="disabled":
<input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled="disabled" />

Use readonly attribute instead of disabled.

use prop instead of attr
$("#txtEditAlternate").prop("disabled", true);

Pulling a radio button's value to display from a PHP file

This is my first time posting so I apologize if I've missed something or if I get something wrong. I've also looked at other posts and although some are very similar, I don't think it's quite getting to the answer I'm seeking. I am also very new to AJAX (although this code doesn't really utilize a lot of AJAX I think) so any helpful insight into this problem would be greatly appreciated.
I'm trying to create a quiz template that calls on the data from a PHP file using AJAX after selecting a radio button and clicking the "Answer" button.
The general idea is that after the user reads the question, they select a radio button and clicks on the "Answer" button, the bottom part of the page gets populated with either the correct or incorrect string. It's easy to populate it with text and css, but my issue lies in pulling the right text.
Here is the HTML code block that sets up the form submission:
<form action="data.php" method="post" id="q1">
<input type="radio" name="answer1" value="1a" id="1q"> A.
<br>
<input type="radio" name="answer1" value="1b" id="1q"> B.
<br>
<input type="radio" name="answer1" value="1c" id="1q"> C.
<br>
<input type="radio" name="answer1" value="1d" id="1q"> D.
<br>
<input name="submit1" id="answer" type="button" title="abutton" value="ANSWER">
</form>
Here I've set up four radio buttons that each correspond to a letter and the form is linked to data.php, the file I'm pulling the correct/incorrect text from in this case.
I had an earlier version of the code that would follow the logic I had set out to do but would populate the correct text in another page. My goal is populate the a grey "Answer" box in the same page that appears after clicking the "Answer" button with text. The appended text is defined as a variable in the code as $correct or $incorrect, based on the user's selection.
The JS code block that calls the PHP file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#answer").click(function()
{
var test1 = $.post("data.php",
{answer1:'1d'},
function(data)
{
$("#text1").empty();
$("#text1").append(data);
$("#panel").fadeDown("slow");
});
});
});
</script>
I had help constructing this JS code but I understand enough of it. The goal here is that the "Answer" button, after being clicked, appends the text below the form element. This shows up as a small, grey "Answer" box from where users can read whether they got the right answer or not.
This particular line of code is what's bugging me:
{answer1:'1d'},
1d contains the right answer and when you pick any radio button and press "Answer", it still shows the correct text.
But when I try to do something like this:
{answer1:'1d',answer1:'1a',answer1:'1b',answer1'1c'},
The incorrect text, which is supposed to populate after choosing the radio buttons 1a, 1b, or 1c, overrides the text that's supposed to populate, even if the radio button 1d is chosen.
The PHP code that the JS code is calling from:
<?php
$correct = "Correct";
$incorrect = "Incorrect";
if (isset($_POST['answer1']))
{
if ($_POST['answer1'] === '1d')
{
print $correct1;
}
elseif ($_POST['answer1'] === '1b')
{
print $incorrect1;
}
elseif ($_POST['answer1'] ==='1c')
{
print $incorrect1;
}
elseif ($_POST['answer1'] === '1a')
{
print $incorrect1;
}
};
?>
Again, any insight on this problem would be greatly appreciated! Let me know if I need to clarify anything. Thanks!

First, id should always be unique. So remove or change the id of your inputs radio.
Then, you need to change your ajax request to send the selected input radio like this :
$(document).ready(function() {
$("#answer").click(function() {
var answer = $("input[name=answer1]:checked").val();
$.post("data.php", {answer1: answer}, function(data){
$("#text1").empty();
$("#text1").append(data);
$("#panel").fadeIn("slow");
});
});
});
Because in your code you never send the selected radio to your php page. And if you only send "1d" in this line {answer1:'1d'} your php page will always return the "correct" text even if you check another radio button.
I don't know the jQuery fadeDown() method. Only fadeIn() or fadeOut().
Also, in your data.php $correct1 and $incorrect1 are undefined. So echo $correct or $incorrect.

Spring forms tag checkbox (form:checkbox) hidden field not sent to server?

I have a form that uses JQuery 2.1.3 and Spring MVC 4.1.3. On the form is a checkbox, which causes Spring to create a hidden field and add that to my form. This is normal, expected Spring behavior, however, it doesn't appear that the hidden element is getting passed back to the server. Inspecting the POST in Chrome's developer tools, I can see the checkbox value going back if it's checked, and nothing going back if it's unchecked. Either way I don't see the value of the hidden field.
I am submitting the form using a JQuery onclick() handler and wondered if this might be thwarting the expected behavior somehow, because other than that I can't see any problem. Here's the code:
JSP source:
<form:input id="mycheckboxinput" path="mycheckbox" />
Generated HTML:
<input id="mycheckboxinput" name="mycheckbox" type="checkbox" value="true" checked="checked"/>
<input type="hidden" name="_mycheckbox" value="on"/>
JQuery Submit code:
$("#myButton").on("click", function (event) {
event.preventDefault();
$("#myForm").attr("action", "alternateaction.do");
$("#myForm").submit();
});
Any ideas?

The answer turned out to be completely unrelated to the checkbox itself. We were disabling all the controls on the form and then turning the checkbox back on. Because "all the other controls" included the hidden fields, they were disabled as well, and were not sent to the controller with the POST. This was breaking the Spring functionality since it needed those fields to work. So, be careful of that when you're turning fields off and on using Javascript outside of the normal form workflow.

Opt-in / Opt-out Checkbox

I am trying to create a simple way to force a single checkbox to display "No" in a form submission if left unchecked, or clicked off. I've tried a number of ways and this is the closest I can get, but it still isn't working properly.
Any help is much appreciated.
Matt
$(function opt() {
if ($("#optIn").is(":checked")) {
$("#optIn").value="Yes"
$("#optIn").click(function() { this.value="No" })
} else {
$("#optIn").value="No"
$("#optIn").click(function() { this.value="Yes" })
}
return false
});
opt();

An unchecked checked box is not a successful control and is therefore not POSTed with the rest of the form data.
The easiest solution for this is to create a hidden input with the same name as your checkbox that will contain the "unchecked" value:
<input type="hidden" name="myCheckbox" value="No" />
<input type="checkbox" name="myCheckbox" value="Yes" />
This will cause the form to POST myCheckbox=No if the checkbox is left unchecked.

So to start out quite frankly, I'm not sure where you saw that sort of function setup before. You're code, as-is, could be reduced to this:
$(function() { // on DOM ready (when the DOM is finished loading)
$('#optIn').click(function() { // when the checkbox is clicked
var checked = $('#optIn').is(':checked'); // check the state
$('#optIn').val(checked ? "Yes" : "No"); // set the value
});
$('#optIn').triggerHandler("click"); // initialize the value
});
The value of the checkbox, however, is never displayed on the screen. You may need to update a separate field with the values "Yes" or "No", such as:
<input type="checkbox" id="optIn" />
<span id="optInLabel"/>No</span>
And the script:
$(function() { // on DOM ready (when the DOM is finished loading)
$('#optIn').click(function() {
optIn(this);
});
optIn($('#optIn')[0]);
});
function optIn(el) {
var checked = $(el).is(':checked'); // check the state
$('#optInLabel').html(checked ? "Yes" : "No"); // set the value
}
EDIT: Working jsFiddle
If you need to check whether the box is checked on the server-side post-form-submission, then you could also update a hidden input field with the value "Yes" or "No" and ignore the submitted checkbox element value (as jaredhoyt mentioned in his answer).

Use radio buttons:
<span>Opt in?</span>
<br>
<input type="radio" name="optIn" value="no" checked>No
<input type="radio" name="optIn" value="yes">Yes
No javascript required, works in every browser, no shims, no libraries, nothing.