Function to create/add another select (dropdown) box - javascript

I need to find a away to insert/add a <select> (dropdown) box on click of a button. I want each click of the button to keep adding a new <select>.
Tested out some javascript/jquery functions and as I don't have much background in it, I'm having no luck!
Edit:
Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks

You can create a <select> element (or any other element) with $("<select/>");
The append function can be used to append html into an item.
Combining them yields:
$("#buttonToAddDD").click(function () {
var newDD = $("<select/>");
$(newDD).append("<option>New Option 1</option>");
$(newDD).append("<option>New Option 2</option>");
$("#whereYouWantToAddNewDD").append(newDD);
});
<div id="whereYouWantToAddNewDD"></div>
<input type="button" id="buttonToAddDD" value="Add DD" />

Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks

Dynamically creating/removing a html code is easy with JQuery as explained above by Adam. However keep caution to provide users with facility to remove them as well.
Best way would be adding a id to the select box and provide a span/div with a close 'X' on clicking which either it could be removed completely
$(document).ready(function(){
{
$("#close").click({function(){
$("#selectid").remove(); // to remove the select
$("#selectid").hide(); //this would hide it but when submitted, the default/selected option shall still be submitted
$("#close").remove();
}):
});

Related

Inserting input elements

I am trying to insert/move some insert elements on a form on an internal site.
I am using jquery and the .insertafter function but although the labels will move the inputs wont
This works to move the labels
$("label[for='rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_1']").insertAfter("label[for='rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_0']")
but the inputs wont
$('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_1').insertAfter('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_0');
I have also tried to hide them this also fails
$('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_1').hide()
$('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_0').hide()
I have a fiddle here if anyone can help
http://jsfiddle.net/kxLsp4ne/
in the end the solution was simple
$('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_1').insertAfter('#rn_SelectionInput_26_Incident.CustomFields.c.need_written_reply_0');
Thanks for the help

jQuery Select Box Redirections

I'm having a bit of a mare with jQuery and I was hoping someone could clarify some bits for me. I'm under no illusion any of this is elegant or optimal, and I have NEVER got on with Javascript in any form so please don't judge me too harshly!
Basically, I've got a Wordpress plugin that works very well for most things I want it to do. The main thing is that it offers the ability to select the delivery method from the Woocommerce product menu page. But I've been asked for the available menu options to be filtered by delivery method and I can't see a way of doing this live on the page, so what I've come up with is a "simpler" solution. I'm intending to set up three different page implementations of the menu, one for each of the delivery options (deliver, pick up and eat in), each with categories filtered via shortcode for that delivery method. When the page loads I've got jQuery setting the default option for the dropdown to match that page and then whenever the dropdown is changed from this option it can trigger a redirect to one of the other relevant pages.
I know this is a messy way of doing it, but I have no idea how or even if I could filter the products on the menu any other way, but if someone has a suggestion I'd love to hear it!
Anyway, I've got this partially working. I can set the dropdown default on page load easily enough, and I've managed to get an if statement kind of working, but it only seems to work for the first option and no others. I also can briefly see ifelse undefined in the console before the page changes on a redirect. I've also tried to use a variable, but whenever I've tried using it in the if condition checks it just comes up as undefined or null even though I can view it on the previous line like this:
jQuery("#fdoe_delivery_dropdown").on("change",function(){//Getting Value
var selValue = $("#fdoe_delivery_dropdown").val();
console.log ("Variable delivery method is - " + selValue);
Obviously, I know a variable would be a better way to go, but because I can't get it to work (and I know it's me being dumb but I just gave up on it), here's what I've got so far:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
//Set opening delivery method for "Delivery" page
jQuery("#fdoe_delivery_dropdown").val("delivery").change();
//Check initial delivery method
console.log ("Opening delivery method is - " + jQuery('#fdoe_delivery_dropdown').val());
if($("#fdoe_delivery_dropdown option:selected").val() == "pickup") {
//Log success to console and redirect
console.log ("New delivery method is - " + jQuery('#fdoe_delivery_dropdown').val());
window.location.replace("{site_url}/pickup/"); }
elseif($("#fdoe_delivery_dropdown option:selected").val() == "eatin") {
//Log success to console and redirect
console.log ("New delivery method is - " + jQuery('#fdoe_delivery_dropdown').val());
window.location.replace("{site_url}/eatin/"); }
});
});
</script>
HTML:
<select id="fdoe_delivery_dropdown" class="form-control input-lg"><option value="pickup" selected="">Pick Up</option><option value="delivery">Delivery</option></select>
Note: I have used the WordPress variable {site_url} instead of publishing the website on here, I have no idea if this would actually work in the jQuery, but it would be much better to use a dynamic URL like this rather than a hard-coded one, so if anyone knows the best way of doing that as well it'd be great to know.
As I've said, this script partially works and I've had to put it in a HTML block on the individual pages to get it to trigger at present. So if anyone could help me tidy this up, point out the millions of ways I'm going wrong and help me get this working fully, it would be MASSIVELY appreciated!
Thanks in advance!
I think you want to achieve redirect based on the select option. check below code.
$('#fdoe_delivery_dropdown').on('change', function(){
window.location = 'https://exmaple.com/'+$(this).val();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="fdoe_delivery_dropdown" class="form-control input-lg">
<option value="pickup" selected="">Pick Up</option>
<option value="delivery">Delivery</option
</select>

OnClick event triggering javascript function only after clicking twice

I'm fairly new to this web-programming thing, and I'm having some trouble with an onclick event. I don't even know if using "onclick()" is the best thing to do, but it has been working so far for me.
At this moment, I have a page with a div in which I load another page. This content varies depending on hash changed when I select options from a toolbar, using this piece of js
function loadcontent(toload){
$('#browsediv').load("content/addimagecontent.php?"+toload);
}
Every js function is called from the main page, not the content one.
Now, my problem is that, in the loaded content, I have several pages of results, and I have a div with the word Next printed into it, and an onclick event that should make the page change its page attribute:
echo "<div onClick='loadcontent(\"page=".$nextpage."\")'>Next</div>";
I also have the same thing to lead you to the previous page.
Once I go to the page, I see everything as should, but if I click either on "Next" or "Previous", it doesn't do anything the first time.
Any subsequent times I click on any of those, it works perfectly, even if the first thing I click is Next and then I click Previous or viceversa.
I've been looking around but no-one seems to have answered anything that adjusts to my issue, if someone has, please forgive me, as English is not my mother tongue and I sometimes don't know the best way to look for something.
Thanks for reading :)
Instead of adding an onclick, add an id attribute. Then with jquery you can do something like this:
<div id="yourDiv">Next</div>
$("#yourDiv").click(function() {
loadcontent(toload)
})
I'm not quite sure if this is "legal" but you can add the $nextPage variable as an attribute too.
<div id="yourDiv" data-page="<?php echo $nextPage;?>">Next</div>
Then you would use the following
$("#yourDiv").click(function() {
var page = $(this).attr('data-page');
loadcontent(page);
})

How do I interact with <select> and JavaScript - Display Form Results

Here is the jsbin.
http://jsbin.com/OnatOhE/3/ (just right click, view source to see source code)
I'm trying to display the results that the user chose on the same page after hitting the button. I've messed around with this for a while and I haven't found a simple way to do this.
All help is greatly appreciated. Thank you!
I'm sure if you look at any documentation for javascript libraries they would have an example of this but a very very simple way to do it could be like this using jQuery...
$( "#favColor" ).change(function() {
$("#bottomText").append(' '+$("#favColor option:selected").val());
});
You add to this by making a function that finds all select boxes and does the above to all of them, instead of having 5 functions that do the same thing.
See:
http://api.jquery.com/change/
http://api.jquery.com/val/

Title Attribute on Disabled Elements in Firefox

I am building a very dynamic web-based application using a lot of Javascript to handle user events. I am in the process of making things a little more usable and came across a problem that I've never had before.
I am using jQuery, so factor that in to your answers. Thanks in advance.
I have a set of button elements defined as:
<input type="button" title="My 'useful' text here." disabled="disabled" />
I have these buttons with a default style of:
div#option_buttons input {
cursor: help;
}
Then, using jQuery I run something like this as a click-event on a select box:
window.current_column = '';
$('select.report_option_columns').live('click', function() {
var column = $(this).val();
if ( column == window.current_column ) {
// clear our our previous selections
window.current_column = '';
// make this option no longer selected
$(this).val('');
$('div#option_buttons input').attr('disabled','disabled');
$('div#option_buttons input').attr(
'title',
'You must select a column from this list.'
);
$('div#option_buttons input').css('cursor', 'help');
} else {
window.current_column = column;
$('div#option_buttons input').attr('disabled','');
$('div#option_buttons input').attr(
'title',
'Add this option for the column "' + column + '"'
);
$('div#option_buttons input').css('cursor', 'default');
}
});
So, as you can see, when a column is selected in the select box (not shown here), I want the button to be enabled and behave like a button would (with my own click-events). But when a column is not selected (including the default load), I want the button disabled. The usability developer in me wanted to give the users subtle contextual clues as to what they can do to enable the button through the native rendering of the title attribute as a lightweight tooltip. I do this already in other areas of the application (this is a crazy beast of a project) and our usability tests have shown that the users are at least capable of recognizing that when the cursor changes to "help" that they can hover over the element and get some information about what is going on.
But this is the first time I've ever tried this with a form element. Apparently when I put disabled="disabled" in the element, it completely ignores the title attribute and will never display the tool tip.
Now, I know I have a few options (at least the ones I could think of):
Write my own custom tool tip plug-in that is a little bit more robust.
Don't "disable" the element, but style it as disabled. This was the option I was leaning on the most (in terms of ease to develop) but I hate having to do this.
Leave the button as enabled but don't process the click event. I don't like this option as much because I like to leave things natively styled as they should logically be. A disabled button "feels" the most correct and the look of a disabled button is instantly recognizable as a disabled button.
So, with all that said, am I missing something? Is there something easy that I can do that I just haven't thought of? Google searches have failed me on this topic, so I thought I'd toss this out on StackOverflow to get some fresh eyes on this.
**Edit**
I just found another StackOverflow question on this same topic, though that person used a very different set of terms describing his problem (probably why I didn't find it).
The url to the question is: Firefox does not show tooltips on disabled input fields
Both of the answers on that question are pretty good, though I'd like to see if anyone has any other suggestions. Maybe something more jQuery specific? Thanks again.
I had a similar problem and I just surrounded the disabled element in another element and interacted with that div, i was using tipTip to show tooltip for disabled checkbox
<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >
<input disabled="disabled" type="checkbox">
</div>
There are several validation plugins that are very robust. You can find them in the jQuery plugins area.
Another option for you though which I happen to love and tends to be trending now adays is using the "Tipsy" plugin. You can put little '?' icons to the right of your text fields and people can mouse over them to get a "facebook-like" tool tip. This plugin is very sharp and I highly recommend it.
Good luck!
I haven't tested whether or not that solves the problem with the missing title, but you could also disable the button(s) using jquery on $(document).ready()
regards,
harpax
If that doesn't break your design totally, you can replace your button by a "span", "p",... tag with "My 'useful' text here."
And swap it with the button only when the user makes the correct move.

Categories