jQuery Mobile: Button examples

This entry is part 12 of 73 in the series jQuery Mobile

We look at the different ways of implementing a button in jQM.

Button Examples
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page' id='pageone'>
    <div data-role='header'><h1>Button App</h1></div>
    <div data-role='content'>
        <p>The 2 Class Button Examples</p>
        <a href='#' class='ui-btn'>Anchor</a>
        <button class='ui-btn'>Button</button>
        <p>Input Button</p>
        <input type='button' value='Submit Button'>

        <p>The deprecated data-role button</p>
        <a href='#pageone' data-role='button'>Old Button</a>

        <p>Inline Buttons</p>
        <a href="#" class="ui-btn ui-btn-inline">Anchor</a>
        <button class="ui-btn ui-btn-inline">Button</button>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

jqm_button

Anchor button is commonly used for moving to a different page or web address.

<a href='#' class='ui-btn'>Anchor</a>

General purpose Button:

<button class='ui-btn'>Button</button>

Submit button:

<input type='button' value='Submit Button'>

The deprecated old Button:

<a href='#pageone' data-role='button'>Old Button</a>

Inline buttons are displayed on the same line.

<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
<button class="ui-btn ui-btn-inline">Button</button>

We generally use input button to submit a form.

jQuery Mobile: First simple button example

This entry is part 5 of 73 in the series jQuery Mobile

We will start off with the first example by creating a button using jQuery Mobile.

<div data-role='page'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Look at the button!</p>
        <a href='#' data-role='button'>I am a button</a>
    </div>
</div>
Try The Code

To create a button, we use the attribute data-role=”button” as in the following line:

<a href='#' data-role='button'>I am a button</a>

The href link will tell the app where to go when the button is clicked.

Since we have href=’#’, which is itself, the page will not go anywhere when it is clicked.

jqm2

Code Block
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet' type='text/css'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <meta charset='utf-8'>
    <title>JS Bin</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>My Mobile App</h1></div>
    <div data-role='content'>
        <p>Look at the button!</p>
        <a href='#' data-role='button'>I am a button</a>
    </div>
</div>
</body>
</html>

PHP: Radio button me

This entry is part 45 of 54 in the series PHP Tutorial

In a typical button form, the HTML for a checked radio button will look like:

<form>
    <input type='radio' name='radio_button' value='ipad'>iPad
    <br>
    <input type='radio' name='radio_button' value='camera' checked>Camera
    <br>
    <input type='button' value='Submit' onclick=''>
</form>

Notice the checked word that will turn the button into a checked button.

Below we look at a way where a button could be unchecked and checked to see how PHP actually helps in modifying the HTML code.

Radio Button
<?php
$ipad_status = 'unchecked';
$iphone_status = 'checked';

if (isset($_POST['submit_name'])) {
    if ($ipad_status == 'checked') {
        $ipad_status = 'unchecked';
        $iphone_status = 'checked';
    } elseif ($iphone_status == 'checked') {
        $iphone_status = 'unchecked';
        $ipad_status = 'checked';
    }
}
?>

<form name="myform" method="post" action="radiome.php">
    <?php ?>
    <Input type='radio' Name='gadget' value='ipad'
        <?php echo $ipad_status ?>
        >ipad

    <Input type='radio' Name='gadget' value='iphone'
        <?php echo $iphone_status ?>
        >iphone
    <P>
        <Input type="submit" Name="submit_name" value="Radio Button Me">

</form>

You can try the radio button here.  Click on Radio Button Me.  Once you click on Radio Button Me, the checked button will be moved to ipad.

In the code above, in line 23, the checked word, similar to line 4 in the top HTML form, is modified directly by an echo statement in <?php echo $iphone_status ?>.

PHP: Radio button form

This entry is part 44 of 54 in the series PHP Tutorial

We will go through some form related processing with PHP.

You can first copy (double clicking on the code box) the code below to a file called radio.php and save the file in your local web server.

If you are using WAMP server, make sure that WAMP server is started.

Radio Button
<?php
$male_status = 'unchecked';
$female_status = 'unchecked';

if (isset($_POST['Submit1'])) {
    $selected_radio = $_POST['gender'];

    if ($selected_radio == 'male') {
        $male_status = 'checked';
    } else if ($selected_radio == 'female') {
        $female_status = 'checked';
    }
}
?>

<FORM name="form1" method="post" action="radio.php">

    <Input type='Radio' Name='gender' value='male'
        <?php echo $male_status ?>
        >Male

    <Input type='Radio' Name='gender' value='female'
        <?php echo $female_status ?>
        >Female

    <P>
        <Input type="Submit" Name="Submit1" VALUE="Select a Radio Button">

</FORM>

<?PHP if ($male_status == 'checked') {
    echo "Male selected";
}
if ($female_status == 'checked') {
    echo "Female selected";
}
?>

You can try to run the form here.

We have put the PHP code in the same script file (radio.php) and so in the form action field, we have action=”radio.php”.

When the form is first submitted, the isset($_POST[‘Submit1’]) is set to 1(true) allowing the if loop to run.

Depending on which button is set, the if loop will set $male_status to 1 or $female_status to 1.

The $male_status or $female_status will allow us to set one of the buttons to checked status by using and echo statement as in <?php echo $male_status ?>.