I want to create a simple html form with different inputs element. The questions and the possible choices for each question are stored in a database. The idea is to render form and child input elements with PHP, so a simple PHP function will take care of typesetting according to whether is type="text" or type="radio":
<form>
First name: <input id="1" type="text" name="firstname">
Last name: <input id="2" type="text" name="lastname">
<input id="3" type="radio" name="sex" value="male">Male
<input id="4" type="radio" name="sex" value="female">Female
<div id="div_5_optional">
Maiden name: <input id="5" type="text" name="maidenname" disabled="disabled">
</div>
</form>
Now, by default input id="5" will be disabled. But I also want to remove it. I am able to get it with JavaScript by loading in my header (although I can't guarantee the move to be smart)
<script>
$(document).ready(function(){
$("[disabled=disabled]").parent().remove();
});
</script>
So far so good, the div element is removed. Yet, I want to put the element back and in the original position when the radio button corresponding to Female is clicked. I added in the header, just below the previous js script this
<script type='text/javascript' src='scripts/enable_elements.js'></script>
which loads this function
// enable_elements.js
$(document).ready(function(){
$('#4').click(function(){
$( '#5' ).prop( "disabled", false );
});
});
Yet the all thing doesn't work. I guess the problem could be the my ready(function)s are only loaded once at the beginning and then put to sleep? Should I structure my form differently?
You do not want to remove(), instead you want to hide().
$(document).ready(function(){
$("#5").hide();
});
Also you want to handle the click on #3:
$('#3').click(function(){
$( '#5' ).attr("disabled", "disabled").hide();
});
$('#4').click(function(){
$( '#5' ).attr("disabled", "").show();
});
Note: I kept the "disabled" attribute, but really you don't need it since it will be hidden when unselectable...
If you remove the #5, then it's lost and you cannot show it again. So clicking on Male, then Female, back on Male, and on Female again... would not work.
you need to create a eventhandlers for the female and male checkbox that call your function and displays or hides the field
Related
I am trying to make a selector available, only if a check box, or more than one are checked. The selector should go back to being disabled if the user unchecks all the checkboxes.
I was trying to implement my solution from this response (that it works perfect for one checkbox paired with any other selector) ; however, when I implement it like this:
$(document).ready(function(){
var enable_sel = function(){
$("#pizza_kind").prop("disabled", !$(":checkbox").prop("checked"));
};
enable_sel();
$(":checkbox").change(enable_sel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="p1" name="p1">
<input type="checkbox" id="p2" name="p2">
<input type="checkbox" id="p3" name="p3">
<select name="pizza_kind" id="pizza_kind">
<option>(choose one)</option>
<option>"Hawaian"</option>
<option>"Peperonni"</option>
<option>"Another"</option>
</select>
</form>
I got the selector disabled, but it seems that is only reacting to the first checkbox, not the rest of them.
I couldn't make this work in the javascript/html snippet, don't know why.
I am currently using Flask and jquery 3.6.0
What am I doing wrong?
When you read a prop from a collection it will only ever select the first one. It is not going to randomly pick the one you want, so you need to tell it exactly what to pick.
So select the checked checkboxes and check the length. To do this use :checked in the selector and it will pick the ones that are checked.
$(document).ready(function(){
var enable_sel = function(){
$("#pizza_kind").prop("disabled", !$(":checkbox:checked").length);
};
enable_sel();
$(":checkbox").change(enable_sel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="p1" name="p1">
<input type="checkbox" id="p2" name="p2">
<input type="checkbox" id="p3" name="p3">
<select name="pizza_kind" id="pizza_kind">
<option>(choose one)</option>
<option>"Hawaian"</option>
<option>"Peperonni"</option>
<option>"Another"</option>
</select>
</form>
Did lots of searching on here and found plenty of people with similar questions, but every 'solution' I have found fails to work in my case. I could be missing something simple, or it may have to do with our HTML. Basically, I want our text field to check it's corresponding radio button should someone enter a value there.
Here is a JSFiddle with what I want working, but when I put host it on a server for testing I don't get the same result.
JSFiddle
http://jsfiddle.net/p8kvQ/39/
HTML
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice1" value="47" checked="checked" />
<label for="UnitPrice1">$47</label>
</div>
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice2" value="Other" />
<label for="UnitPrice2">Other</label>
<input class="-input-width-auto" name="Other1" type="number" id="Other1" />
</div>
JS
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
I DO have "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defined in our HTML header and I've tried adding the code by defining its source file, but still no luck.
Any help would be great.
Your JS needs to be inside a document.ready. When the code is run, the dom element is not available, there for your click listener can not be attached it it.
$( document ).ready(function() {
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
});
(JSFiddle does this for you because you have the following setting: http://screencast.com/t/5WUC33diHpTb)
Let's assume, a database contains entries for cars in many models, colours and with 2, 4 and 5 doors.
The task: Create a search form which lets the user pick both model, colour and number of doors, using only radio buttons. Every time the user selects a radio button, the search result should be updated. No Submit-Button.
The HTML-Code:
<form id="searchform">
<div>
<input id="car_model1" type="radio" name="model" value="bmw"> BMW
<input id="car_model2" type="radio" name="model" value="peugeot"> Peugeot
<input id="car_model3" type="radio" name="model" value="fiat"> Fiat
</div>
<div>
<input id="car_colour1" type="radio" name="colour" value="white"> White
<input id="car_colour2" type="radio" name="colour" value="red"> Red
<input id="car_colour3" type="radio" name="colour" value="blue"> Blue
</div>
<div>
<input id="car_door1" type="radio" name="door" value="2"> Two
<input id="car_door2" type="radio" name="door" value="4"> Four
<input id="car_door3" type="radio" name="door" value="5"> Five
</div>
</form>
<div id="searchresult"></div>
Now, I thought, I could use the jQuery change() function to catch the users click and then send a request via post() to the database. But somehow I can't make it work. Here is my attempt:
The Javascript-Code
$("[id^=car]").change(function() {
var data = $("#searchform").serialize();
$.post("process_data.php", data, function(response) {
$("#searchresult").html(response);
});
});
Of course there is PHP-Code to process the request, but the problem is that the Javascript is not executed. The change-Event does not work. I also tried it with click() and keyup(). Same negative result.
I am quite new to jQuery and Ajax and right now I have no idea what is wrong. Maybe you can tell me where my error is.
Just try this,
$("input[id^=car]").change(function() {
I will not say that your selector is wrong. But using an element name before the attribute selector is a good practice.
Fiddle : DEMO
Another day and after a good sleep I tried it again and this time I found the source of the problem: I load the script in the <head> part of my HTML. Therefore I need to make sure, the document is fully loaded, using the ready() function, otherwise the change() function does not work:
$(document).ready(function() {
$("input[id^=car]").change(function() {
var data = $("#searchform").serialize();
$.post("process_data.php", data, function(response) {
$("#searchresult").html(response);
});
});
});
code: http://jsfiddle.net/HB8h9/7/
<div id="tab-2" class="tab-content">
<label for="tfq" title="Enter a true or false question">
Enter a Multiple Choice Question
</label> <br />
<textarea name="tfq" rows="3" cols="50"></textarea>
<p>Mark the correct answer</p>
<input type="radio" name="multians" value="A">A)</input>
<input name="Avalue" type="text">
<br>
<input type="radio" name="multians" value="B">B)</input>
<input name="Bvalue" type="text">
<br>
<input type="radio" name="multians" value="C">C)</input>
<input name="Cvalue" type="text">
<br>
<input type="radio" name="multians" value="D">D)</input>
<input name="Dvalue" type="text">
<br>
//different file below used as main page
$(document).ready(function() {
$("#second li ").click(function() {
$("#content").load("file_above.html .tabs");
});
});
trying to create a quiz using div elements from different file containing select option tags. Need to create a function which will load all the "appropriate div tags" according to the selected option and display the dropdown options again after each option has been selected. I'm not sure when to implement submit button either after each question type is loaded or somewhere between 5 - 10 questions. the submit button will "store" the questions selected into a quiz which will later be used for another user to answer.
I hope this makes sense, I'm not too familiar with jquery and any help would be highly appreciated.
Any other techniques which would be better suited are also welcomed.
thanks.
You must set an id to select element and hadle onChange event over this.
Somehting like:
$(document).ready(function(){
$('#selectionId').onChange(function(){
/*load new options into select element*/
$(this).append('option data-tab="tab-6">New option text</option>');
/*displaying desired div. Using HTML5 data attributes as in the fiddle*/
var selected=$(this).attr('data-tab');
if (selected==='tab-1'){
/*load or display tab-1 class div*/
}else...
});
});
You can have various html files with only the corresponding tab to load or in the same file you are defined the select element you can have the tab class divs with visibility attribute set to 'none' and show the targeted div after user selects an option.
Personally, I preferred the last one option.
I hope this fixes your problem
http://jsfiddle.net/r9sv8/
Use the .change() to listen to the options selected and display the div respect to it.
$('.tabs').change(function(){
$('.tabQues').hide('500'); // Hides all the divs
var changeVal = $(this).val(); //Takes the value of the <option>
if(changeVal=="selectOne"){
$('.'+changeVal).show('500'); //show the div you want
}else if(changeVal=="multiple"){
$('.'+changeVal).show('500');
}else if(changeVal=="trueFalse"){
$('.'+changeVal).show('500');
}else if(changeVal=="short"){
$('.'+changeVal).show('500');
}else if(changeVal=="program"){
$('.'+changeVal).show('500');
}else{
$('.tabQues').hide();
}
I have four radio buttons. If I select the last radio button then one textbox is appearing. I handled this scenario by jquery. Now I want to validate in such a way that if user gets this textbox means if user checked the last radio button, then he should provide some text.But in my case, if I check any one of the radio button, its telling to provide some text. The code is like:
<input type="radio" name="bus_plan" id="smallBtn" value="1" />1
<input type="radio" name="bus_plan" id="smallBtn" value="2" />2
<input type="radio" name="bus_plan" id="smallBtn" value="3" />3
<input type="radio" name="bus_plan" id="smallBtn" value="Promotional" />
<span class="plantxt"><a style="cursor:pointer;" onclick="popup('popUpDiv')">Promotional Plan</a> (Please enter a promotional code)</span>
<div class="reg-line" id="pr_code_id" style="display:none">
<div class="reg-linea" align="left">Promotional Code: <sup>*</sup></div>
<input type="text" name="bus_prcode" id="bus_prcode" class="reg-line-input" value="Promotional Code" onblur="if(this.value=='') this.value='Promotional Code'" onClick="if(this.value==this.defaultValue) this.value='';" />
<br />
<div>
<div id="promotionalbox" style="display:none;font-size:13px;clear:both"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:radio[name=bus_plan]").click(function(){
var values = $(this).val();
if(values == 'Promotional'){
$('#pr_code_id').show();
}else{
$('#pr_code_id').hide();
}
});
});
</script>
and in js if I alert the value of document.getElementById('bus_prcode').value then always it is showing Promotional code, which is only for last radio button value.
Your code is a bit of a mess which is the root of this problem. Remember, one element per ID.
You may also find it helpful to look at jQuery .is(), for example:
$('input[value="Promotional"]').is(':checked')
n.b. I do not suggest the above, you should use identifiers in the appropriate way first.
Also worth noting that your code works fine for me using Chrome. See an example (which I have expanded for you) here: http://jsbin.com/ofujal/3/
You should not have an element with the same ID (your radio buttons). Also, you're getting the textbox by running document.getElementById('bus_prcode') and not the radio button. You should give a unique ID to your last radio button, e.g. btnPromotional, then bind click to it:
$("#btnPromotional").click(...)