Monthly Archives: Oct 2017

Bootstrap modal background doesn’t disappear when modal closes

This can happen in certain circumstances for a lot of reasons.  If you need a quick and dirty hack to get everything shut down (modal wise) in full, you can use:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

It’s overkill, but effective.

Share this post:
read more

Only allow numbers to be entered in an HTML form text field

Sometimes, if you are adding say, a phone number into an input field, you don’t want people to enter letters.  This snippet contains a handy little regex to remove any non-number from an input as the user types.  It’s not foolproof, but it does the job.

Nice simple addition to forms to only allow letters in a text input field:

$("#yourInput").keyup(function()
    {
        if (/D/g.test(this.value))
        {
            // Remove the non-digits from the input
            this.value = this.value.replace(/D/g, '');
        }
    });

UPDATE (2018)

Given that this was a lazy post back when I wrote it, I’ve added a slightly updated version that will look for a change, and other inputs as well.  A few more event listeners will cover some of the users who may like to paste things into the box.

Remember, making forms look pretty before they are submitted it great, but it doesn’t replace proper server-side validation of the input at the other end.  If you are using a database, don’t just sanitise, prepare.

$("#yourInput").on("keyup paste change", function()) 
{ 
  if (/D/g.test(this.value)) 
  { 
    this.value = this.value.replace(/D/g, ''); 
  } 
});

 

Share this post:
read more

Get the value of a select dropdown using jQuery or JavaScript

Sometimes you just need to grab the value of the selected option with Javascript, or jQuery, if that is your flavour.

Something to bear in mind that confuses some people, is that the select options have two parts.  One of those parts is the value, as selected in the value=”” section, and the other is the text value that is displayed on the users browser.

Here’s how to get either the hidden value, or the text value with either method:

Good old JavaScript:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery:

$("#elementId :selected").text(); 
$("#elementId").val();

The element ID refers to the id of the selector, for example:

<select name="someName" id="elementID">
  <option value="[VALUE]">[TEXT]</option>
</select>

 

Share this post:
read more

Search across multiple MySQL columns – useful for addresses etc

Sometimes you need the end user to type something simple into their search box but need the script you are writing to do something a little more complicated in the background.  When searching an address, for example, you may need to accept a user search like:

153 Something Street

However, your database may well have the house/name number in separate columns in your database the table.

Searching across these columns is where concatenation comes to the rescue.

Let’s say there is a column called “houseNumber” and a column called “addressLine1”, for the sake of argument.  When writing a query, you can join these two columns together, and add a space in between with this simple addition to the SQL code.

Carry on and select the columns that you need to, then just add your joined columns after the WHERE clause.

For example:

SELECT clientName, clientTelephone, houseNumber, addressLine1
FROM someClientDatabase
WHERE CONCAT_WS(' ',houseNumber,addressLine1) LIKE ':searchQuery'

Then just insert the whole string (after sanitising if required), given via your user’s input, into the query.

$sql->execute(array(':searchQuery' => '%'.$_POST['userInput'].'%'));

 

 

 

 

Share this post:
read more