I'm working in Wordpress here.
In the posts page I have a dropdown list of values:
<select name='imagesize'>
<option value='200x200'>200 x 200</option>
<option value='300x300'>300 x 300</option>
<option value='400x400'>400 x 400</option>
<option value='500x500'>500 x 500</option>
</select>
I have a button:
<a class="button" href="http://www.example.com/???">Click</a>
I want to replace the "???" with the value that is currently selected in the list when the user hits the button.
Any ideas how I can do this? Ajax?
You should be using a form submit button to submit the form. If you use a link you will need to run some javascript first to modify the link on the fly to append your information.
<form action="yourPHP.php" method="post">
<select name='imagesize'>
<option value='200x200'>200 x 200
<option value='300x300'>300 x 300
<option value='400x400'>400 x 400
<option value='500x500'>500 x 500
</select>
<input type="submit">
</form>
Then in your PHP code, access it via:
<?php
$yourImageSize="";
if(isset($_POST["imagesize"]))
{
$yourImageSize=$_POST["imagesize"];
}
echo "Your image size is: ".$yourImageSize."<br>";
?>
<select name='imagesize' id='imagesize'>
<option value='200x200'>200 x 200</option>
<option value='300x300'>300 x 300</option>
<option value='400x400'>400 x 400</option>
<option value='500x500'>500 x 500</option>
</select>
<a class="button" id="click_btn" href="http://www.example.com/???">Click</a>
you should add some javascript before the element :
<script type="text/javascript">
$("#imagesize").change(function(){
$("#click_btn").attr("href","http://www.example.com/"+$("#imagesize").val())；
});
</script>
Related
I want the submit button to act on the combined values in the two didferent dropwdown menu's in the form.Which will be a html page name.
For example... west and winter is a different option which will creat "westwinter.html" then west and summer is a different option which will make "westsummer.html" . and clicking submit button the created page will load.I have already created such types of html page named (ex. westwinter.html).
I'm struggeling for days to make this work. I feel some how this must be possible. Please help!
This is the code I use. When I replace the value to a page name (ex. westsummer.html) . The page will be loaded on submit (go). I want the values of the first dropdown and second dropdown to be counted and the result should be a page name on submit. Finaly there should be 16 different html page name.
Iwant this solution with jQuery or javascript.
<div class="selCont">
<h2>pick an option</h2>
<select id="selection" name="selection">
<option value="1">West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>
<select id="selection" name="selection">
<option value="1">Winter</option>
<option value="2">Spring</option>
<option value="3">Summer</option>
<option value="4">Fall</option>
</select>
<button class="go-btn" type="submit">Go</button>
</div>
Firstly, let's set unique IDs for the select tags, and lets set the values to the actual strings (we could keep them numeric and perform a switch on them later to determine their value, but it's easier this way):
<select id="direction" name="selection">
<option value="west">West</option>
<option value="east">East</option>
<option value="north">North</option>
<option value="south">South</option>
</select>
<select id="season" name="selection">
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select>
Next, let's write a function to compose a link using the values from those select tags. I've used document.querySelector here, but you can easily change it out for jQuery if you'd like:
function getLink() {
var direction = document.querySelector("#direction").value;
var season = document.querySelector("#season").value;
//Assuming that the html files are in the same folder as the current page
return "./" + direction + season + ".html";
}
Finally, let's update our button to change the page location to the new link when clicked:
<button class="go-btn" type="submit" onClick="window.location.href = getLink()">Go</button>
Here's everything altogether:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="selCont">
<h2>pick an option</h2>
<select id="direction" name="selection">
<option value="west">West</option>
<option value="east">East</option>
<option value="north">North</option>
<option value="south">South</option>
</select>
<select id="season" name="selection">
<option value="winter">Winter</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select>
<button class="go-btn" type="submit" onClick="window.location.href = getLink()" >Go</button>
</div>
</body>
<script>
function getLink() {
var direction = document.querySelector("#direction").value;
var season = document.querySelector("#season").value;
return "./" + direction + season + ".html";
}
</script>
</html>
I have an HTML form with jquery-chosen multiple selection of countries. I want to send this input to Flask through the POST request. The problem is that Flask does not capture the selections.
When I do not use js chosen, it works:
<div class = "webform">
<form method="POST" action = "/monthly_active" name = "countries">
<p>Select countries</p>
<select multiple id="Country" name="Country">
<option>Select...</option>
<option value="DE">DE</option>
<option value="AT">AT</option>
<option value="RU">RU</option>
<option name="PL">PL</option>
<option name="IT">IT</option>
<option name="GB">GB</option>
<option name="BR">BR</option>
</select>
<input type="submit" value="Submit">
</form>
But with js chosen it does not work:
<form method="POST" action = "/monthly_active" name = "chart_options" >
<p>Select countries</p>
<select name = "countries[]" data-placeholder="Countries" multiple class="chosen-select" tabindex="8">
<option value="AT">AT</option>
<option value="GB">GB</option>
<option value="RU">RU</option>
<option selected>DE</option>
<option disabled>Sun Bear</option>
<option selected>ES</option>
<option disabled>Spectacled Bear</option>
</select>
<script> $(".chosen-select").chosen(); </script>
<input type="submit" value="Submit">
</form>
In Flask I use request.form.getlist() to get the input list.
The thing is I very very basic with HTML and javascript, thus, I am stuck how to manage this problem.
Solved:
My mistake was in request.form.getlist('chart_options'):
I passed the name of the form there whereas I had to pass the name of the <select>
This worked:
target_countries = request.form.getlist('countries[]')
I am trying to create a rating system.
I have an XML file, which has the follow information:
<?xml version="1.0" encoding="ISO-8859-1"?>
<PROGRAMMEDATA>
<PROGRAMME id="1">
<TITLE>Arrow</TITLE>
<IMAGE>img/arrow.jpg</IMAGE>
<POINTS>0</POINTS>
</PROGRAMME>
...etc
<PROGRAMMEDATA>
I then have a form, with programme options and 1 to 5 score.
<form>
<select id="name">
<option selected value=""></option>
<option value="1">Arrow</option>
<option value="2">You, Me and Dupree</option>
<option value="3">Fargo</option>
<option value="4">Flash</option>
</select>
<select id="rating">
<option selected value="">stars</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="submit" value="Submit rating" onClick="saveRating()" />
</form>
The idea is you can choose a programme and then choose a rating. You can then submit that and the rating will then be added to the corresponding programme in the XML file.
I have tried to capture the form values with javascript, but I then don't know how to store the value in the XML file.
var name = document.getElementById("name").value;
var rating = document.getElementById("rating").value;
Another way I've thought about is using PHP, and using DOMDocument, however I can't get it to append the POINTS, it only adds to the bottom of the XML file.
Any help greatly appreciated.
Something like this should work.
$file ="ratings_file.xml";
$title="test";
$image="img/arrow.jpg";
$points=0;
//load xml object
$xml= simplexml_load_file($ratings_file);
//assign title
$xml->PROGRAMME->title = $title;
//assign image
$xml->PROGRAMME->image = $image;
//assign points
$xml->PROGRAMME->points = $points;
//store the value into the file
file_put_contents($ratings_file, $xml->asXML());
i m new to jsp, what want to do is:
to set a listbox item as selected in html from jsp
in abc.jsp
<%
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection conn = DriverManager.getConnection("jdbc:odbc:dsnName","","");
Statement stmt=conn.createStatement();
String query="select * from tablen1 where id=1";
ResultSet rset=stmt.executeQuery(query);//suppose only one record is selected or fetched
String data=rset.getString(2);//i want this value to be shown in listbox of html form as selected when that form get opened
..............
......
%>
<form>
.......
......
<select name="paper" onBlur="f_papper();" >
<option value="">---SELECT---</option>
<option value="value1">item1</option>
<option value="value2">item2</option>
<option value="value3">item3</option>
<option value="value4">item4</option>
<option value="value5">item5</option>
<option value="value6">item6</option>
<option value="value7">item7</option>
</select>
</form>
plz tell me how can i make a listbox item as selected according to my need..
Any help would be greatly appreciated!
You can use below < select > of before < /body >
<script>
document.getElementById('paper').value = '<%= data %>';
</script>
as suggested by #s3ib
OR
<select name="paper" onBlur="f_papper();" >
<option value="">---SELECT---</option>
<option value="value1" <%if("value1".equals(data)out.print("selected='selected'");%>>item1</option>
<option value="value2" <%if("value2".equals(data)out.print("selected='selected'");%>>item2</option>
...
</select>
The above code is ideal if you are generating the options using loop
<select name="paper" id="paper" onBlur="f_papper();" >
<option value="">---SELECT---</option>
<option value="value1">item1</option>
<option value="value2">item2</option>
<option value="value3">item3</option>
<option value="value4">item4</option>
<option value="value5">item5</option>
<option value="value6">item6</option>
<option value="value7">item7</option>
</select>
<script>
$('#paper').val('<%= data %>');
</script>
This would be one way of doing it using jQuery.
EDITED:
Or if you dont want to use jQuery, you can use pure JavaScript also like that:
<script>
document.getElementById('paper').value = '<%= data %>';
</script>
<select name="paper" >
<option value="">---SELECT---</option>
<option value="value1" selected="">item1</option> //this value selected
<option value="value2" >item2</option>
<option value="value3">item3</option>
<option value="value4">item4</option>
<option value="value5">item5</option>
<option value="value6">item6</option>
<option value="value7">item7</option>
</select>
this tips may help you...
I'm new posting here, have visited several times over the years to read every ones ideas.
My issue is I have a form with 2 select boxes, second one populated with values upon selection in the first. The second holds a url value which you got to upon submit.
This function works perfectly using the onchange but on submit only the first of the second select list urls work. I can swap them but only the first works, all the others only pass the primary url followed by a crosshatch '#'.
<script>
$(document).ready(function($){
$("#category").change(function() {
$('select[name="product"]').removeAttr("name").hide();
$("#" + $(this).val()).show().attr("name", "product");
});
/* ' This works on all
$(".product").change(function() {
document.location = $(this).val();
});
*/
/* this only passes url on first product option list else passes opening url + #*/
$('#discover').submit(function() {
document.location = $(".product").val();
return false;
});
});
</script>
<div id="discover-box">
<form id="discover" method="post">
<fieldset>
<p class="category">
<label class="title">Category:</label>
<select id="category" name="category">
<option value="#" selected="selected">Choose category</option>
<option value="accommodation">Accommodation</option>
<option value="food">Food</option>
<option value="explore">Explore</option>
</select>
<p><label>Sub-Category:</label>
<select id="accommodation" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="accommodation_category.asp?o=1&c=1">Motels</option>
<option value="accommodation_category.asp?o=2&c=2">Camping, Caravan & Holiday Parks</option>
<option value="accommodation_category.asp?o=3&c=3">B&B, Self-Contained Houses & Cottages</option>
<option value="accommodation_category.asp?o=4&c=4">Hotels</option>
<option value="accommodation_category.asp?o=5&c=5">Backpackers & Group Accommodation</option>
<option value="accommodation_category.asp?o=6&c=6">National Parks</option>
</select>
<select id="food" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="food_wine_category.asp?o=1&t=1&c=1">Restaurants & Cafes</option>
<option value="food_wine_category.asp?o=2&t=1&c=2">Pubs</option>
<option value="food_wine_category.asp?o=3&t=1&c=3">Bakeries & Takeaway</option>
<option value="food_wine_category.asp?o=4&t=1&c=4">Local Produce</option>
<option value="food_wine_category.asp?o=5&t=2&c=1">Mount Gambier Wine Region</option>
<option value="food_wine_category.asp?o=5&t=2&c=2">Other Limestone Coast Wine Regions</option>
</select>
<select id="explore" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="explore_category.asp?o=1">Top 10</option>
<option value="explore_category.asp?o=2">Arts, Crafts, Galleries & Museums</option>
<option value="explore_category.asp?o=3">Heritage, Antiques & Collectables</option>
<option value="explore_category.asp?o=4">Family Fun</option>
<option value="explore_category.asp?o=5">Caves & Sinkholes</option>
<option value="explore_category.asp?o=6">Parks & Gardens</option>
<option value="explore_category.asp?o=7">Walks & Drives</option>
<option value="explore_category.asp?o=8">Kanawinka Geotrail</option>
<option value="explore_category.asp?o=9">Retail</option>
<option value="explore_category.asp?o=10">Recreation, Leisure & Adventure</option>
</select>
</p>
<p class="buttons">
<input type="image" src="images/submit-red.png" Value="submit">
</p>
</fieldset>
</form>
</div>
because $(".product").val(); will find first occurrence of DOM having class product so in any case it will fetch first one... u can do this using
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});
Open Fiddler (fiddler2.com) and watch the post go past. I find that generally when more than one control on a page uses the same name, the browser actually passes all of them, but the server-side framework expecting each post parameter to be unique, ignores all but the last one.
when you submit , you have only one select box with attribute name ,so you can select the selected value by that attribute
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});