|
JavaScript - Appending Value From Filter Dropdown Or Search Field To An Existing Query String
Hey all,
I'm in process of writing my own script (I don't want to use any jquery plugins) to render a table and allow for filtering/searching. So when user clicks on link, by default there will be parameters passed in query string as you can see in the setDefaults private method below. However, I'm stuck trying to figure out the best way to append values selected from filter dropdown to the query string. I know it will involve something along the lines of $("select").change(function(){var option = $(this).val()}). But I am having difficulty figuring out how to incorporate it with this. I would like to make use of the below buildFilter function somehow: Code: (function($){
var listview = $('#listview');
var lists = (function(){
var criteria = {
drop_filter: {
check: function(value){
if(value)
return
},
msg: "Loading..."
},
search_filter: {
check: function(value){
if(value)
return
},
msg: "Loading..."
}
}
var handleFilter = function(){
}
return {
create: function(component){
var component = component.href.substring(component.href.lastIndexOf('#') + 1);
return component;
},
setDefaults: function(component){
var parameter = {};
switch(component){
case "sites":
parameter = {
'order': 'site_num',
'per_page': '20',
'url': '/sites'
}
}
return parameter;
},
buildFilter: function(){
if(event == "change")
return criteria.drop_filter();
}
}
})();
$('#dashboard a').click(function(){
var currentComponent = lists.create(this);
var custom = lists.setDefaults(currentComponent);
initializeTable(custom);
});
var initializeTable = function(custom){
var defaults = {};
var query_string = $.extend(defaults, custom);
var params = [];
$.each(query_string, function(key,value){
params += key + ': ' + value;
})
alert(params);
}
})(jQuery)
Thanks for any response. Similar TutorialsIn this case, Let's take Google Search as example: The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question. This code is used in Fiddler(It's a Man-in-the-middle proxy) Code: if (oSession.uriContains("&q=")) // oSession is a Fiddler object session // uriContains() function, checks for case-insensitive string from the URI
{
var str = oSession.fullUrl;
var sAppend = "test1+test2+test3";
if (!oSession.uriContains(sAppend))
{
oSession.fullUrl = str.replace( "&q=","&q="+sAppend);
}
}
For those who are confused, It says, If &q= is present in the URI, replace/append &q= with &q=test1+test2+test3 Problem: It appends test1+test2+test3 instantly, when it sees &q= in the URL. Basically, how do I make it wait until I click the submit/search button Thank you. Update: I heard about Onsubmit() event, but not really familiar with it. How do I use it? like, should I go to google source page and edit the form id? Also, Any other methods besides Onsubmit()? I got no idea how to create a filter based on multiple drop menus to filter & sort data from php mysql query. Can anyone help me to write javascipt for this problem? My php mysql query as below:- mysql_select_db($database_winwin, $winwin); $query_rsMobile = "SELECT product_detail.product_Id, product_detail.product, product_detail.product_category, product_detail.product_brand, product_detail.product_name, product_detail.product_price, product_detail.thumbnail_url, product_detail.product_url, product_detail.product_status, product_detail.commission, product_detail.product_added_date FROM product_detail WHERE product_detail.product='Mobile Devices' AND product_detail.product_status='For sales'"; $rsMobile = mysql_query($query_rsMobile, $winwin) or die(mysql_error()); $row_rsMobile = mysql_fetch_assoc($rsMobile); $totalRows_rsMobile = mysql_num_rows($rsMobile); Whereby:- Product Brand: product_brand Product price: product_price Commission: commission Product name: product_name Product Thumbnail: thumbnail_url Product URL: product_url HTML for filters & sorter:- <div id="filters"> <form action="" method="post" name="form_filters" id="form_filters"> <table width="750" border="0"> <tr> <td>Brand:</td> <td><select name="productBrand" id="productBrand"> <option value="All Brands">All Brands</option> <option value="Sony Ericsson">Sony Ericsson</option> <option value="Samsung">Samsung</option> <option value="Nokia">Nokia</option> </select></td> <td>Price:</td> <td><select name="priceRange" id="priceRange"> <option value="All Price">All Price</option> <option value="Below RM1000">Below RM1000</option> <option value="RM1000-RM1999">RM1000-RM1999</option> <option value="RM2000 & Above">RM2000 & Above</option> </select></td> <td>Sort by:</td> <td><select name="productSort" id="productSort"> <option value="Sort By Name">Name</option> <option value="Sort By Price">Price</option> </select></td> <td><input name="Apply Filters" type="submit" value="Apply Filters"/></td> <td><input name="Reset Filters" type="Reset" value="Reset Filters"/></td> </tr> </table> </form> </div> Once user click on "Apply Filters" javascript has to sort list the product items. HTML for Pager (Value for total items, display some page numbers with hyperlink (1,2,3....10,11,12), hyperlink to previous page, hyperlink to next page) :- <div id="pager"> No. of items per page: <select name="NumOfItem" id="NumOfItem"> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select> Total Item: Pages ... Next... Previous </div> Javascript has to manage pager column. HTML for Product display:- <div id="product"> <div id="Thumbnail"> Here Javascript has to display Thumbnail image based on filters & sorter drop menus inputs. When click on this image page must redirect to "Product URL". </div> <div id="Price"> Here Javascript has to display "Price" based on filters & sorter drop menus inputs. When click on this "Price" page must redirect to "Product URL". </div> <div id="Commission"> Here Javascript has to display "Commission" image based on filters & sorter drop menus inputs. When click on this "Commission" page must redirect to "Product URL". </div> </div> Javascript has to repeat regions (<div id="product"></div>)based on "NumOfItem" drop menu (number of items display per page) and also update the pager column The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question. The problem is, when I keep issuing the request it keeps appending over and over again Code: if (oSession.uriContains("search?q="))
{
var str = oSession.fullUrl;
var sAppend = "+test1+test2+test3";
if (!oSession.uriContains(sAppend))
{
oSession.fullUrl = str.replace( "search?q=","search?q="+sAppend);
}
}
Can you please give me an example? I'm still new to programming. Thank you I am working on a site which is pretty old school.. i have a vertical drop down menu using javascript which uses <img src tag>.. Check the tab fountains at http://www.texaslakesandponds.com/index_html.html (it has a vertex and kasco dropdown) I want to add a similar dropdown for Aerators with the same format and color. I dont know how to do that since it uses a <ul><li> format and the image is called in the css class. Can someone please help me with the code. Using Javascript / jQuery, I'm trying to produce a series of dropdowns ("<select>") that have their options filtered as the user selects from them. For example: DROPDOWNS Field 1: - value_1 - value_2 Field 2: - value_3 Field 3: - value_4 - value_5 COMBINATIONS - value_1, value_3, value_5 - value_1, value_3, value_4 - value_2, value_3, value_5 When a user selects Field 3 - value_4, the unavailable options will be removed - ie, Field 1 - value_2 (there is no combination that allows value_2 and value_4 to be selected together). I have an array of the allowed combinations like this (although I can tweak the structure if necessary): Code: var combinations = [["value_1", "value_3", "value_5"], ["value_1", "value_3", "value_4"], ["value_2", "value_3", "value_5"]]; When a option is changed all the current entries are removed and only the allowed combinations added back in. Where I'm struggling is with how to find which combinations are acceptable based on what has already been selected. I'd really appreciate any pointers or just a fresh perspective on this because I seem to be going round in circles! Thanks! Hey there everyone. I'm a bit of a newb with javascript and php so apologies if this question is a bit simple, although I can't get my head round how to go about doing it. I have a search page where a user can type in a search box, or they can use an alphabetical list to search for the record they're looking for. Eg they click 'a' and all the records beginning with the letter 'a' appear. I'd also like to have it so that each record has a number of tags, and I'd then like to be able to filter records according to which tags have been selected - preferably using checkboxes. For example, perhaps the tags would be colours and the records represented shoes. There'd be checkboxes for blue, yellow, black, brown and so on. At first all colours would be shown, but if the user clicks on brown the all but the brown shoes dissappear. like I say, I'm new to learning php so please be gentle. Also I'm using Cakephp so if there's anyway to make it easier using Cake then I'd love to know. thanks Hello, I am needing the coding to do the follow: When a user makes a selection from a dropdown, the value is placed in a text input. SELECT >>> INPUT Thank you so much for your help! Hi Coders, I have a Javascript on my credit card page which populates the elements of a dropdown field (The Year field). It just works with Internet Explorer and not Firefox. Here is the script: <script type="text/javascript"> <% Dim orderDateYearx orderDateYearx = cStr(Year(Date)) %> yy="<%=orderDateYearx%>"; yyyy=parseInt(yy); yyyy=yyyy var listDocUpload = document.getElementById("expDate2"); var optn = document.createElement("OPTION"); optn.value = yyyy; yyyy=yyyy+"" optn.text = yyyy.replace("20",""); listDocUpload.options.add(optn); yyyy=parseInt(yyyy)+1 var optn2 = document.createElement("OPTION"); optn2.value = yyyy; yyyy=yyyy+"" optn2.text = yyyy.replace("20",""); listDocUpload.options.add(optn2); yyyy=parseInt(yyyy)+1 var optn3 = document.createElement("OPTION"); optn3.value = yyyy; yyyy=yyyy+"" optn3.text = yyyy.replace("20",""); listDocUpload.options.add(optn3); </script> The dropdown field in Firefox is just blank. I mean no elements reside within it. (but its clickable) Any ideas why this dropdown field in Firefox is not going to be populated? Thank you for all the comments. i m required to script the coding in which if we select an option from dropdown menu a text should be apprehend in disabled text field.. i dont have any idea about javascripting so sorry for being so dump... i need resultant in this form How do Google and Bing allow you to use the keyboard up and down keys to jump to the suggested search results. I know how to do the Ajax search part, I just can't figure out how to get the search suggestions selected, and fire their HREF tag upon clicking the Enter button. Basically I can do all this without any keyboard navigation but I need to hook in the keyboard like they do. Is there a simple example somewhere? Google and Bing's are super complex and I can't snoop how they pull it off. I am using javascript to search for the '*' character in a string (ie. 'username*:') but using search('\*') does not work. How do I search for it since the search function takes a regexp argument and * messes that up?
Hello everyone. I am completely new to javascript and am basically able to copy/paste code with some minor editing. What I am looking for is a way to have a 5 digit alphanumeric number generated inside a form field to be sent through php(mail). Any help would be greatly appreciated, and any more information I can give, I will gladly do so. Hi, I am trying to write some code that will test if a user enters a non-numeric character in an input text field, and if so, replaces it with a '0' Code:
<script type="text/javascript">
function IsNumVal (){
for (J=1; J<=3; J++){
if (isNaN(Number(document.getElementById('Intext' + J).value))){
document.getElementById('Intext' + J).value = 0;
}
}
}
</script>
<Body>
<table border="1" cellspacing="1" id = "Numbers">
<tr id="RowNum1">
<td ><input type="text" size = "5" name="Intext1" id="Intext1" value = "3"
onkeyup="IsNumVal()" /></td>
</tr>
<tr id="RowNum2">
<td><input type="text" size = "5" name="Intext2" id="Intext2" value = "9"
onkeyup="IsNumVal()" /></td>
</tr>
<tr id="RowNum3">
<td><input type="text" size = "5" name="Intext3" id="Intext3" value = "18"
onkeyup="IsNumVal()" /></td>
</tr>
</table>
</Body>
document.getElementById('Intext' + J).value = 0; doesn't work document.Schedule.'Intext' + J.value = 0; doesn't work document.Schedule.Intext2.value = 0; works, but I need to test each text field while looping, so I can't "hard code" the ID. Suggestions? Hello I have a form validation script which checks for empty fields and an email address. The empty fields part seems to work, but not the validation (as long as I type characters in the email field, it seems to be acceptable). Here is what I have: Code: //function to check for empty fields
function isEmpty(strfield1, strfield2, strfield3) {
//change "name, email and subject" to your field names
strfield1 = document.forms[0].ContactUs_Name.value
strfield2 = document.forms[0].ContactUs_Email.value
strfield3 = document.forms[0].ContactUs_Subject.value
//name field
if (strfield1 == "" || strfield1 == null || !isNaN(strfield1) || strfield1.charAt(0) == ' ')
{
alert("\"Name\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//url field
if (strfield2 == "" || strfield2 == null || strfield2.charAt(0) == ' ')
{
alert("\"Email\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//title field
if (strfield3 == "" || strfield3 == null || strfield3.charAt(0) == ' ')
{
alert("\"Subject\" is a mandatory field.\nPlease amend and retry.")
return false;
}
return true;
}
//function to check valid email address
function isValidEmail(strEmail){
validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
strEmail = document.forms[0].email.value;
// search email text for regular exp matches
if (strEmail.search(validRegExp) == -1)
{
alert('A valid e-mail address is required.\nPlease amend and retry');
return false;
}
return true;
}
//function that performs all functions, defined in the onsubmit event handler
function check(form){
if (isEmpty(form.ContactUs_Name)){
if (isEmpty(form.ContactUs_Email)){
if (isEmpty(form.ContactUs_Subject)){
if (isValidEmail(form.email)){
return true;
}
}
}
}
return false;
}
</script>
</head>
<body bgcolor="#ECECEC" text="#000000">
<h3>Form validation with JavaScript</h3>
<form name="theform" method="post" action="#" onSubmit="return check(this);">
Name:<br />
<input name="ContactUs_Name" type="text" /><br />
E-Mail:<br>
<input name="ContactUs_Email" type="text" id="ContactUs_Email" />
<br />
Subject:<br>
<input name="ContactUs_Subject" type="text" id="ContactUs_Subject" />
<br>
I just wondered, is it here that the problem lies: if (isValidEmail(form.email)){ Thanks. Steve I would like to find some direction or help to solve an issue I have. I would like to find a way to search for a string of content on my webpage and return the string, or at least part of the string into the URL... Example of the content on my page: ----- Welcome, John Adams Log Out Welcome to your own content, based on your settings provided. Feel free to download the content you need. ----- Fairly straightforward. Now I would like to create a function that will look at the page and "copy" the string of content beginning with "welcome" and ending with "out" Next, I would like to remove the "welcome," and "log out" and have the name remain. Then, post the name into the URL to be passed onto the next page for me to use as more personalization/dynamically driven content; Such as: http://www.noname.com/index.html?string=John-Adams Hopefully you can help. Hello all I have search this topic but I can't really get a straightforward answer. I have been given a small assignment to make 4 checks. I'm not looking for handouts, the assignment itself is complete, but I just have this single problem. Check 1: make sure a radio button is checked (no problem) Check 2: make sure a string does not contain restricted characters (no problem) Check 3: make sure a string is of numbers only (issue 1) Check 4: make sure a string follows a certain format (issue 2) My problem lies with the <string>.value.search(/\D/) and <string>.value.search(/\d/). Dreamweaver does not want to recognize this as valid code. In turn, checks 3 and 4 do not execute. I have checked and re-checked for possible syntax errors, to no avail. I will attach my entire code and a screenshot of how Dreamweaver is handling my code. Code: <html>
<head>
<title>Payment Form</title>
<script type="text/javascript">
function errorCheck()
{
//start card must be checked
if ((document.form1.pmtType[0].checked == false) && (document.form1.pmtType[1].checked == false) && (document.form1.pmtType[2].checked == false) && (document.form1.pmtType[3].checked == false))
{
window.alert("Please select one of the credit cards")
return false
}
//end card must be checked
//start name character check
badChar = ";:!@#$%^*+?";length = badChar.length;
for (i=0; i<length; i++)
{
if (document.form1.Name.value.indexOf(badChar.charAt(i)) != -1)
{
window.alert("The name you entered contains illegal characters (;:!@#$%^*+?). Please re-enter your name")
document.form1.Name.focus()
document.form1.Name.select()
return false
}
}
//end name character check
//start card check for digits only
if (document.form1.card.value.search(/\D/) != -1)
{
window.alert("Your bank account number should consist of digits only")
document.form1.card.focus()
document.form1.card.select()
return false
}
//end card check for digits only
//start exp date validation
var xmonth;
if (document.form1.date.value.search(/\d\d\/\d\d\d\d/) == 0) //proper format
{
xmonth = document.form1.date.value.charAt(0) + document.form1.date.value.charAt(1)
if (xmonth<01) || (xmonth>12)
{
window.alert("Please enter a value between 01 and 12 for MM")
document.form1.date.focus()
document.form1.date.select()
return false
}
else
{
return true
}
}
else
{
window.alert("Please enter the date in proper format MM/YYYY")
document.form1.date.focus()
document.form1.date.select()
return false
}
//end exp date validation
return true
}
</script>
</head>
<body>
<h1>Payment</h1>
<form name="form1" onSubmit="return errorCheck()" action="mailto:johndoe@address.com" method="post">
<p>
Credit card:
<input type="radio" name="pmtType" value="Visa">Visa
<input type="radio" name="pmtType" value="MasterCard">MasterCard
<input type="radio" name="pmtType" value="American Express">American Express
<input type="radio" name="pmtType" value="Discover">Discover
</p>
<p>
Name on Credit Card:
<input type="text" name="Name" size="50">
</p>
<p>
Credit Card Number:
<input type="text" name"card" size="20" maxlength="20">
(No spaces or dashes, please)
</p>
<p>
Expiration Date:
<input type="text" name="date" size="7" maxlength="7">
(MM/YYYY)
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
</html>
Thanks in advance, Matt Hey all, I have an issue building a query string. Basically, I have this: /sites?order=site_numper_page=20& But I would like to convert it to this: /sites?order=site_num&per_page=20 I have tried this to check if the current iterator is less than the length of the object and if so, then add the "&", otherwise, don't. But it doesn't seem to work: Code: $.each(query_string, function(key,value){
params += key + '=' + value;
if((value + 1) != query_string.length){
params += "&";
}
})
Thanks for any response. Hello everybody ! I'm searching for a javascript function that convert array to query string. Like this example : Code: var array = { a=1, b=2, c=3 };
to
a=1&b=2&c=3
I'm using jQuery and the function .serialize() convert only html forms. Does someone know a function to do this ? Thanks ! Hi I am trying to create a query string similar to the one available he http://andrewu.co.uk/tools/request/e.../example1.html The problem that I am having is that I have more than one button on my page and even though my id's are unique all of my data is displaying on the action page at the same time. The code that i am using for my buttons is: Code: <label for="name_1">Name:</label>
<input type="text" name="name1" id="name_1" tabindex="1" size="40" value="Donald Duck" />
<br />
<br />
<input type="submit" id='view1' value="Submit" tabindex="2" />
<label for="name_1">Name:</label>
<input type="text" name="name2" id="name_2" tabindex="1" size="40" value="Mickey Mouse" />
<br />
<br />
<input type="submit" id='view2' value="View" tabindex="2" />
I have a lot more than 2 buttons on my page. when a button is clicked I would like to be able to get the values from the query string and only see the values for the button that was clicked like this one: http://andrewu.co.uk/tools/request/e...ndrew+Urquhart but instead I am getting Name: Donald Duck, Name: Mickey Mouse. What would I have to add or change to obtain just one Name to display at a time but have it be different depending on which button is pressed? |
|||||||