Go Premium for a chance to win a PS4. Enter to Win

x

jQuery

16K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Share tech news, updates, or what's on your mind.

Sign up to Post

Do you know why the first click on button does not work? It actually does not do anything.
However, when i click 2 times, it works.


             <form role="form" class="search-form"  >
                                                <div class="form-group">
                                                    <input required type="email" class="form-control" 
                                                           id="search" name="search" 
                                                           placeholder="Enter your email">
                                                    <button id="gotoNext" name="gotoNext" onclick="fnNext()" class="btn btn-theme" type="button">
                                                        Get Started <i class="fa fa-chevron-right"></i>
                                                    </button>
                                                    <br />
                                                    <label style="color:white;">Your Information is safe & secure</label>
                                                </div>
                                            </form>
                                            <script>
                                                        function validateEmail($email) {
                                                          var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                                                          return emailReg.test($email);
       

Open in new window

0
Concerto Cloud for Software Providers & ISVs
LVL 5
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

I have a form on my page with no id or class.

I'm using ASP.net MVC 5 , C# and Razor.

The form on my page starts out like this

@using (Html.BeginForm())
{

Normally i use a jquery selector select an element by id or class.

Is there a jquery selector for a form with no id or class on it?
0
On HTML page I want to keep TEXTAREA controls read-only until the user starts typing characters. All other keyboard events should not change the read-only status. In my script, on the first typed character event the handler makes the control not read-only, but that character does not go to the control itself.
I tried to do the following:
$(".textarea").keyup( function(ev) {
    var k = ev.keyCode;
    var inp = ev.target;
    if(  inp.readOnly && k >= 42 && k <= 90 ) {  // an alphanumeric
    	inp.readOnly = false;
        inp.select();  // without this IE do not accept typed in characters at all
        // i tried this:
    	var sev = $.Event("keypress", {keyCode: k, which: k});
        // and that:
    	var sev = $.Event("keypress", ev);
    	$(inp).trigger(sev);
    }
} );

Open in new window

Whatever I tried, the first typed character is lost, the second goes to the control.
0
Here's my code:

function validateForm() {
	var dob = document.getElementById("usrDOB");
	var usrEEID = document.getElementById("usrEEID");
	var error = '';
	if(usrEEID.indexOf("S")==-1)
	{
		$('#usrEEID').css('border', 'solid 2px red').focus();
		error = "Make sure you include a capital \"S\" in the Employee ID field!";
	}
	if (!isValidDate(dob.value)) 
	{
		$('#usrDOB').css('border', 'solid 2px red').focus();
		error = "Date of Birth must be in the format XX/XX/XXXX\n\r";
	} 
	else 
	{
		$('#usrDOB').css('border', '');
	}
	
	if (error.length > 0) {
		alert(error);
		return false;
	}
	return true;
}

Open in new window


Everything works except...

if(usrEEID.indexOf("S")==-1)
      {
            $('#usrEEID').css('border', 'solid 2px red').focus();
            error = "Make sure you include a capital \"S\" in the Employee ID field!";
      }

I keep getting an error that says "usrEEID.indexOf is not a function." What am I doing wrong?
0
i'm using the jquery ui autocomplete plugin
https://jqueryui.com/autocomplete/

After I select an item from the autocomplete.

I call the selected value value using ui.item.value and the works fine.
For example my autocomplete is show last names:

Johnnson
Smith
Williams

When I select Williams ui.item.value returns Williams .

How do I get the index of the item i selected? Anyone know the syntax

So if I select Williams from the 3 last names that show up i want the index for the 3rd item, which i believ is 2.
0
I've got a form with a field that I want to set up in a way where when the user clicks on it, the text of the label changes to a reminder for spouses to include a special character with their Employee ID and then, after a second, the label returns to its original text.

I'm trying this and it's not working:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#usrEEID").focus(function(){
        $("#usrEEID_text").fadeOut( 500 );
        $("#usrEEID_text").delay( 500 ).text("Wuddup").fadeIn(500);
        $("#usrEEID_text").fadeOut( 500 );
        $("#usrEEID_text").text.("Nice to meet you!");
    });
});
</script>

</head>
<body>

<input id="usrEEID">

