Jump to content

Search the Community

Showing results for tags 'input'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Welcome
    • Announcements & News
    • New Arrivals
  • Web Development
    • Programming
    • Database Development
    • Server Administration
    • Hosting & Domains
    • Frameworks
  • Web Design
    • HTML & CSS
    • Graphics & Multimedia
  • Desktop Discussion
    • Linux Development
    • Windows Development
    • Mac/Apple Development
    • Hardware Discussion
  • Marketing & Business
    • Advertising, Marketing, Monetization & Social Media
    • Search Engine Optimization & Traffic Building
    • Buy, Sell or Trade
  • Prodjex Web Development Applications, Tools and Plugins
    • IP.Board Applications and Plugins
    • Web Tools
  • The Developer Dump
    • General Chat

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 3 results

  1. Sometimes you have some input fields you want to show to the end user but not allow them to edit. For example a profile page where they can update their name, phone number, change their password, but you may want to restrict them from modifying their email address. Whatever the case may be here's a simple jQuery example of how to disable a text input field on page load. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Example of how to disable an input field on page load using jQuery"> <meta name="author" content="Projex"> <title>jQuery Disable Input on Page Load | Prodjex Web Development and Consulting</title> <link href="../css/bootstrap.min.css" rel="stylesheet"> <link href="../css/signin.css" rel="stylesheet"> <style> body{background-color: grey;} p{color: #fff;} </style> </head> <body class="text-center"> <div class="container"> <div class="col-md-12"> <img src="https://forums.prodjex.com/uploads/monthly_2017_12/5a49485fa77dd_logobig.png.0c19c7fc9cc393df1ad69f5ec30877c1.png"><br><br> <div class="form-group"> <input class="form-control" type="text" name="fname" placeholder="First Name"/> </div> <div class="form-group"> <input class="form-control" type="text" name="lname" placeholder="Last Name"/> </div> <div class="form-group"> <input class="form-control" type="text" id="exampleID" name="email" placeholder="Email Address"/> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script> $("#exampleID").prop("disabled",true); </script> </body> </html> Notice at the bottom of the code <script> $("#exampleID").prop("disabled",true); </script> This sets the property of "disabled" on the input field that has the ID "exampleID". You can check out the demo here. View the Prodjex Web Development blog post on how to Disable Input Field on Page Load Using jQuery.
  2. One of my favorite Wordpress themes lately is the Salient Wordpress Theme by ThemeNectar. It does most things with ease and there are settings that save you quite a bit of time once you become familiar with the layout. This week I ran into an issue that I couldn't find any information on Google. In the Salient admin area there is General Settings -> Styling. Here you can find the overall theme skin. I really like the "Material" setting as it gives nice effects around the site. This setting adds some javascript to the site though and seems to override some basic functionality. I have a contact form on a contact us page. Everything looks and works correctly with the form, but once I submit the form successfully and it resets the placeholders are missing. I tried several different things such as setting the placeholders again with jQuery, but when I looked in the element inspector the placeholders were there, but not displaying. The only way I could get them to show up again was by clicking into the input field then tabbing to the next one or clicking outside. My solution was to use the jQuery blur(); function. I tried this by using on click of the submit, but ran into issues where it would reset those inputs even if it failed validation and didn't successfully submit. So I modified it and on a successful submit it will then blur all of the fields after 1 second and the placeholders return as expected. The easiest way to add the jQuery to your page is through the page builder, just add a Raw JS Element. Here's the code to place within there: <script type="text/javascript"> document.addEventListener( 'wpcf7mailsent', function( event ) { setTimeout( function(){ jQuery('#cfname').blur(); jQuery('#cfemail').blur(); jQuery('#cfcompany').blur(); jQuery('#cfphone').blur(); jQuery('#cfmassage').blur(); },1000); }, false ); </script> The wpcf7mailsent you will not modify, that's the Contact Form 7 success event to listen for. You will change the field names before each blur function, you can add as many as you need.
  3. What's the best way to align text and a input field. With the below code everything works correctly, but the alignment of the text and the actual input fields are all over the place. You can see the example here: http://jsfiddle.net/gallitin/nsPdB/ How can I make them all align evenly the best way?
  • Create New...