Jump to content

Search the Community

Showing results for tags 'form'.

  • 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 4 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. MailChimp allows you to create sign up forms with their builder, but they can be a pain to style and for some don’t allow enough customization. The following code is an example of how you can take advantage of the MailChimp API to subscribe new users. Doing this allows you to then create a custom sign up form and style it easily to match your own look and feel. This example assumes you’re only passing the First Name, Last Name, and email of a new subscriber. It’s easy enough to add additional fields, but this will get you started. First you’ll need to setup an API key in your MailChimp account, so login and navigate to Account -> Extras -> API Keys. Once you’ve clicked to create a new API key go ahead and copy the API key and place it in your code. Now you will need to find the list ID. This is not the ID of the list from the URL. You need to go to your lists and in the drop down select settings. Scroll all the way down and here you will find your list ID to replace in the code. You’re all set, now create your form matching the names from the following script and set your form action to “GET”. <?php /** * Created by PhpStorm. * User: Prodjex * Date: 1/31/2018 * Time: 9:04 AM */ //Grab Data Variables Passed From Form $data = [ 'email' => $_GET['email'], 'status' => 'subscribed', 'firstname' => $_GET['firstname'], 'lastname' => $_GET['lastname'] ]; syncMailchimp($data); function syncMailchimp($data) { $apiKey = 'Your API KEY'; $listID = 'Your List ID'; $memberID = md5(strtolower($data['email'])); $dataCenter = substr($apiKey, strpos($apiKey, '-') + 1); $url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listID . '/members/' . $memberID; $json = json_encode([ 'email_address' => $data['email'], 'status' => $data['status'], // "subscribed","unsubscribed","cleaned","pending" 'merge_fields' => [ 'FNAME' => $data['firstname'], 'LNAME' => $data['lastname'] ] ]); $ch = curl_init($url); curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey); curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_TIMEOUT, 10); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT'); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_POSTFIELDS, $json); $result = curl_exec($ch); $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE); curl_close($ch); return $httpCode; } View Blog Post
  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?
  4. I recently needed to style an upload box. I couldn't find any place to do this within the css. Turns out it isn't possible without jquery as far as I could tell. I needed to take the default: I needed it to look like: Got it working with the following: The HTML <div id="file" class="btn">Upload Photo</div> <input type="file" name="file" /> The CSS #file { display:none; } ​ The Javascript From the very intelligent folks at Stack Overflow Variation 1: Image button If you would like to use an image button instead, simple add your image code instead of “Upload Photo” like this: The HTML <div id="file"><img src="/images/button-image.jpg"></div> <input type="file" name="file" /> Variation 2: File name If you would like to use the file name instead of the text “File attached”, you could try the following Javascript, courtesy of the brainy folks of StackOverflow, the only code that is highlighted: The Javascript var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'}); var fileInput = $(':file').wrap(wrapper); fileInput.change(function(){ $this = $(this).val().replace(/C:\\fakepath\\/i, ''); $('#file').text($this); }) $('#file').click(function(){ fileInput.click(); }).show();
  • Create New...