<span id="usrEEID_text">Nice to meet you!</span>
<p>Click in the input field to get focus.</p>

</body>
</html>

Open in new window


All that's happening is the text changes to "Wuddup," but then doesn't return to "Nice to meet you!" What am I missing?
0
I'm using jquery.
I have 3 textboxes on my page.
They are named. textbox1, textbox2, textbox3

Right now I have this  run on page load:

// disable first dom element whose id starts with textbox
$('[id^=textbox]')[0].disabled = true;

But since I used [0]. That only disables the first textbox.

How do i revise the above line to disable all elements whose id starts with textbox ?
So it should disable all 3 textboxes.

Or if it would be easier by Class.
0
I have a html page where in some sections i'm using JavaScript and in other parts jQuery.

In a JavaScription funtion i'm doing stome stuff.

Is there a way to run a jquery selector inside a javaScript function?

See i have this selector:

$("#Textbox1")[0].disabled = true;

What's the equivalent of that in JavaScript?
0
I have a piece of code in this fiddle, which simulates an iphone unlock screen, and i would now like to reverse the direction of dragging to unlock such that users drag from right to left to perform the unlock actions.

and this is the fiddle:
https://jsfiddle.net/h6avtu7p/
0
I'm looking for a solution and I thought a client side javascript function  will work. This function will assign the text or title value of a tab  to a particular control.
0
Vote for the Most Valuable Expert
LVL 7
Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

I have a label control in my Masterpage and I would like the  text property of tab I click in the child place
assigned to the label in the Masterpage. Please show example.

 <ul class="tabs" id="thistab" runat="server">

                <li class="tab-link current" data-tab="tab-1" id="tab11" data-toggle="tab"><a href="#Person">Personal Info</a></li>

                <li class="tab-link" data-tab="tab-6" id="tab16"><a href="#Info" data-toggle="tab"                <li class="tab-link" data-tab="tab-2" id="tab12"><a href="#Assign" data-toggle="tab" title="Assignment History">Assignment History</a></li>
                <li class="tab-link" data-tab="tab-3" id="tab13"><a href="#Issues" data-toggle="tab" title="Issues">Issues</a>

</ul>

Open in new window

0
Hello Experts currently our website requires CAC or PKI to get to login screen.  Is there anyway to capture CAC Id's as users login?  Rather than having 1500 users send us their CAC Id's & manually tied to their account?
0
Hi can some say why  the href with the space in doesn't do anything after the alert box show "My%20Word"
Did a var_dump of $_GET and nothing
Also nothing in the network tab of dev tools

$(document).on("click", "a", function(evt) {
     evt.preventDefault() ;
     var ID = "Wrap_" + $(this).attr('id');
     var link = encodeURI($(this).attr('href'));
     alert(link);
     $('#'+ ID).load(link);
});

<a href="myfile.php?param=My Word">My Word</a>
<a href="myfile.php?param=My word">MyWord</a>

Open in new window

