This is my first post here. I am not a developer but have learned a bit about CSS the last few months. I have a basic Mediawiki site which has raw HTML enabled on the site which is a secure site and only a very limited number of users with edit privilege's.
I am trying to make it so that when a user clicks the "Submit" button on the HTML form for the cascading dropdown, it will take them to a specific section on a page, based on what they have chosen in all the drop down boxes. I have used the w3schools site to borrow some code snippets.
Here is my form:
<html>
<form name="form1" id="form1" action="Front-end#CSS#Backgrounds">
Subjects: <select name="subject" id="subject">
<option value="" selected="selected">Select subject</option>
</select>
<br><br>
Topics: <select name="topic" id="topic">
<option value="" selected="selected">Please select subject first</option>
</select>
<br><br>
Chapters: <select name="chapter" id="chapter">
<option value="" selected="selected">Please select topic first</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</html>
And here is the java script I am using.
var subjectObject = {
"Front-end": {
"HTML": ["Links", "Images", "Tables", "Lists"],
"CSS": ["Borders", "Margins", "Backgrounds", "Float"],
"JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
},
"Back-end": {
"PHP": ["Variables", "Strings", "Arrays"],
"SQL": ["SELECT", "UPDATE", "DELETE"]
}
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
var chapterSel = document.getElementById("chapter");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {
//display correct values
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function() {
//display correct values
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
}
}
}
In my form example above I hard coded the action= portion to say Front-end#CSS#Backgrounds
When I click the submit button it launches or takes me to this URL:
https://mysitename.com/myenvironment/index.php/Front-end?subject=Front-end&topic=CSS&chapter=Backgrounds#CSS#Backgrounds
In the example subject = my page name, in this case Front-end, topic = my Heading 1 section, in my case CSS, and chapter = my Heading 2 section, in my case Backgrounds.
But it's not working fully. When I click submit it takes me to the "Front-end" page on my Mediawiki site but it doesn't recognize or do anything with the Heading 1 and Heading 2 parts.
The way this will be used is to allow the user to select the page and section of a page they will be going to. So that in a form using three cascading dropdowns, the user will first pick the subject, which is actually the name of the page on my Mediawiki site, the second drop down will be the Heading 1 section, and the third drop down will be the Heading 2 section which is where I want the user to end up on the page.
The Mediawiki page sort of looks like this:
Page name is "Front-end"
Table of contents is for example:
## CSS ##
### Borders ###
### Margins ###
### Backgrounds ###
### Float ###
I will have the HTML cascading dropdown forms setup with three boxes. In my example, the user picks Front-end -- CSS -- Backgrounds and when they hit submit they go directly to the Heading 2 section on my page for "Backgrounds" Obviously, I need to code it so that whatever combination the user picks I take them to the right page section.
Any ideas on how I can do this? I would like to stick with the simple HTML form and Java Script example above as it is easy for me. Any advice is appreciated! Thanks in advance and sorry for the long post.
GJ231
Well many things to check.. First of all.. https://mysitename.com/myenvironment/index.php/Front-end?subject=Front-end&topic=CSS&chapter=Backgrounds#CSS#Backgrounds
An url can jump to one Anchor. not two. So am I guessing you will need some more JavaScript on checking the Post url and figure out where to go to on the page depending on the Post url.
The content of the page would need to have Anchor links inside them, something like #-- e.g. #Front-End-CSS-Backgrounds
Then before you post, you should change the url to something like : https://mysitename.com/myenvironment/index.php/Front-end#Front-End-CSS-Backgrounds
That will bring the person to the right spot.
If you cannot create anchor links on the page, perhaps you can create divs with the same format Id's ? or Something similar. Then have JavaScript jump to the relevant ID based on the url.
Related
I'm learning how to use Symfony and I'm stuck on a form.
I have a drop-down list, and depending on the choice, I would like to display an input.
I have been looking for a solution for more than 4 days, but I can't find anything, so I come here to ask for your help
When I select "Lycéen.ne" in this dropdown list : dropdownList,
I would like to display the input "Lycée" : inputLycee
I know there are FormEvent, but I don't really understand how it works and how to use JS to show or hide inputs
Thanks for your help =)
You can keep use Symfony to render the entire form and then use a bit of JS and CSS to hide or show the field that should be shown dynamically. Here's an example using plain JS:
let foo = document.getElementById("foo");
let bar = document.getElementById("bar");
foo.addEventListener('change', (event) => {
if (event.target.value === 'two') {
bar.style.display = 'inline'; // Show the element.
} else {
bar.style.display = 'none'; // Hide the element.
}
});
#bar {
display: none; // Hide the element initially.
}
<select name="foo" id="foo">
<option value="one">Do not show</option>
<option value="two">Show</option>
</select>
<input name="bar" id="bar" value="" placeholder="type something here..." >
I'm not sure if this is really doable with symfony, I think its more of a jquery question :
$('#listid').change(function(event){
$('#inputid').toggle($(this).val() == 'Lycéen.ne');
});
I have a form done with semantic-ui and one of the elements is a dropdown that has values pulled from a remote url. It works fine for adding things but how do I set a value for the dropdown when editing.
If a user searched for a country and submitted the form with United Kingdom how do I display the selected value when the user wants to edit the object?
$('.ui.dropdown.country_select').dropdown('setting', {
apiSettings: {
url: '../countries/{query}'
}
});
Found the answer after some digging:
var dd = $('.ui.dropdown.country_select').dropdown('setting', {
apiSettings: {
url: '../countries/{query}'
}
});
dd.dropdown('set text', 'yahoo');
dd.dropdown('set value', 'google');
I was having a similar issue but with a dropdown that was multiple, searchable, and remote data. For me, the solution was to seed ONLY the <option> tag(s) that corresponds with the default value. So, using your code sample:
$('.ui.dropdown.country_select').dropdown('setting', {
apiSettings: {
url: '../countries/{query}'
}
});
// Assuming defaultValue = '1';
<select class="ui dropdown country_select">
<option value="1" selected>Default Value Item</option>
</select>
Then the dropdown should overwrite the options with the remote source after initialization.
I wanna render show template into index template right after clicked element.
Some code(jade):
template(name="index")
ul
for post in posts
li
a(href="posts/1")= post.title
// render full post #1 here if link clicked
li
a(href="posts/2")= post.title
// render full post #2 here if link clicked
li
a(href="posts/3")= post.title
// render full post #3 here if link clicked
So I don't need to replace whole index template when user clicks show post link. I just need render show template right after link to this post.
Also I need to show only one post at same time, so if user clicks one post, then another, first one should be removed from DOM and second one should be rendered just in his place (right after show link).
How can I do that with meteor and Iron Router?
See Blaze.render or Blaze.renderWithData
Insert placeholders into your markup:
template(name="index")
ul
for post in posts
li
a(href="posts/1")= post.title
div(id="post1") // render full post #1 here if link clicked
li
a(href="posts/2")= post.title
div(id="post2") // render full post #2 here if link clicked
li
a(href="posts/3")= post.title
div(id="post3") // render full post #3 here if link clicked
Then setup your helpers:
Template.index.helpers({
'click a': function(ev){
... determine which link was clicked on
... pick the node to inject ex:
var node = $('#post2');
Blaze.render('postTemplate',node);
}
});
One way to do this would be to go ahead and render everything, but keep it hidden. Then you can add a click event handler that hides everything and shows only the thing that was clicked:
<template name='index'>
<ul>
{{#each posts}}
<li>
<a href='#' class='show-index-link' _id="{{_id}}"><!--Store _id so we can retrieve it in event handler-->
<div class='post-show-hide' id='post-show-hide-{{_id}}' style='display: none;'><!-- make it easy to select in the event handler-->
{{> post}}<!-- data context is the post in question -->
</div>
</li>
{{/each}}
</ul>
</template>
Then your event handler might look something like this:
Template.index.events({
'click .show-index-link': function(event) {
var _id = $(event.currentTarget).attr('_id'); // grab the ID of the post to show
event.preventDefault();
$('.post-show-hide').hide(); // hide all of them
$('#post-show-hide-' + _id).show(); // Show only the one we just clicked on
}
});
This seems the most straightforward way to accomplish this to me, but if you're concerned about the performance of sending all of the posts to the client, you could also consider having an event handler that subscribes to the post in question. That seems significantly more difficult (and if you're really worried about that sort of performance issue, you can get around it much more easily, e.g. with pagination), so unless you really need it, I'd stick to something simple like the solution above.
I have a Meteor application where I want to describe a "site" and a number of "ios" (input/outputs) for each site. The site is described by the first 3 fields and stored in a collection named sites. The ios are entered below that, and are stored in a collection named ios. The idea is each site may have an arbitrary number of ios. I would like to be able to edit any field for the site or any of the ios, click save, and have everything saved at once. Because the number of ios will be limited to say 5 or so by physical circumstances, I think this will be a better user experience than having a separate edit page for ios. However, I can't figure out how to save the ios when the site form is saved. How could this be implemented?
Here is an image of what the form looks like:
https://app.box.com/s/rqjj9lb49twcitwo7rmdy6k9ta0vuztv
Assuming a structure like this:
<template name="form">
<form name="form">
<input type="text" name="foo" />
<input type="text" name="bar" />
<button type="submit">Submit Form</button>
</form>
</template>
Some code like this will add your different elements to different collections:
Template.form.events({
'submit form[name="form"]': function(e) {
var foo, bar, fooInsert, barInsert;
e.preventDefault();
foo = $(e.target).find('[name="foo"]').val();
bar = $(e.target).find('[name="bar"]').val();
fooInsert = {
thing: foo
}
barInsert = {
thing: bar
}
fooInsert._id = Collection1.insert(fooInsert); // Insert foo into Collection1
barInsert._id = Collection2.insert(barInsert); // Insert bar into a different collection, Collection2
}
});
It would help if you did show some code you're working with so we can make our answers better :)
Is there any way I can create custom/conditional registration/profile fields in buddypress.
I tried Googling a lot about this, but I am not getting proper solution.
The condition what I am thinking of is :
I want to create 2/3 dropdowns, suppose if 1st one contains vehicles type(car, bike,),
then the second dropdown's option should change according to what user is choosing in dropdown 1.
any help would be appreciated.
Thanks a ton in advance. :-)
Currently there is no working plugin or hack for that. I saw such thing on some sites - but this is done via JavaScript and heavily modifying of a registration page source code.
It will be little tricky unless you touch register/resgistration.php source.
you can do like this if you little familiar with jquery.
Theres a hidden field ( id "signup_profile_field_ids" ) in buddypress registration form which tells server what fields in registration form, it will look like
<input type="hidden" name="signup_profile_field_ids" id="signup_profile_field_ids" value="5,11,1,10,32">
value of that field contains field ids of the registration form.
Now, you need to select a parent field to show conditional fields. you need to know parent and conditional field ids
now use this jquery code
<script type="text/javascript">
$(function(){
var childs = new Array("Child id 1","Child id 1"); // your child fields ids
var options = new Array("Car","Bike"); // your parent field options, notice option and child number is same, which means, one child for one option
var parent = "Parent Field id"; // place you parent field id
var currentFields = new Array();
currentFields = $("#signup_profile_field_ids").val().split(','); // take all current fields ids in an array
$.each(childs, function(index,value){
$('#field_'+value).parent().hide(); // hide all child fields first
currentFields.splice(currentFields.indexOf(value),1);
});
$("#signup_profile_field_ids").val( currentFields.join() );
$('#field_'+parent).after('<div id="conditional-fields-conteiner></div>"');
$('#field_'+parent).change(function(){
var option = $(this).val();
var appendField = childs[options.indexOf(option)];
var html = $("#field_"+appendField).parent().html();
$('#conditional-fields-conteiner').html(html);
$.each(childs, function(index,value){
currentFields.splice(currentFields.indexOf(value),1);
});
currentField[] = appendField;
$("#signup_profile_field_ids").val( currentFields.join() );
});
});
</script>
This may seems complex, but this is the easiest approach. if you are planning it in membership site, dont use it. user can manupulate conditional fields simply by editing html.
Theres also a plugin for this, going to release soon. I am developing it
http://rimonhabib.com/coming-up-next-buddypress-nested-conditional-fields/