Modify the css based on the user's input

<html lang="en">
<head>


<link rel="stylesheet" href="style.css" />
<li id="visa">
<section class="credit-card visa gr-visa">
        <div class="logo">visa</div>
        <form>
            <h2>Payment Details</h2>

            <ul class="inputs">
                <li>
                    <label>Card Number</label>
                    <input type="text" name="card_number" pattern="[0-9]{13,16}" value="9842 9472 9457 9472" class="full gr-input" required />
                </li>
          <li>
            <label>Name on card</label>
            <input type="text" name="card_name" size="20" class="month gr-input" required />
                <li class="expire last">
                    <label>Expiration</label>

                <div class="dropdown">
      <select name="one" class="dropdown-select month gr-input">
        <option value="">Month</option>
        <option value="1">Jan</option>
        <option value="2">Feb</option>
        <option value="3">Mar</option>
     <option value="4">Apr</option>
        <option value="5">May</option>
        <option value="6">Jun</option>
     <option value="7">Jul</option>
     <option value="8">Aug</option>
     <option value="9">Sep</option>
     <option value="10">Oct</option>
     <option value="11">Nov</option>
     <option value="12">Dec</option>

      </select>
    </div>          

            <div class="dropdown">
      <select name="one" class="dropdown-select year gr-input">
        <option value="">Year</option>
           <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
     <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
     <option value="2019">2019</option>
     <option value="2020">2020</option>
     <option value="2021">2021</option>
     <option value="2022">2022</option>
     <option value="2023">2023</option>
     <option value="2024">2024</option>
      </select>
    </div>

                    <div class="clearfix"></div>
                </li>
                <li class="cvc-code last">
                    <label>CVV Code</label>
                    <input type="text" name="cvc_code" value="174" size="10" class="gr-input" required />
                </li>
              <input type="post" name="submit" value="Pay Now" class="fsSubmitButton"/>
                <div class="clearfix"></div>
            </ul>
        </form>
        <div class="watermark">visa</div>
    </section>
</li>
<li id="mastercard">
<section class="credit-card mastercard gr-mastercard">
        <div class="logo"><div></div><div></div></div>

        <form>
            <h2>Payment Details</h2>

            <ul class="inputs">
                <li>
                    <label>Card Number</label>
                    <input type="text" name="card_number" pattern="[0-9]{13,16}" value="9842 9472 9457 9472" class="full gr-input" required />
                </li>
          <li>
            <label>Name on card</label>
            <input type="text" name="card_name" size="20" class="month gr-input" required />
                <li class="expire last">
                    <label>Expiration</label>

                <div class="dropdown">
      <select name="one" class="dropdown-select month gr-input">
        <option value="">Month</option>
        <option value="1">Jan</option>
        <option value="2">Feb</option>
        <option value="3">Mar</option>
     <option value="4">Apr</option>
        <option value="5">May</option>
        <option value="6">Jun</option>
     <option value="7">Jul</option>
     <option value="8">Aug</option>
     <option value="9">Sep</option>
     <option value="10">Oct</option>
     <option value="11">Nov</option>
     <option value="12">Dec</option>

      </select>
    </div>          

            <div class="dropdown">
      <select name="one" class="dropdown-select year gr-input">
        <option value="">Year</option>
           <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
     <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
     <option value="2019">2019</option>
     <option value="2020">2020</option>
     <option value="2021">2021</option>
     <option value="2022">2022</option>
     <option value="2023">2023</option>
     <option value="2024">2024</option>
      </select>
    </div>

                    <div class="clearfix"></div>
                </li>
                <li class="cvc-code last">
                    <label>CVV Code</label>
                    <input type="text" name="cvc_code" value="174" size="10" class="gr-input" required />
                </li>
            <input type="post" name="submit" value="Pay Now" class="fsSubmitButtonM"/>
                <div class="clearfix"></div>

            </ul>
        </form>
        <div class="watermark"><div></div><div></div></div>
    </section>
</li>

Two forms are here... When a number starting with 9 is entered in the credit card field, the first form should be displayed. If a number starting with 4 is entered, the Visa form should be shown.

The CSS code is as follows:

/* === Basic reset === */
* { margin: 0; padding: 0; outline: none; box-sizing:border-box; }
a>img { border: none; }
header, footer, article, section, nav, aside { display: block; }

/* === General === */
body {
    font-family:Arial;
    font-size: 14px;
    background:#ddd;
}

