Basically, i want it so every time someone clicks on the button it will show one select box and then they click it again it will show the other one. So my question is how can I make it so on click it will show a select box one at a time?
Select box add function:
function addChooseSub() {
window["maxAppend"] = 3;
maxAppend = maxAppend + 1;
$("select.signUp[name=\"option" + maxAppend +"\"]").show();
console.log("sdasd"+maxAppend)
}
Click Function:
<script>
$('body').on('click', '.addSelect', function() {
addChooseSub()
});
</script>
Box HTML:
<div class="signup box">
Hello, <strong><?php echo $session->getSessionInfo("register", "firstName")." ".$session->getSessionInfo("register", "lastName"); ?></strong> and welcome to <strong>LetsChat</strong>, please choose up to <strong>5 courses</strong> you're currently taking.
<hr>
<form method="POST" action="#" class="chooseCourse">
<select class="signUp" name="option1">
<option value="empty" disabled selected hidden>Course Option 1</option>
<?php $core->pullCourses(); ?>
</select>
<select class="signUp" name="option2">
<option value="empty" disabled selected hidden>Course Option 2</option>
<?php $core->pullCourses(); ?>
</select>
<select class="signUp" name="option3">
<option value="empty" disabled selected hidden>Course Option 3</option>
<?php $core->pullCourses(); ?>
</select>
<select class="signUp" name="option4" style="display: none;">
<option value="empty" disabled selected hidden>Course Option 4</option>
<?php $core->pullCourses(); ?>
</select>
<select class="signUp" name="option5" style="display: none;">
<option value="empty" disabled selected hidden>Course Option 5</option>
<?php $core->pullCourses(); ?>
</select>
<div class="addSelect"> + </div>
<input type="submit" name="signupSubmit" onclick="choosingSubjects()" class="purple btn signup" value="Finish" style="margin-top: 0;">
</form>
</div>
What's happening is your window.maxAppend = 3; at the top of your function is resetting it every time your function is called.
There are a few ways to accomplish what you want, but the easiest will be to just move maxAppend outside of the function. This way, it will not get reset, and its value will be preserved from the last time it was called.
var maxAppend = 3;
function addChooseSub() {
maxAppend++;
if (maxAppend > 5) return;
$("select.signUp[name=\"option" + maxAppend +"\"]").show();
console.log("sdasd"+maxAppend)
}
You have a few more issues than I saw from the start.
You need to move the counter outside the function
There is no hidden attribute on an option.
Like this - assuming you want to initially have the last two SELECTS hidden and show next two SELECTs one by one
var maxAppend = 3;
$(function() {
$(".addSelect").on("click", function(e) {
maxAppend++;
if (maxAppend <= $("select.signUp").length) {
$("select.signUp[name=\"option" + maxAppend + "\"]").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="signup box">
<hr>
<form method="POST" action="#" class="chooseCourse">
<select class="signUp" name="option1">
<option value="empty" disabled selected>Course Option 1</option>
</select>
<br>
<select class="signUp" name="option2">
<option value="empty" disabled selected>Course Option 2</option>
</select>
<br>
<select class="signUp" name="option3">
<option value="empty" disabled selected>Course Option 3</option>
</select>
<br>
<select class="signUp" name="option4" style="display: none;">
<option value="empty" disabled selected>Course Option 4</option>
</select>
<br>
<select class="signUp" name="option5" style="display: none;">
<option value="empty" disabled selected>Course Option 5</option>
</select>
<br>
<div class="addSelect">+</div>
<input type="submit" name="signupSubmit" class="purple btn signup" value="Finish" style="margin-top: 0;" />
</form>
</div>
Related
In JavaScript, how would I get whatever option the user selects from the menu list? I'm trying to make it so that when the first option "default" is selected, it displays an error message.
How do i do this in Javascript without changing the HTML? Thanks in advance!
<div class="error"></div>
<form class="form">
<div class="form-control">
<label for="menu">Menu List</label>
<select name="menu" id="menu">
<option value="default">Choose an image...</option>
<option value="fries">Fries</option>
<option value="ice-cream">Ice cream</option>
<option value="cake">Cheesecake</option>
</select>
</div>
</form>
Get the value property of the <select> element.
document.querySelector("#submit").addEventListener("click", function() {
let choice = document.getElementById("menu").value;
if (choice == "default") {
alert("Please select an image");
} else {
console.log("Thank you for purchasing " + choice);
}
});
<div class="error"></div>
<form class="form">
<div class="form-control">
<label for="menu">Menu List</label>
<select name="menu" id="menu">
<option value="default">Choose an image...</option>
<option value="fries">Fries</option>
<option value="ice-cream">Ice cream</option>
<option value="cake">Cheesecake</option>
</select>
</div>
<br>
<button type="button" id="submit">Submit</button>
</form>
If select has a blank first value and the select is required, they cannot submit the form
const sel = document.getElementById("menu");
sel.options[0].value=""; // remove the value
sel.setAttribute("required","required");
<div class="error"></div>
<form class="form">
<div class="form-control">
<label for="menu">Menu List</label>
<select name="menu" id="menu">
<option value="default">Choose an image...</option>
<option value="fries">Fries</option>
<option value="ice-cream">Ice cream</option>
<option value="cake">Cheesecake</option>
</select>
</div>
<input type="submit">
</form>
Looking for help with this please, tried to run with many articles on here but can't seem to get what I'm after.
What you will see in the following snippet works for showing and hiding the different options depending on whether the first option is Yes or No.
However I want all fields to be required but I need a way of them only being required, if they are shown.
Believe there will be something I could add or alter with the JavaScript to remove the required attributes?
function yesnoCheck(that) {
if (that.value == "Yes") {
document.getElementById("ifYes").style.display = "block";
} else {
document.getElementById("ifYes").style.display = "none";
}
if (that.value == "No") {
document.getElementById("ifNo").style.display = "block";
document.getElementById("ifNo2").style.display = "block";
} else {
document.getElementById("ifNo").style.display = "none";
document.getElementById("ifNo2").style.display = "none";
}
}
<form name="emailsend" class="form-check" method="post" action="send.php">
<label>Decision maker selection</label>
<br>
<select name='resolved' onchange="yesnoCheck(this);">
<option value='' selected disabled hidden></option>
<option value='No' > No </option>
<option value='Yes' > Yes </option>
</select>
<br>
<div id="ifYes" style="display: none;">
<br>
<label>Showifresolvedisyes</label>
<br>
<select name='ref2' required>
<option value='Test' > Test </option>
</select>
</div>
<div id="ifNo" style="display: none;">
<label>Showifresolvedisno</label>
<br>
<select name='colour' >
<option value='' selected disabled hidden></option>
<option value='red' class="redoption" > Red </option>
<option value='orange' class="amberoption" > Amber </option>
<option value='green' class="greenoption" > Green </option>
</select>
</div>
<br>
<div id="ifNo2" style="display: none;">
<label>Showifresolvedisno</label>
<br>
<select name='ref3' required>
<option value='Test'>Test</option>
</select>
<br>
<br>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-primary" name="btn-login">
Take me to the Preview!
</button>
</div>
</form>
Any help would be massively appreciated!
First you don't need to add selected and disabled attributes to your empty default options. When you select an empty option by default, that overrides the required attribute of the select tag because it is already selected with an empty value.
second I would choose class name instead of id for ifYes and ifNo containers.
this way it would be easier to add more Select tags and options without need to add more ids and styling them separately and you can control them simultaneously like this:
const ifYes = document.querySelectorAll(".ifYes");
const ifNo = document.querySelectorAll(".ifNo");
const theForm = document.forms["emailsend"];
theForm.resolved.onchange = () => {
const yes = theForm.resolved.value === "Yes";
ifYes.forEach((div) => {
div.classList.toggle("noDisplay", !yes);
div.querySelector("select").required = yes;
});
ifNo.forEach((div) => {
div.classList.toggle("noDisplay", yes);
div.querySelector("select").required = !yes;
});
};
.noDisplay {
display: none;
}
<form name="emailsend" class="form-check" method="post" action="send.php">
<label>Decision maker selection</label><br />
<select name="resolved" required>
<option value="" hidden></option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<br />
<div class="noDisplay ifYes">
<label>Show if resolved is yes</label><br />
<select name="ref2" required>
<option value="" hidden></option>
<option value="Test">Option 1</option>
<option value="Test">Option 2</option>
</select>
</div>
<div class="noDisplay ifNo">
<label>Show if resolved is no</label><br />
<select name="colour" required>
<option value="" hidden></option>
<option value="red">Red</option>
<option value="orange">Amber</option>
</select>
</div>
<br />
<div class="noDisplay ifNo">
<label>Show if resolved is no</label><br />
<select name="ref3" required>
<option value="" hidden></option>
<option value="Test">option 1</option>
<option value="Test">option 2</option>
</select>
<br />
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-primary" name="btn-login">
Take me to the Preview!
</button>
</div>
</form>
I will do that this way:
It is necessary to dispose of a css noDisplay class, instead of your style="display: none;" in the HTML
const div_ifYes = document.getElementById('ifYes')
, div_ifNo1 = document.getElementById('ifNo')
, div_ifNo2 = document.getElementById('ifNo2')
, theForm = document.forms['emailsend']
, AllRequired = theForm.querySelectorAll('[required]')
;
function setRequired()
{
AllRequired.forEach(el=>
{
el.required = !el.closest('div').classList.contains('noDisplay');
})
}
setRequired() // on start
;
theForm.resolved.onchange = () =>
{
div_ifYes.classList.toggle('noDisplay', !(theForm.resolved.value === 'Yes'))
div_ifNo1.classList.toggle('noDisplay', !(theForm.resolved.value === 'No'))
div_ifNo2.classList.toggle('noDisplay', !(theForm.resolved.value === 'No'))
setRequired()
}
theForm.onsubmit = e => // just for letting the testing here
{
e.preventDefault() // disable submit
}
.noDisplay {
display: none;
}
<form name="emailsend" class="form-check" method="post" action="send.php">
<label>Decision maker selection</label>
<br>
<select name='resolved'>
<option value='' selected disabled hidden></option>
<option value='No' > No </option>
<option value='Yes' > Yes </option>
</select>
<br>
<div id="ifYes" class="noDisplay">
<br>
<label>Showifresolvedisyes</label>
<br>
<select name='ref2' required>
<option value='Test' > Test </option>
</select>
</div>
<div id="ifNo" class="noDisplay">
<label>Showifresolvedisno</label>
<br>
<select name='colour' >
<option value='' selected disabled hidden></option>
<option value='red' class="redoption" > Red </option>
<option value='orange' class="amberoption" > Amber </option>
<option value='green' class="greenoption" > Green </option>
</select>
</div>
<br>
<div id="ifNo2" class="noDisplay">
<label>Showifresolvedisno</label>
<br>
<select name='ref3' required>
<option value='Test' > Test </option>
</select>
<br>
<br>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block btn-primary" name="btn-login">
Take me to the Preview!
</button>
</div>
</form>
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/
I have a form with a multi-level select list, the select list displays options based on what was previously selected (using jQuery). You can find the fiddle attached in my post or here. My form action is as follows:
<form action="catalog.php?category=submit" method="GET" id="selectorForm">
The returned URL when the submit button is clicked is as follows:
.../catalog.php?series=5series&3generation=&5generation=e39&e46model=&e39model=525i&e60model=
However, I only want the last option selected in the multi-level select list to be passed in the URL. E.g: ../catalog.php?category=525i.
How can I do this?
Alternatively if I get the URL as it currently is to my catalog.php, how can I determine which the level values were passed based on the level of the select list in PHP itself?
jQuery(function($) {
$("#series").change(function() {
var targetID = $(this).val();
$("div.generation").hide();
$('#' + targetID).show();
});
$("#3generation").change(function() {
var targetID = $(this).val();
$("div.model").hide();
$('#' + targetID).show();
});
$("#5generation").change(function() {
var targetID = $(this).val();
$("div.model").hide();
$('#' + targetID).show();
});
$('.selectModel').change(function() {
if ($(this).val() != "") {
$('#submit').show();
} else {
$('#submit').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3 align="center">Choose your BMW<br /><br /></h3>
<div id="selectorFormContainer" width="100%" align="center">
<form action="catalog.php?category=submit" method="GET" id="selectorForm">
<div id="SeriesContainer" class="selector">
<select id="series" class=" validate['required']" name="series" size="1">
<option value="">Choose your BMW's series</option>
<option value="3series">3 series</option>
<option value="5series">5 series</option>
</select>
</div>
<br />
<div id="3series" class="generation" style="display: none;" onchange="ChangeDropdowns(this.value)">
<select id="3generation" class="selectGen" name="3generation" size="1">
<option value="">Choose your BMW's generation</option>
<option value="e46">E46 (1998 - 2006)</option>
</select>
</div>
<div id="5series" class="generation" style="display: none;" onchange="ChangeDropdowns(this.value)">
<select id="5generation" class="selectGen" name="5generation" size="1">
<option value="">Choose your BMW's generation</option>
<option value="e39">E39 (1995 - 2003)</option>
<option value="e60">E60 (2003 - 2010)</option>
</select>
</div>
<br />
<div id="e46" class="model" style="display: none;" onchange="ChangeDropdowns(this.value)">
<select id="e46model" class="selectModel" name="e46model">
<option value="">Choose your BMW's model</option>
<option value="320i">320i</option>
</select>
</div>
<div id="e39" class="model" style="display: none;" onchange="ChangeDropdowns(this.value)">
<select id="e39model" class="selectModel" name="e39model">
<option value="">Choose your BMW's model</option>
<option value="525i">525i</option>
<option value="540i">540i</option>
</select>
</div>
<div id="e60" class="model" style="display: none;" onchange="ChangeDropdowns(this.value)">
<select id="e60model" class="selectModel" name="e60model">
<option value="">Choose your BMW's model</option>
<option value="M5">M5</option>
</select>
</div>
<br />
<div id="submit" style="display: none;">
<input value="submit" style="border: none; border-radius: 5px; height: 2em; width: 10em; background-color: #22b8f0; color: #ffffff;" type="submit" />
</div>
</form>
</div>
HTML form submission pack all the data in the form elements into string and send them to the destination. you can not change it. but you can use javascript to collect some certain data and send them to a url (via AJAX or simply by redirecting the browser with some data in it)
this is redirecting method:
data = $("your element").serialize();
window.location.href = "your url/?"+data;
I have a Symfony2 application, where I am adding selected boxes to the page dynamically using jQuery. I click add more and 2 select boxes are added with the following IDs:
#taskbundle_product_values_1_kind
#taskbundle_product_values_1_values
another click:
#taskbundle_product_values_2_kind
#taskbundle_product_values_2_values
so on and so forth.
Now I have a script that will bind to the change event of the kind select boxes and accordingly attach values to the values select box:
Now the problem is that I need some way to run the script in an iterative way that when I make changes to the first block, the effect should also only be on the first block. and Also I am looking for a way to detect changes on select boxes without multiple attribute.
$('body').on('change', '#select select', function() {
alert("Yahoo");
//console.log("Yahoo");
var val = $(this).val();
var $valSelect = $(this).next("select").html('');
$valSelect.append('<option value="value">Value</option>');
//alert(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/product/" method="post">
<div>
<label for="webmuch_taskbundle_product_name" class="required">Name</label>
<input type="text" id="webmuch_taskbundle_product_name" name="webmuch_taskbundle_product[name]" required="required" maxlength="255">
</div>
<div id="select">
<ul class="values">
<li>
<div id="webmuch_taskbundle_product_values_1">
<div>
<label for="webmuch_taskbundle_product_values_1_kind" class="required">Kind</label>
<select id="webmuch_taskbundle_product_values_1_kind" name="webmuch_taskbundle_product[values][1][kind]" required="required">
<option value="" selected="selected">-----Select Kind-----</option>
<option value="2">Size</option>
<option value="3">Shape</option>
<option value="4">Weight</option>
</select>
</div>
<div>
<label for="webmuch_taskbundle_product_values_1_values">Values</label>
<select id="webmuch_taskbundle_product_values_1_values" name="webmuch_taskbundle_product[values][1][values][]" multiple="multiple">
<option value="4">small</option>
<option value="5">medium</option>
<option value="6">large</option>
<option value="7">v-neck</option>
<option value="8">round-neck</option>
<option value="9">collor</option>
<option value="10">light</option>
<option value="11">middle</option>
<option value="12">heavy</option>
</select>
</div>
</div>
</li>
<li>
<div id="webmuch_taskbundle_product_values_2">
<div>
<label for="webmuch_taskbundle_product_values_2_kind" class="required">Kind</label>
<select id="webmuch_taskbundle_product_values_2_kind" name="webmuch_taskbundle_product[values][2][kind]" required="required">
<option value="" selected="selected">-----Select Kind-----</option>
<option value="2">Size</option>
<option value="3">Shape</option>
<option value="4">Weight</option>
</select>
</div>
<div>
<label for="webmuch_taskbundle_product_values_2_values">Values</label>
<select id="webmuch_taskbundle_product_values_2_values" name="webmuch_taskbundle_product[values][2][values][]" multiple="multiple">
<option value="4">small</option>
<option value="5">medium</option>
<option value="6">large</option>
<option value="7">v-neck</option>
<option value="8">round-neck</option>
<option value="9">collor</option>
<option value="10">light</option>
<option value="11">middle</option>
<option value="12">heavy</option>
</select>
</div>
</div>
</li>
<li>Add a value
</li>
</ul>
</div>
<div>
<label class="required">Values</label>
<div id="webmuch_taskbundle_product_values" data-prototype=""></div>
</div>
<div>
<button type="submit" id="webmuch_taskbundle_product_submit" name="webmuch_taskbundle_product[submit]">Create</button>
</div>
<input type="hidden" id="webmuch_taskbundle_product__token" name="webmuch_taskbundle_product[_token]" value="IRD3S7rLy-SQPAxyfMZNQ5UU05RR8qmVPXSrPe6Hnig">
</form>
.html() returns a string and not a jQuery object
You likely want
var $valSelect = $(this).next("select");
$valSelect.html('<option value="value">Value</option>');
or
var $valSelect = $(this).next("select");
$valSelect.empty().append('<option value="value">Value</option>');