This may be a basic question but I am not able to find a solution.
I have two drop down. I want to append the url parameter from the 2nd drop down to the first and I am not able to. Here is an example.
When I select SUB11 from dropdown1 the parameter is appended in the URL like this
http://localhost:8080/test/testing.html?par1=sub11
Now when I select SUB21 from dropdown2, this is what I get (not what I want)
http://localhost:8080/test/testing.html&par2=sub21
But I want this to be like this, appended to the already existing url paramter.
http://localhost:8080/test/testing.html?par1=sub11&par2=sub21
I think it has got to do with href in the dropdown2 and I don't know what to set it to. Please help.
<ul>
<li>
Menu 1
<ul class="dropdown">
<li>SUB11</li>
<li>SUB12</li>
<li>SUB13</li>
</ul>
</li>
<li>
Menu 2
<ul class="dropdown">
<li>SUB21</li>
<li>SUB22</li>
<li>SUB23</li>
</ul>
</li>
</ul>
Ideally you could create a HTML form and use <select> element.
<form method="get">
<select name="menu-1">
<option value="SUB11">SUB11</option>
<option value="SUB12">SUB12</option>
<option value="SUB13">SUB13</option>
</select>
<select name="menu-2">
<option value="SUB21">SUB21</option>
<option value="SUB22">SUB22</option>
<option value="SUB23">SUB23</option>
</select>
<input type="submit" value="Submit" />
click on submit and you will see they are in the URL:
http://localhost:8080/test/testing.html?menu-1=SUB11&menu-2=SUB21
Check this out https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Use Jquery
$( '.dropdown' ).on( 'change', function( e ){
document.location.href = "localhost:8080/test/testing.html?par1=" + "&par2=" + $( this ).val() + "seconddropdownvalue";
});
Give id to second drop-down to get value using jquery.
Related
Okay, so I know how to create a drop down menu. And I know how to create a href that links to a specific part of the page using #. But what I need is a drop down menu that uses those # anchors to direct you to a specific part of the page. So you would click on the drop down, select your option and then it would automatically scroll you down to the appropriate section of the page. Everything I try just isn't working. Any help please?
Here is what I've tried:
<form>
<fieldset>
<legend>Select Your Location</legend>
<p>
<select id = "myList">
<option value = "#ReigateEvents">Reigate</option>
<option value = "#GodalmingEvents">Godalming</option>
<option value = "#Enquiry">I don't see my location here</option>
</select>
</p>
</fieldset>
</form>
You just need to add #after the link.
Try something like this:
<ul>
<li>Part 1</li>
<li>Part 2</li>
<li>Page 2 Part 1</li>
Edited
<select id = "myList" onchange="javascript:location.href = this.value;">
<option value = "page.html#ReigateEvents">Reigate</option>
<option value = "page.html#GodalmingEvents">Godalming</option>
<option value = "page.html#Enquiry">I don't see my location here</option>
You can do the following with javascript.
function myAnchor(value){
var top = document.getElementById(value).offsetTop;
window.scrollTo(0, top);
//document.getElementById(value).scrollIntoView();
}
p{
height: 1500px;
}
<select id = "myList" onchange="myAnchor(this.value)">
<option value ="test">Reigate</option>
<option value ="GodalmingEvents">Godalming</option>
<option value ="Enquiry">I don't see my location here</option>
</select>
<h2 id="GodalmingEvents">
GodalmingEvents
</h2>
<h2 id="Enquiry">
Enquiry
</h2>
<p></p>
<h1 id="test">
test
</h1>
I already know how to create a button and a drop down list. However, I need to have a list with a bunch of links, and when the user selects one and hits the 'Go!' button next to it, the page is redirected to that link.
Here is what I have so far:
<select name="myList" id="ddlMyList">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
</select>
<form action=ddlMyList>
<input type="submit" value="Go to Link">
</form>
However, it tries to redirect to 'ddlMyList'.
Replace tag with below and add javascript function to manage link redirecting.
<div>
<input type="button" onclick="go(document.getElementById('ddlMyList').value)" value="Go to link"/>
</div>
<script>
function go(href){
window.location.replace(href);
}
</script>
You'll need JS to do that
jsBin demo
<script>
document.forms[0].onsubmit = function(e){
e.preventDefault();
var list = document.getElementById("ddlMyList");
window.location.href = list.options[list.selectedIndex].value;
};
</script>
This question already has answers here:
ul in the form not sending to the $_POST
(4 answers)
Closed 9 years ago.
Actually, I am using a list in which I am trying use my <li> element as a part of form.
I am doing something like as shown bellow :-
<form action="index.php" method="post">
<input type="hidden" name="search-type" value="commercial">
<ul>
<li name="search-option" id="buy" value="buy">inputBUY</li>
<li name="search-option" id="rent" value="rent">RENT/LEASE</li>
<li name="search-option" id="pg" value="pg">PG</li>
</ul>
<input type="submit" value="Submit" name="submit">
</form>
But when I submit this form there is no appearance of "search-option" in url means I am not getting any value for "search-option" to my php script.
Is there any way to do this without using any <input > element.
To do so, you need to add an event handler to the li or a parent container, save the item clicked and Ajax the result to the server, or build a form object in memory, or create a URL with the selections.
Here is an example that expects the search to be done on the SAME server as the page is on - I am using jQuery because it is the most convenient for what you are trying to do
I did not wire the Ajax in the live demo.
Live Demo
Suggested HTML
<ul id="search-option">
<li data-option="buy" class="sel">inputBUY</li>
<li data-option="rent">RENT/LEASE</li>
<li data-option="pg">PG</li>
</ul>
Search
<div id="result"></div>
Suggested jQuery
$(function() { // when page loads
$("#searchLink").on("click",function(e) { // when link clicked
e.preventDefault(); // stop the click from any further action
var option = $("#search-option li.sel").data("option"); // get the selected option
$.post("search.php",{"option":option},function(data) { // post the option
$("#result").html(data); // show the result
});
});
$("#search-option li").on("click",function() { // when LI is clicked
$(this)
.addClass("sel")
.siblings().removeClass("sel"); // Swap class
});
});
No, you must use form controls(inputs,select) in order to send data to the server or whatever place you want, not HTML tags
The short, direct answer is no. However....
Often with this you will find some javascript attatched to the list items. When Clicked the javasctipt will update the hidden form field with the clicked value.
Also note that value is not a standard attribute of li
Here is an example of how to do this with jQuery..
Update your html with:
<input type="hidden" id="search-type" name="search-type" value="commercial">
<ul id="selType">
<li name="search-option" id="buy" value="buy">inputBUY</li>
<li name="search-option" id="rent" value="rent">RENT/LEASE</li>
<li name="search-option" id="pg" value="pg">PG</li>
</ul>
And use the following (you will need jQuery and lean about $(document).ready
//Assign the value
$("#selType li").click(function(){
$("#search-type").val($(this).attr("value"));
});
See it in action here: http://jsfiddle.net/Xcgw4/
You can also use plain javasript but for this demo I'll use the jquery library because it makes life easy.
You would also want to do something to indicate what has been clicked etc.
You need to use proper form controls. Replace the li with a select like this:
<form action="index.php" method="post">
<select name="search-option">
<option value="buy">BUY</option>
<option value="rent">RENT/LEASE</option>
<option value="pg">PG</option>
</select>
<input type="submit" value="Submit" name="submit">
</form>
or a radio like this:
<form action="index.php" method="post">
<input type="purchaseType" name="buy" value="buy">BUY<br>
<input type="purchaseType" name="rent" value="rent">RENT/LEASE<br>
<input type="purchaseType" name="pg" value="buy">PG<br>
<input type="submit" value="Submit" name="submit">
</form>
I have a popup displayed using ajax. This popup contains a form, this is how it looks like.
<form id="edit_tailored_form" name="thisisthename" method="post" action="/edittailored">
<h4>Country</h4>
<p>Show only records from this country.</p>
<ul>
<li><label>Country:</label>
<select class="inpt1" name="country">
<option value="0">ALL_COUNTRIES</option>
<option value="1">United States</option>
<option value="2">France</option>
</select>
</li>
</ul>
<h4>Hashtags</h4>
<div class="clr" style="height:10px;"></div>
<p>Show only records under these hashtags.</p>
<ul>
<li><label>Hashtags:</label><input type="text" name="hashtags_select" class="hashtags_select inpt1">
+
<input type="hidden" class="cid" value="" />
<div class="hashtags_list"></div></li>
<li><label> </label>
<div class="hashtags_display">
<ul>
<!-- display here the added hashtags--->
</ul>
</div>
<input type="hidden" name="hashtags" class="hashtags_hdn" value="1,3,13">
</ul>
<div class="clr" style="height:0px;"></div>
<h4>Save and quit</h4>
Save the modification and quit.
<ul>
<li><label class="control_label"> </label> <input type="button" id="edit_tailored_btn" class="btn1" value="Save" /></li>
</ul>
</form>
And in the javascript file, I added this action:
$('#edit_tailored_btn').live('click', function(event) {
event.preventDefault();
event.stopPropagation();
var data = $('#edit_tailored_form').serialize();
$.ajax({
url: '/edittailored',
data: data + '&ajx=2',
type: 'post',
success: function(data) {
$('#add_record_wrapper').html(data);
}
});
})
With edit_tailored_btn standing for the Id of the "save" button in the form.
as you can see, I serialize the form to get the data of its inputs so I can send them using ajax (again).
My problem is that the serialize like doesn't work in chrome (it works in firefox). A inspected that and found that it's not actually serialize which is not working, but my form is not recognized, as for alert($('#edit_tailored_form').attr('name')); displaying null.
Any idea?
I found the solution to the problem, When the popup loads, it loads actually in a <div> which is contained in an html form (the form which triggers the event displaying the popup)...
This results in two html forms, one inside the other, so Chrome ignores the child... I didn't pay attention to this problem.
As for Firefox, it doesn't ignore none of them. It gives priority to the form whose submit button is the clicked one.
Thank you for your help
i need to create html code, in which if user selects an item from drop down list and click button then it will go to respective link.
<select name="myList">
<option value="Google" />Google
<option value="yahoo" />yahoo
<option value="Ask" />Ask
</select>
if user selects Google from drop down list and clicks button, then page should be redirected to www.google.com and if it selects yahoo and clicks button should go to www.yahoo.com
I would like to mention that I need The button in this scenario.
I don't want to go respective site on drop down selection.Only after clicking the button.
Thank you in advance.
HTML:
<select name="myList" id="ddlMyList">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
</select>
<input type="button" value="Go To Site!" onclick="NavigateToSite()" />
JavaScript:
function NavigateToSite(){
var ddl = document.getElementById("ddlMyList");
var selectedVal = ddl.options[ddl.selectedIndex].value;
window.location = selectedVal;
}
You could also open the site in a new window by doing this:
function NavigateToSite(){
var ddl = document.getElementById("ddlMyList");
var selectedVal = ddl.options[ddl.selectedIndex].value;
window.open(selectedVal)
}
As a side note, your option tags are not properly formatted. You should never use the <... /> shortcut when a tag contains content.
First, change the option values to the URL you want to target:
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
Next, add an ID to the select so you can target it:
<select name="myList" id="myList">
Finally, add an onclick method to the select control to handle the redirect:
<input type="button" onclick="document.location.href=document.getElementById('myList').value">
<select name="myList">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
</select>
<input type="button" onclick="window.location=document.myList.value" />
Using JavaScript, you can attach an onclick event to the button. In the event handler, you can use an if statement to check which value was selected in the select list, and use window.location to redirect the user to the appropriate URL.
I would suggest changing the value of the option elements to be the required URL, and you can then simply grab the value and go to that URL, instead of having to check which option was selected.
onclick()="window.location.href='page.html'"