.clearfix {
    clear:both;
}
/* === Credit Card === */
.credit-card {
    display:block;
    position:relative;
    width:93.75%;   /* This is 300px on 320px wide screen */
    max-width:500px;    /* Just to make sure that it doesnt get crazy on bg screens */
    min-width:300px;    /* And make sure that it contains at least some size */
    margin:30px auto;
    padding:20px;
    overflow:hidden;
    border-radius:6px;
    z-index:1;
}

.credit-card .inputs {
    list-style:none;
    margin-top:30px;

}

.credit-card .inputs li {
    margin-bottom:30px;
}


.credit-card .inputs li.last {
    margin-bottom:10px;
}

.credit-card .inputs li.expire {
    float:left;
    width:70%;
    margin-right:5%;
}

.credit-card .inputs li.expire input{
    float:left;
    width:35%;
}

.credit-card .inputs li.expire input.month{
    width:30%;
    margin-right:5%;
}

.credit-card .inputs li.cvc-code {
    float:right;
    width:20%;


}
.creditcatd .inputs ul.cvc-code{
display: inline;
}

.credit-card .inputs li.cvc-code input {
    width:70%;
}

.credit-card .watermark {
    position:absolute;
    z-index:10;
}

.credit-card form {
    position:relative;
    z-index:50;
}

.credit-card .logo {
    position:absolute;
    top:15px;
    right:20px;
    text-transform:uppercase;
    font-weight:bold;
}
/* === Visa === */
.visa {
    color:#fff;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.8), inset 0px 1px 3px rgba(255,255,255,0.3), inset 0px 0px 2px rgba(255,255,255,0.2);
}

.visa h2 {
    text-shadow:1px 1px 2px rgba(17,121,173,0.8);
}

.visa .logo {
    color:rgba(255,255,255,0.9);
    font-size:2em;
    font-style:italic;
    text-shadow:0px 0px 3px rgba(17,123,173,0.9);
}

.vis...

<a href="http://fethr.com/paymentpage/creditcard.html" rel="nofollow">http://fethr.com/paymentpage/creditcard.html</a></p>

<p>This link shows the demo of two forms, but one form (Visa form) may be shown as default. When a number starting with 9 is entered, the CSS should be changed accordingly.</p>

<p>I have a JavaScript function which can switch between the forms by clicking a link. Instead of clicking the link, I need the form to change based on the input provided in the credit card field.</p>

<pre><code>jQuery(document).ready(function(){
    // Switch cards
    jQuery('.switchCard').click(function(e){
        var newCard = jQuery(this).attr('href');
        e.preventDefault();

        jQuery('.cards li.active').fadeOut('fast',function(){
            jQuery(this).removeClass('active');
            jQuery(newCard).fadeIn('fast',function(){
                jQuery(newCard).addClass('active');
            });
        });
    });
});

I just require modifications to the above JavaScript code so that the card form changes dynamically based on the input received in the credit card field.

javascriptjquerycss

Answer №1

Imagine you have two separate forms, each containing elements with identical names. Both forms include a "card_number" input field. Now, if a user enters a number in one of these fields, you want to automatically switch between the forms for ease of use. It would be much simpler if there was only one card number input across both forms, and then dynamically displayed the remaining elements based on that input.

Here's a possible solution:

$('.mastercard').hide();

