Search Results

Search found 435 results on 18 pages for 'onchange'.

Page 14/18 | < Previous Page | 10 11 12 13 14 15 16 17 18  | Next Page >

  • jQuery Validate on form submitted by JavaScript

    - by Daniel
    My form is submitted by a link using JavaScript, but I am also trying to validate the from justing jQuery validate. The validation doesn't work when submitted by the link, but it does if I change the link to a submit button. What am I doing wrong? My form: <form id="findmatch" method="post" action="search"> <div> <label class="formlabel">Match Type <input type="text" name="matchtype" id="matchtype" class="forminput" /> </label> <label class="formlabel">Location (postcode) <input type="text" name="location" id="location" class="forminput" /> </label> <label class="formlabel">Radius (miles) <input type="text" name="Radius" id="Radius" class="forminput" /> </label> <label class="formlabel">Keywords <input type="text" onblur="javascript:usePointFromPostcode(document.getElementById('location').value, showCompleteLatLng)" onchange="javascript:usePointFromPostcode(document.getElementById('location').value, showCompleteLatLng)" name="keywords" id="keywords" class="forminput" /> </label> <input id="lat" class="hidden" name="lat" type="text" value="" /> <input id="lon" class="hidden" name="lon" type="text" value="" /> <a href="javascript:document.getElementById('findmatch').submit();" onmouseover="javascript:usePointFromPostcode(document.getElementById('location').value, showCompleteLatLng)" class="submit">Search</a> </div> </form> And my jQuery is <script type="text/javascript"> $(document).ready(function () { $("#findmatch").validate({ rules: { location: "required", Radius: { required: true, digits: true }, keywords: "required" }, messages: { location: "Please enter your postcode", Radius: { required: "Please enter a radius", digits: "Please only enter numbers" }, keywords: "Please enter the keywords you wish to search for" } }); }); </script>

    Read the article

  • Using $.post for simple ajax test, what am I missing?

    - by Cortopasta
    Playing with jquery for the first time, and I'm trying to get a simple AJAX set up working so I can better understand how things work. Unfortunately, I don't know a whole lot. Here's the HTML with the script: <html> <head> <title>AJAX attempt with jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function ajax(str){ $("document").ready(function(){ $.post("ajaxjquerytest.php",str,function(){ $("p").html(response); }); }); </script> </head> <body> <input type="text" onchange="ajax(this.value)"></input> <p>Age?</p> </body> </html> And here is the PHP it's talking to: <?php $age = $_POST['age']; if ($age < 30) { echo "Young"; } else if ($age > 30) { echo "Old"; } else { echo "you're 30"; } ?>

    Read the article

  • svg mouseup event not fired in IE9, unless the debugger is open

    - by Roberto Lupi
    I am using d3 to build a simple chart that the user can edit interactively with the mouse. It works on in all modern common browser (Chrome, Firefox, Safari), except for Internet Explorer 9 where I can start to drag an item but I never get the mouseup event. The strangest bit is that, if I open the debugger, the page works percetly on Internet Explorer 9 as well. My code looks like this: item.append("svg:circle") .attr("class", "handle") .attr("opacity",0.5) .attr("stroke","gray") .attr("cx", bx(0.5)-bx(0)) .attr("r", 10) .style("cursor", "crosshair") .style("pointer-events", "all") .call(d3.behavior.drag() .on("dragstart", function() { dragTarget = d3.select(this); }) .on("drag", function() { this.parentNode.appendChild(this); // put us on the front, not really needed var dragTarget = d3.select(this); dragTarget .attr("cy", function() { return d3.event.dy + parseInt(dragTarget.attr("cy"))}); }) .on("dragend", function(d, i) { newY = parseInt(d3.select(this).attr("cy")); newValue = y.invert(newY); var serieNo = this.__data__.serieNo; console.log([serieNo+1,i+1]); data[serieNo+1][i+1] = newValue; updateBarChart(); onchange(); }) );

    Read the article

  • JSON onFailure issue

    - by Mikey1980
    I’m having trouble getting a AJAX/JSON function to work correctly. I had this function grabbing value from a drop down box but now I want to use an anchor tag to set it's value. I thought it would be easy to just use the onClick event to pass string to the function I was using for the drop down box but I get the alert in JSON onFailure event even though data gets added to MySQL. I tried removing the alert from onFailure event but then it doesn't add the data. The drop down still continues work work fine, no alerts. (I should note that removing the alert also broke my drop down box) 1st I add an onClick event… <a href="<?php echo Settings::get('app.webroot'); ?>?view=schedule&action=questions" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('bre','','template/images/schedule/bre_f2.gif',1)" onclick="assignCallType('testing')";> 2nd I check main.js.php function assignCallType(type) { alert(type); new Request.JSON({ url: "ajax.php", onSuccess: function(rtndata,txt){ if (rtndata['STATUS'] != 'OK') alert('Status was not okay'); }, onFailure : function () { alert("onFailure") } }).get({ 'action': 'assignCallType', 'call_type': type }); } 3rd Ajax.php: the variable is back in PHP and values get added to MySQL but I get the Alert in the JSON onFailure event if ($_GET['action'] == "assignCallType") { if ($USER->isInsideSales()) { $call_type = $_GET['call_type']; $_SESSION['callinfo']->setCallType($call_type); $_SESSION['callinfo']->save($callid); echo json_encode(array('STATUS'=>'OK')); } else { echo json_encode(array('STATUS'=>'DENIED')); } } Any idea where I am going wrong. The only difference between this and the working drop down is how the function was called, I used onchange="assignCallType(this.value)".

    Read the article

  • Dropdown not working in some IE 6 browsers

    - by James Thomas
    We unfortunately find ourselves having to support our product in IE 6 because some of our largest users use it. One of them called today and told me that one of the dropdowns doesn't work when he clicks on it - it simply selects the first item. I checked the markup and the entire contents of the select control are being sent: <select onchange="SDateFilter_S('#ctlDateRange')" size="1" name="ctlDateRange" style="width:100px;"> <option selected="selected" value="0"> All Dates </option><option value="1"> Within </option><option value="2"> Before </option><option value="3"> After </option><option value="4"> Between </option><option value="5"> Last </option><option value="6"> Since </option> </select> This is done in ASP .NET but I am fairly certain the issue isn't with ASP .NET as when I try it in my copy of IE 6, it works correctly. Do you have any idea what would cause a dropdown list in some copies of IE 6 to effectively not work?

    Read the article

  • How to call Java code from Javascript and assign a value to a JSP page?

    - by Frank
    I have the following "form.jsp" program, it generates a drop down list, below the list is a textarea to show the display_name of a selected item, now when user selected a item, it shows the selected item id in the textarea, how to call the DB from my code and get the display_name in the javascript so the result display_name will be shown in the textarea ? <%@ taglib prefix="s" uri="/struts-tags"%> <script type="text/javascript"> function callme(Display_Name) { alert('callme : Display_Name = '+Display_Name); var v=document.getElementById('hiddenValue').value; alert('hiddenValue : v = '+v); document.getElementById('defaultDisplayName').value=Display_Name; } </script> <s:hidden id="pricelist.id" name="pricelist.id" value="%{pricelist.id}"/> <div class="dialog"> <table> <tbody> <s:if test="%{enableProductList}"> <tr class="prop"> <td valign="top" class="name required"><label for="description">Product:</label></td> <td valign="top"> <s:select id="productPrice.product" name="productPrice.product" headerKey="0" headerValue="-- Select Product --" list="products" listKey="id" listValue="name" value="productPrice.product.id" theme="simple" displayName1='value' onchange="callme(value)" /> <s:hidden id="hiddenValue" name="hiddenValue" value="123"/> </td> </tr> </s:if> <tr class="prop"> <td valign="top" class="name"><label for="description">Default Display Name:</label></td> <td valign="top"><s:textarea id="defaultDisplayName" name="defaultDisplayName" theme="simple" readonly="true"/></td> </tr> See attached image for details, in the DB, a product table has the product Id and display_name, I know the Id, how to use Java to get the display_name and plug it into the jsp ?

    Read the article

  • [FLEX] Images won't dynamically refresh

    - by Bridget
    I am writing a Flex application to receive xml from an httpservice. That works because I can populate a datagrid with the information. The xml sends image pathnames. A combobox sends a new HttpService call onChange. This repopulates the datagrid and puts new images in the folder that flex is accessing. I want to dynamically change the image without changing the pathname of the image. <mx:Canvas id="borderCanvas"><mx:Canvas id="dropCanvas"> <mx:Tile id="adTile"><mx:Image></mx:Image> </mx:Tile></mx:Canvas></mx:Canvas> This is my component. I assign my Image sources using this code: var i:Number = 0; while ( i <= dg_conads.rowCount){ var img:Image = new Image(); img.source = null; img.source = imageSource+i+".jpg"; adTile.addChild(img); i++; } My biggest problem is that the images are not refreshing. I get the same image even though I've prevented caching from the HTML wrapper and the ASP.Net website. The image automatically loads in the folder and refreshes in the folder but I can't get the image to refresh in the application. I've tried removeAllChildren(); delete(adTile.getChildAt(0)); and neither worked.

    Read the article

  • Multiple instances of the same Async task (Windows Phone)

    - by Bart Teunissen
    After googeling for ages, and reading some stuff about async task in books. I made a my first program with an async task in it. Only to find out, that i can only start one task. I want to run the task more then once. This is where i found out that that doesn't seem to work. to be a little bit clearer, here are some parts of my code: InitFunction(var); This is the Task itself public async Task InitFunction(string var) { _VarHandle = await _AdsClient.GetSymhandleByNameAsync(var); _Data = await _AdsClient.ReadAsync<T>(_VarHandle); _AdsClient.AddNotificationAsync<T>(_VarHandle, AdsTransmissionMode.OnChange, 1000, this); } This works like a charm when i execute the task only once.. But is there a possibility to run it multiple times. Something like this? InitFunction(var1); InitFunction(var2); InitFunction(var3); Because if i do this now (multiple tasks at once), the task it wants to start is still running, and it throws an exeption. if someone could help me with this, that would be awesome! ~ Bart

    Read the article

  • <h:selectOneMenu> ValueChangeListener Problem

    - by Ehsun
    I have two <h:selectOneMenu> tags on my form like this: <h:outputText value="#{lbls.incomeType}:"/> <h:selectOneMenu id="incomeType" label="#{lbls.incomeType}" onchange="submit();" valueChangeListener="#{price.earnTypeValueChanged}" immediate="true"> <f:selectItems value="#{price.earnTypes}"/> <f:converter converterId="ir.khorasancustoms.EarnTypeConverter"/> </h:selectOneMenu> <h:message for="incomeType" infoClass="info" errorClass="error" warnClass="warning" fatalClass="fatal"/> <h:outputText value="#{lbls.earnAttribute}:"/> <h:selectOneMenu id="earnAttribute" label="#{lbls.earnAttribute}" value="#{price.price.earnAttribute}"> <f:selectItems value="#{price.earnAttributes}"/> <f:converter converterId="ir.khorasancustoms.EarnAttributeConverter"/> </h:selectOneMenu> <h:message for="incomeType" infoClass="info" errorClass="error" warnClass="warning" fatalClass="fatal"/> <h:messages globalOnly="true" layout="table" infoClass="info" warnClass="warning" errorClass="error" fatalClass="fatal"/> <h:button value="#{lbls.cancel}" outcome="index"/> <h:commandButton value="#{lbls.ok}" action="#{price.save}"/> the handler in the bean looks like this: public void earnTypeValueChanged(ValueChangeEvent event) { EarnType newEarnType = (EarnType) event.getNewValue(); earnAttributes = newEarnType.getAttributes(); FacesContext.getCurrentInstance().renderResponse(); } Everything works fine, except the user needs to press the OK button twice because the first one fires the earnTypeValueChanged. How is that caused and how can I fix it? Update 1: public void earnTypeValueChanged(ValueChangeEvent event) { EarnType oldEarnType = (EarnType) event.getOldValue(); EarnType newEarnType = (EarnType) event.getNewValue(); earnAttributes = newEarnType.getAttributes(); if (!newEarnType.equals(oldEarnType)) { FacesContext.getCurrentInstance().renderResponse(); } }

    Read the article

  • Disabling Text field with Javascript when value in drop down box is from mysql

    - by SteveJ313
    Hi I have a simple script in HTML, using a dropdown menu. When the value 1 is selected, the user can write in the text field, if value 2 is selected, it disables the text field. However, i changed the values of the dropdown menu, so that one value was from a mysql table(using PHP) and the other remained 'option value='1''. Yet now neither text field is disabled. Below is the code. `<script type="text/javascript"> function findselected() { if (document.form.selmenu.value == <?php echo $id; ?>) { document.form.txtField.disabled=true; // return false; // not sure this line is needed } else { document.form.txtField.disabled=false; // return false; // not sure this line is needed } } ` And the PHP section if(mysql_num_rows($SQL) == 1) { echo "<select name='selmenu' onChange='findselected()'>"; echo "<label>TCA_Subject</label>"; while ($row=mysql_fetch_array($SQL)) { echo "<option value='$id'>$thing</option>"; echo "<option value='2'>Choice 2</option>"; } } echo "<option value=$userid>'Choice 1'</option>"; ?> <option value='2'>Choice 2</option>"; </select> I have tried taking the second option value out of the loop, putting it into html, editing the variable in the javascript function. There is not a fault with the PHP as it is retrieving the right results and displaying it, yet the text field doesnt become disabled. Does anyone know of a possible solution? Thanks

    Read the article

  • ASP.NET DropDownList control doesn't postback correctly inside of UserControl

    - by RichardAZ
    I have a situation where a DropDownList control is not posting back correctly. The AutoPost property is set to true, so the postback does happen, but the SelectedValue is not set to the correct value. In addition, the onSelectedIndexChanged event doesn't fire. The exact same code works perfect fine on an ASPX page, but does not work in a ASCX control. I have tried all the obvious things, I hope, trying to figure this one out, but no luck so far. I have even investigated what comes back in Request.Form["__EVENTTARGET"] and __EVENTARGUMENT. __EVENTTARGET does point to the drop down list, but the argument is empty. Can the folks of StackOverflow help lead me in the right direction to debug this issue. Of course, it is further complicated by master pages and the usual overcomplication of ASP.NET. Here is the code: <div> <asp:DropDownList ID="testDrop" runat="server" AutoPostBack="true" EnableViewState="true" onselectedindexchanged="testDrop_SelectedIndexChanged"> <asp:ListItem Value="1" Text="1">1</asp:ListItem> <asp:ListItem Value="2" Text="2">2</asp:ListItem> </asp:DropDownList> </div> And here is the generated html: <select id="ctl00_MainContent_rptAccordion_ctl00_statControl_testDrop" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$rptAccordion$ctl00$statControl$testDrop\',\'\')', 0)" name="ctl00$MainContent$rptAccordion$ctl00$statControl$testDrop"> <option value="1" selected="selected">1</option> <option value="2">2</option> THANKS!

    Read the article

  • jquery how to determine event triggered with .trigger() or with .event()

    - by Tony_M
    I have a selectbox. <select onchange="javascript:changePropertyDropdown('3','0','0','1',this.value,'80','50'); hideCart()" size="1" class="inputbox" id="property_id_prd_3_0_1" name="property_id_prd_3_0_1[]"> <option selected="selected" value="0">Select an option</option> <option value="1">38</option> <option value="2">40</option> <option value="3">42</option> <option value="4">43</option> </select> and some button which triggered change event for selectbox : $('div.attribute_wrapper select').bind('cascadeSelect',function(e, pAttr){ $(this).val(pAttr); }); Call it like this (prodAttr come with ajax): $('div.productImgGallery img').click(function(){ $('div.attribute_wrapper select').trigger('change'); }; $('div.attribute_wrapper select').change(function(){ $(this).trigger('cascadeSelect',prodAttr); }); When i call it like this, hideCart() function fires too. I need to call function changePropertyDropdown() only whith .trigger(), and changePropertyDropdown() + hideCart() on change event. How can i do this ?

    Read the article

  • html/js: Refresh 'Select' options

    - by framara
    Hi, There's a class 'Car' with brand and model as properties. I have a list of items of this class List<Car> myCars. I need to represent in a JSP website 2 ComboBox, one for brand and another for model, that when you select the brand, in the model list only appear the ones from that brand. I don't know how to do this in a dynamic way. Any suggestion where to start? Thanks Update Ok, what I do now is send in the request a list with all the brand names, and a list of the items. The JSP code is like: <select name="manufacturer" id="id_manufacturer" onchange="return getManufacturer();"> <option value=""></option> <c:forEach items="${manufacturers}" var="man"> <option value="${man}" >${man}</option> </c:forEach> </select> <select name="model" id="id_model"> <c:forEach items="${mycars}" var="car"> <c:if test="${car.manufacturer eq man_selected}"> <option value="${car.id}">${car.model}</option> </c:if> </c:forEach> </select> <script> function getManufacturer() { man_selected = document.getElementById('id_manufacturer').value; } </script> How do I do to refresh the 'model' select options according to the selected 'man_selected' ?

    Read the article

  • Which other event handler than click could i use?

    - by Gaelle
    I have a jQuery question, and I really think it is a silly one : i'm a beginner in JS and jQuery... I'm using $("#myLink").click(function(){ $(".myClassToShow").show(); $(".myClassToHide").hide(); }); to hide elements with class myClassToHide as a class attribute and show elements with class myClassToShow as a class attribute. I think this is really easy to understand :) I didn't think it would hide every elements with the good class, but, well, it works. My worry here is that my elements show and hide only for few seconds : the time my mouse click on the link. I would like to make myClassToShow elements remaining on the screen, when i already clicked my link, and myClassToHide elements really hide. For example, on the johann Hammarstrom's website, when you click on "Print", all his works which are not print gone hide, and only the printing one remain. That's kinda what i want. I searched using Firebug, but couldn't find which kind of event he used. I know a onchange is not the correct answer, so what? Could you help me please?

    Read the article

  • Get & set drop down value using jQuery.

    - by Muhammad Sajid
    If user select an option from dropdown it will shown it a textbox but if he select option having value "Other" then a row will appear to type value for other. my code works fine except when option value is not equal to "Other" <script type="text/javascript"><!-- function setAndReset(box) { if(box.value == 'Other'){ $("#ShowHide").hide(); } document.FormName.hiddenInput.value = box.value; } //--> </script> <body bgcolor="#ffffff"> <form id="FormName" action="" method="get" name="FormName"> <select name="choice1" size="1" onchange="setAndReset(this);"> <option value="one">first</option> <option value="two">second</option> <option value="three">third</option> <option value="other">Other</option> </select> <input type="text" name="hiddenInput" value=""> <tablt><tr id="ShowHide"><td> <input type="text" name="otherInput"> </td></tr></table> <input type="submit" name="submitButtonName"> </form> </body> but it does not show/hide & does not set value in textbox. If it's solve using jquery then i will be thankful to you for you code. Thanks.

    Read the article

  • Script (AJAX or JS) does not work properly in IE8

    - by Uno Mein Ame
    I have a js/ajax script at http://worldcitiesdatabase.info/test1/ I just received a complaint that it does not work properly in IE8. Onchange seems to work, but then the next menu is not populated. Can you please help me figure it out? Thanks Not sure what the problematic part of the code is. Here is my guess: if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } newList=""; xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { newList = xmlhttp.responseText; m1.innerHTML=newList; m1.disabled=false; } if (menuname=="showCountry") { var c1=document.getElementById('showRegion'); if (c1.options.length==2) { if (c1.options[0].value=='NONE') { c1.remove(0); c1.value='0'; reloadmenu(c1); } } } } xmlhttp.open("GET",newFile+".php?q="+menuvalue,true); xmlhttp.send();

    Read the article

  • Display the value of a select list without a button

    - by Max Zeygelshefer
    How can I get the value to be displayed after the selection from the list is made, without the use of a button. I tried to implement an onChange event for the select list, and doing away with the button, but I can't get it to work. I'd like the value (1,2,3) to display below the select box after an option (a,b,c) is selected. <script> function displayResult() { this.nextSibling.nodeValue = document.getElementById("mySelect").value; } </script> <body> <form> <select id="mySelect" style="width:220px"> <option value="1">a</option> <option value="2">b</option> <option value="3">c</option> </select> </form> <button type="button" onclick="displayResult.call(this)">List Locations</button>

    Read the article

  • HTML Select box not rendering correct

    - by PHPnooblet
    I don't know exactly why but my Selectbox is not rendering correctly, the underneath is missing. .zijdev{ margin-top:0; margin-bottom:0; } HTML: <p class="zijdev"> Aantal toestanden: <select id="aantToestanden" onchange="FilterByToestanden()"> <option></option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> </select> </p>

    Read the article

  • how to get a text box with the value selected in select box

    - by udaya
    hi This is my view page here i have a select box <tr> <td>Chidren</td> <td>:</td> <td><select style="font-family: verdana; min-width: 52px;" id="ddlChildren" name="ddlChildren" class="required" onChange="return Check_Adult('dd1Age')" > <option value="">children</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option></select> </td> </tr> with the value from select box if the value is one then i need to create a text box if the value is two then i need to create two ,,, and respectively In my Check_Adult javascript function ,,I did this function Check_Adult() { var Child= document.getElementById('ddlChildren').value; if( Child==1) { <? echo '<input type="text" name="child" id="child">' ?> } } But the text box is not created how to create it?

    Read the article

  • Need help in javascript

    - by raja
    Hi: I am getting the error for the below code. Please help me out. <html><head> <title>(Type a title for your page here)</title> <script language=JavaScript> function check_length(my_formm,fieldName) { alert(fieldName); alert(document.my_formm.fieldName.value); } </script> </head> <body> <form name=my_form method=post> <input type="text" onKeyPress=checkCompanyName(); onChange=check_length("my_form","my_text"); name=my_text rows=4 cols=30 value=""> <br> <input size=1 value=50 name=text_num> Characters Left </form> </body> </html>

    Read the article

  • PHP: Need a double check on an error in this small code

    - by Josh K
    I have this simple Select box that is suppose to store the selected value in a hidden input, which can then be used for POST (I am doing it this way to use data from disabled drop down menus) <body> <?php $Z = $_POST[hdn]; ?> <form id="form1" name="form1" method="post" action="test.php"> <select name="whatever" id="whatever" onchange="document.getElementById('hdn').value = this.value"> <option value="1">1Value</option> <option value="2">2Value</option> <option value="3">3Value</option> <option value="4">4Value</option> </select> <input type="hidden" name ='hdn' id="hdn" /> <input type="submit" id='submit' /> <?php echo "<p>".$Z."</p>"; ?> </form> </body> The echo call works for the last 3 options (2,3,4) but if I select the first one it doesnt output anything, and even if i change first one it still doesnt output anything. Can someone explain to me whats going on, I think it might be a syntax issue.

    Read the article

  • Overriding CSS style 'display:none' in javascript

    - by jsarma
    I'm trying to add a checkbox toggle that hides and shows list elements by changing their style display attribute from "none" to "inline", but it's not working. I'm setting the attribute's style to "display:none" in the CSS file. Then I set it to "display:inline" in javascript when someone checks a box. The javascript is successfully changing the element's property to inline, but for some reason the element remains invisible. If I do the opposite, by setting the display to inline in the CSS and overriding it to none in the javascript, it works fine. I don't see why this would work one way but not the other. I'm using chrome. Here is the code. Any feedback is appreciated. CSS file: #tabmenu li[status='disabled'] a, a.active, #disabled { color: #777777; background: #DDDDDD; font: normal 1em Arial; border: 1px solid black; border-radius: inherit; padding: 0px 5px 0px 5px; margin: 0px; text-decoration: none; cursor:hand; display:none; } HTML: <ul id="tabmenu"> <li name='tab' id='tab1' selected='no' status='disabled'></li> </ul> JAVASCRIPT (from command line, or onchange of a checkbox) tab = document.getElementById('tab1'); tab.style.display = 'inline';

    Read the article

  • DynamicContent.html: Write a JavaScript in an HTML document that can change the content of an HTML e

    - by A sw A
    ShowHide.html: Write a JavaScript in an HTML document that displays an image and allows the user to toggle the image between appearing and not appearing in the document. Place your image in a (division) tag that has a style attribute. “style.visibility” can take two values: “visible” and “hidden”. The document has a button called “Toggle Image”, which calls the toggle function upon the event “onclick”. DynamicColors.html: Write a JavaScript in an HTML document that changes the background and foreground colors of the body of a document according to the user input. The document has two input texts: background color and foreground color. The colors change when the event “onchange” occurs as you type in the text input and the event handler is called. Your event handler takes two parameters: “where”, and “newColor”. To change the document color and background color you need to change the elements document.body.style.color and document.body.style.backgroundColor. Available colors are: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, and aqua. DynamicContent.html: Write a JavaScript in an HTML document that can change the content of an HTML element (a help box). The content of an element is accessed through its “value” property. The content of a help box can change depending on the placement of the mouse cursor. When the cursor is placed over a particular input field (“onmouseover” event), the help box can display advice on how the field is to be filled. When the cursor is moved away from the input field (“onmouseout” event), the help box content changes to simply indicate that assistance is available. Your messages are stored in an array of strings.

    Read the article

  • Rails HTML Table update fields in mongo with AJAX

    - by qwexar
    I'm building a Rails app backed by mongodb using mongoid. It's a one page app, with a HTML table, every field for every row of which, needs to be editable without refreshing the page. This is your usual Rails view ( like many in rails casts ) showing a table with rows and columns containing data. For example. I'm showing cars, and showing their make, model and notes They way I'm doing this is by appending _id of a mongo document to every column and marking it's field name in html id too. Then I pick up the value for $("#id") and send it to rails controller via AJAX and run @car.update_attributes method accordingly. Currently, one of my rows looks like this. <tr> <td id=<%= car.id %>_make> <%= car.make %> </td> <td id=<%= car.id %>_model> <%= car.model %> </td> <td id=<%= car.id %>_notes> <%= car.notes %> </td> </tr> // my function which is called onChange for every column function update_attributes(id){ var id = id.split[0]; var attribute = id.split[1]; $.ajax("sending id and attribute to rails controller"); } Is there any built it Rails magic which would let me update only a field in a model without refreshing the page? or. Is there a Rails plugin for this?

    Read the article

  • Show Color Picker Value Code Within Input Text Field in Wordpress

    - by Shwan Namiq
    Hi i have options page for my theme i used color picker jquery plugin in my options page as show in image below. i want when i change the color from color picker automatically show the color value code within the text field.how can do this? this is the code within my options page related to appearing the color picker and text field function to register the options setting function YPE_register_settings_sections_fields() { register_setting ( 'YPE_header_option_group', 'YPE_header_option_name', 'YPE_sanitize_validate_callback' ); add_settings_section ( 'YPE_header_section', 'Header Section', 'YPE_header_section_callback', 'YPE_menu_page_options' ); add_settings_field ( 'YPE_header_bg', 'Header Background', 'YPE_header_bg_callback', 'YPE_menu_page_options', 'YPE_header_section' ); } add_action('admin_init', 'YPE_register_settings_sections_fields'); function to appear the text field and color picker function YPE_header_bg_callback() { $YPE_options = get_option('YPE_header_option_name'); $YPE_header_bg = isset($YPE_options['YPE_header_bg']) ? $YPE_options['YPE_header_bg'] : ''; ?> <div class="input-group color-picker"> <input class="form-control" style="width:80px;" name="YPE_header_option_name[YPE_header_bg]" id="<?php echo 'YPE_header_bg'; ?>" type="text" value="<?php echo $YPE_header_bg; ?>" /> <span class="input-group-btn"> <div id="colorSelector"> <div nam style="background-color: #0000ff"> </div> </div> </span> </div> <script> $("#colorSelector").ColorPicker({ color: '#0000ff', onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; }, onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; }, onChange: function (hsb, hex, rgb) { $('#colorSelector div').css('backgroundColor', '#' + hex); }); </script> <?php }

    Read the article

< Previous Page | 10 11 12 13 14 15 16 17 18  | Next Page >