0
Since I started changing the page structure here (http://www.gopherstateevents.com/results/fitness_events/results.asp?event_type=5&event_id=658) my data table does not work.  Also, my inline list is not in line.  Any help resolving these two issues would be much appreciated.
0
Below codes is on index.html
and how can i carry the id=search value to http://localhost:5489/Quote/BondInfo?

<form role="form"  class="search-form" method="post">
												<div class="form-group">
													<input type="text"  class="form-control" id="search" placeholder="Get our prices. Enter your email">
													<button onclick="fnNext()" class="btn btn-theme" type="button">
														Submit <i class="fa fa-chevron-right"></i>
													</button>
                                                    <script>
                                                        function fnNext() {

                                                            window.location.replace("http://localhost:5489/Quote/BondInfo");
                                                      }
                                                    </script>
                                                    <br />
                                                   <label style="color:white;" >Your Information is safe & secure</label>
												</div>
											</form>

Open in new window

0
1. How to format currency  - var AmountMax ? The end result should be ($1,000) e.g.
2. How to make TermInYear to convert into INT and then check like below?
if (TermInYear) > 1
label = "Year"
else
label = "Years"?

Thanks,

function parseSelectXMLBondAmountList(xml, selectid, bondState, bondName) {
    var html = "";
    var htmlOption = "";
    var AmountMax = "";
    var AmountMin = "";
    var TermInYear = "";
    $('#' + selectid).prop("disabled", false);   
    $(xml).find('Bond').each(function (i, e) {
        {
            if (bondState == $(e).find('GeneralInformation').find('State').text() && bondName == $(e).find('GeneralInformation').find('Name').text())
            {                 
                var selectedBondName = $(e).find('GeneralInformation').find('Name').text();
                var coverageType = $(e).find('Coverage').attr('Type'); 
                if (coverageType == "list") {
                    $(e).find('Amount').each(function (i, a) {
                        AmountMax = $(a).attr('Max');
                        AmountMin = $(a).attr('Min');
                        TermInYear = $(a).attr('Term');
                        htmlOption += "<option value='" + AmountMax + "'>" + AmountMax + " For " + TermInYear + " Year(s) " + "</option>";
                    });
                }
                else if (coverageType == "range")
                {
                    alert("Range");
                    htmlOption += "";
                   

Open in new window

0
Below codes are working except I am not able to get loop listing  like below. My goal is to just html append to <div>
so the web page will show the UI and our end user can enter information.


 <div class="col-lg-12">
            <Input Type="text" Name="licenseNo" ID="additionalInfo_licenseNo" Onchange="fnSaveSingleData('licenseNo','1')" Placeholder="Enter License No." Class="form-control" Title="License is required!" PrefillValue="No" Required="" />
          </div>



<script> 
function fnGetBondAdditionalInformation() {
    $.ajax({
        url: "http://localhost:5489/BondList.xml",
        success: function (xml) {
            parseSelectXMLBondAdditionalInformation(xml, "test", localStorage.getItem('bondState'), localStorage.getItem('bondName'))
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Status: " + xhr.status);
            alert("Error: " + thrownError);
        }
    });
}
function parseSelectXMLBondAdditionalInformation(xml, selectid, bondState, bondName) {
    var html = "";
    var htmlOption = "";
    var additionalInfo = "";
    var selectedBondName = "";
    $('#' + selectid).prop("disabled", false);
    $(xml).find('Bond').each(function (i, e) {
        {
            if (bondState == $(e).find('GeneralInformation').find('State').text() && bondName == $(e).find('GeneralInformation').find('Name').text()) {
                selectedBondName = $(e).find('GeneralInformation').find('Name').text();
          

Open in new window

0
Below codes are working fine except
 
htmlOption += "<option>" + AmountMax + "</option>";

it only return 1 record/row when bondName='DMV Traffsdfasdfads', how can I loop the <Amount></Amount> and get them into the dropdown in HTML?


<Surety>
  <SuretyLine>
    <Commercial>
	<Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">DMV Traffic Violators School Classroom</Name>
          <State ID="bondState" PrefillValue="Yes">CA</State>          
         </GeneralInformation>
        <Coverage Type="List">
          <Amount  PrefillValue="No" Min="10000" Max="10000" Year="1">10000</Amount>
         </Coverage>              
      </Bond>
      <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">DMV Traffsdfasdfads</Name>
          <State ID="bondState" PrefillValue="Yes">CA</State>          
         </GeneralInformation>
        <Coverage Type="List">
          <Amount  PrefillValue="No" Min="10000" Max="20000" Year="1"></Amount>
	  <Amount  PrefillValue="No" Min="20000" Max="30000" Year="1"></Amount>
         </Coverage>              
      </Bond>
</Commercial>
  </SuretyLine>
</Surety>

function fnGetBondAmount() {
    $.ajax({
        url: "http://localhost:5489/BondList.xml",
        success: function (xml) {
            parseSelectXMLBondAmountList(xml, "bondAmount", localStorage.getItem('bondState'), localStorage.getItem('bondName'))
        },
        error: 

Open in new window

0
I would like to make the dropdown sorted but not sure how to do it right. For those of you already helped me in the past. Please understand I ran with some trouble with your solutions and always get different results.

I want to re-post and hope to get working sample. Thanks


<select></select>

function fnGetBondNameList(bondState) {
            $.ajax({
                url: "http://localhost:5489/BondList.xml",
                success: function (xml) {
                    parseSelectXML(xml,"bondName","Bond",bondState);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Status: " + xhr.status);
                    alert("Error: " + thrownError);
                }
            });
    } 

function parseSelectXML(xml, selectid, xmlnode, bondState) {
    var selecthtml = "", selectBondName = "";
    var options = [];
    $(xml).find(xmlnode).each(function () {
        if (bondState == $(this).find('GeneralInformation').find('State').text()) {
            selectBondName = $(this).find('GeneralInformation').find('Name').text();
        }
    });
    $("#" + selectid).prop("disabled", false);
    $('#' + selectid).html(selecthtml);
    $('#' + selectid + ' option:first').attr('selected', 'selected');
}

<?xml version="1.0" encoding="utf-8"?>
<Container>
  <GeneralInformation UI="BondInfo">
    <State>CA</State>
    <Name>Zebra</Name>
  </GeneralInformation>
  <GeneralInformation UI="BondInfo">
    

Open in new window

0
Keep up with what's happening at Experts Exchange!
LVL 11
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Hi Experts,

If anyone can tell me how I can code a JS (or jQuery) event for timeout, let say for 10 minutes if there is no activity to do a self.location = 'timeout.html'

However, when the user click something or types, the timer to go back to 10 minutes.

Thank you
0
I added a Mobirise landing page to me existing site at http://www.gopherstateevents.com/  I want to replicate that nave bar at the top on pages like http://www.gopherstateevents.com/misc/login.asp but I am having a hard time cleaning up my old code (bootstrap, etc.) so that the top nav bar will work.  Any ideas would be much appreciated!
0
when click on image which appears like x  it shows the table thead like first name etc  i want to add a div before it  . and add some text with borders using jQuery or javascript
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>DataTables example - Column visibility integration</title>
	<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
	<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=758e23b3f1a4c34d6c055f5cc10bae7e">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.3/css/fixedColumns.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
	<style type="text/css" class="init">
	
	/* Ensure that the demo table scrolls */
	th, td { white-space: nowrap; }
	div.dataTables_wrapper {
		width: 800px;
		margin: 0 auto;
	}

	div.ColVis {
		float: left;
	}
	/*.dt-buttons{
		float: right!important;
	}*/

	</style>
	
	
	
	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js">
	</script>
	<script type="text/javascript" 

Open in new window

0
I'm following some tutorials to learn Angular 4. I setup my first project with Angular 4 and Visual Studio 2015 Community edition.

This is one example I followed. Example

I put breakpoints and I couldn't debug the code.

I have to use Visual Studio Code to be able to debug Angular 4 in Visual Studio 2015?
I found these Debug 1

and debug 2
0
I'm using the masked input plugin
http://digitalbush.com/projects/masked-input-plugin/

Example 1

I have this fiddle
http://jsfiddle.net/L8btddb1/

HTML
<input id="date" type="text"></input>

JavaScript
$("#date").mask("99/99/9999");

When I apply the above date format mask on the textbox it works fine.


Example 2

Now I revised example 1 to this. I am basically setting a default value on the texbox.
This is how i need the textbox to be on page load.

http://jsfiddle.net/sh1mtce5/

HTML
<input id="date" type="text" value="11/5/2017"></input>

JavaScript
$("#date").mask("99/99/9999");

The masking is getting set on the textbox but notice how the default value doesn't display on the textbox on page load.

It only works if i set the days to double digits like this:

<input id="date" type="text" value="11/05/2017"></input>

How do I fix example 2,
so regardless whether the textbox value is single digits value="11/5/2017" or double digits value="11/05/2017" it will display on the masked textbox on page load?
0
I'm using jquery, bootstrap, jquery.validate in my asp.net MVC 5 application.
I have seeing various solutions but not sure a good stable solution.

In a textbox the value it contains on page load is a date in this format 11/05/2017

Is there a way to do the following. Wether it's with jquery or JavaScript or bootstrap or validate,

If the value contained in the textbox is anything besides a date display a tooltip that says "please enter a date in this format MM/DD/YYYY"

So if I click in the textbox and , if I delete one digit and the text looks like this 11/05/201  at that point the tooltip already appears. If I type the digit back in like this 11/05/2017 the tooltip disappears.

So the tooltip only appears when the textbox value is anything besides a date in this format MM/DD/YYYY
0

jQuery

16K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Related Topics