$('[name="card_number"]').on('keyup', function() {
    if ( this.value.length ) {
        if (this.value.charAt(0) === '4') {
            $('.visa').show();
            $('.mastercard').hide();
        } else if (this.value.charAt(0) === '9') {
            $('.visa').hide();
            $('.mastercard').show();
        }
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Unable to locate font in the VueJS build

Within my config/index.js file, I have the following setup: ... build: { index: path.resolve(__dirname, 'dist/client.html'), assetsRoot: path.resolve(__dirname, 'dist'), assetsSubDirectory: 'static', assetsPub ...

javascriptwebpackvue.jsbuildcore-ui

Creating a multi-dimensional array in JavaScript with two different sizes

I'm struggling to find the best way to create a multi-dimensional array with varying sizes dynamically. Our user interface requires a pattern where there are rows of 4 items followed by rows of 3 items. This pattern should continue until all contents ...

javascriptarraysmultidimensional-array

Users using an iPhone are unable to adjust the scale or scroll on this website

I find myself wondering what I might be overlooking in this situation Here is the HTML code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../nImg/favicon.ico" ...

iphonehtmlcssscale

Transmitting Filter Choices as an Object for Retrieving Multiple Values within an Angular Application

In my Angular application, I have a function that takes user selections for various filter types and sends a request to the API to retrieve filtered data based on those selections. Each filter type returns values in an array format, allowing users to selec ...

javascriptangulartypescriptjavascript-objects

Tips for resetting the mapbox geocoder

Using the Mapbox Geocoder along with multiple select menus to customize a map has been my latest project. I am currently working on resetting the geocoder once a user selects an option from the menu, clearing the input field and removing the marker in the ...

javascriptjquerymapbox-gl-js

The error message states: "change is not defined"

I am encountering an issue where I have 4 input boxes triggering a function on keyup using the onkeyup event. Strangely, I keep receiving an error stating that "change" (the function's name) is not defined. Despite correctly defining the function, I c ...

javascripthtmlfunctiononkeyupreferenceerror

Using Tailwind CSS to set the margin of an element at certain breakpoints is not functioning as expected

I attempted to customize the margin of a div element at specific screen sizes by using a {screen}: prefix, but it did not have the desired effect. Here is what I tried: <div className={'flex justify-center'}> <div className={'w-fu ...

csspluginsthemesnext.jstailwind-css

JavaScript-based tool for extracting content from Sketch file

My goal is to extract the contents of a .sketch file. I have a file named myfile.sketch. When I rename the file extension to myfile.zip and extract it in Finder, I can see the files inside. However, when I try the same process on the server using Node.js ...

javascriptnode.jsunzipjszip

What are some creative ways to customize radio buttons using images?

I am looking to customize the appearance of my radio buttons by using images for both selected and unselected states. Here is the CSS code I have implemented: input[type="radio"] { background: url("https://example.com/path/to/unselec ...

jquerycssradio-button

React/React Hooks: Want to initiate input validation when a user deselects a checkbox

Currently, my component includes an input field and a checkbox. When the checkbox is checked, it disables the input field and clears any validation errors. However, I want to add functionality so that if the checkbox is unchecked, the input field becomes ...

javascriptreactjsonclickreact-hooks

Modifying the temp variable by assigning a new value to this.value in Javascript

Using a temporary variable, I initialize a THREE.Vector3 which is then passed into the creation of an object. object[i] = new Object(new THREE.Vector3(0,0,0)); Within the Object class, there is a variable called texture that gets assigned the new THREE.V ...

javascriptthree.js

What is the best way to include a substantial amount of HTML in a Vue.js template?

As a newcomer to Vue.js, I have a question regarding the rendering of a large amount of HTML in a Vue.js template. When I include around 500 lines of plain HTML code in my template and run npm run dev the compiling process becomes extremely slow or d ...

javascriptvue.jsvuejs2

Alter the border color of a bootstrap-div using JavaScript

I need to update the border color of a div element, but I'm encountering issues when using a bootstrap class on the div. Is there a way to change the border color using Javascript? <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/ ...

javascriptbootstrap-5

Replace existing styled-component CSS properties with custom ones

One of my components includes a CheckBox and Label element. I want to adjust the spacing around the label when it's used inside the CheckBox. Can this be achieved with styled()? Debugging Info The issue seems to be that the className prop is not b ...

javascriptcssreactjsstyled-components

Obtain text content using JQuery and AJAX rather than retrieving the value

I am struggling with a dynamic table that needs to perform calculations before submitting, requiring the presence of values. However, I want to submit the text from the options instead of the values. Despite trying various approaches, none of them seem to ...

javascriptjqueryajax

Displaying Child Component in Parent Component After Click Event on Another Child Component: How to Implement Angular Parent/Children Click Events

After delving into Angular 7 for a few weeks, I find myself faced with the challenge of toggling the visibility of a child component called <app-child-2> within a Parent component named <parent>. This toggle action needs to be triggered by a cl ...

javascriptangularrxjsangular-ng-if

Displaying images above a Bootstrap Carousel

I am looking to create a dynamic mobile image slider using Bootstrap carousel with overlaying images. However, I am facing two issues with responsive resizing and the overlapping of sections due to absolute positioning. <section> <h2 style= ...

htmlcssimagebootstrap-4

Guidance on implementing fallback font formats using FontFace API

I am exploring the FontFace API (not @fontface) and wondering if there is an easy way to include multiple font formats, similar to providing multiple sources in @fontface. Alternatively, is there a simple method to identify which font formats are supporte ...

javascriptcssfontsfont-facewebfonts

Can I use javascript/jquery to alter the direction of text in each line?

Looking for assistance with changing text direction on each new line. For instance: text left-to-right text right-to-left text left-to-right text right-to-left... etc. I would like the text direction to change with each word-wrap: break-word. Any help w ...

javascriptjqueryhtmlcsstext

Using jQuery, you can disable an option upon selection and also change its border color

learn HTML code <select name="register-month" id="register-month"> <option value="00">Month</option> <option value="01">January</option> <option value="02">February</option> <option value="03"& ...

javascriptjqueryhtml