Developing custom selectable symbols in a form

Question

Developing custom selectable symbols in a form

Would like some assistance on implementing a voting system for users to select their preferred icon from an icon font used on my website. The icons are displayed via HTML and CSS. How can I achieve this functionality using jQuery, and then display the selected icon on the front end while also passing its value through a form?

Considering I cannot nest an input element inside another input, here is the approach I took:

Started off with this jsFiddle example: http://jsfiddle.net/6NVpL/42/

HTML:

 <div class="iconDisplay">Display's selected icon</div>

 <button class="selectIcon">Select Icon</button>

 <div id="iconSelector">
     <span class="icon-icon1"></span>
     <span class="icon-icon2"></span>
     <span class="icon-icon3"></span>
     <span class="icon-icon4"></span>
     <span class="icon-icon5"></span>
     <span class="icon-icon6"></span>
     <span class="icon-icon7"></span>
     <span class="icon-icon8"></span>
 </div>

JS:

 $(".selectIcon").click(function () {
   $("#iconSelector").fadeToggle();
 });

 $("#iconSelector span").click(function () {
    $(this).click(function(){
        $("#iconSelector").hide();
     });
 });

html css jquery-ui jquery

Answer 1

Answer №1

Perhaps you would find this more suitable for your needs?

I have made some improvements to the click handlers:

$("#selectIconButton").click(function () {
    $("#iconSelector").fadeToggle();
});

$("#iconSelector span").click(function () {
    selectIcon($(this));
});

I have implemented a function to handle the icon selection process. Please note: remove the return; statement and adjust the code to fit your application.

function selectIcon(e){
    var selection = e.attr('class');
    $('#selectedIcon')
        .removeClass()
        .addClass(selection)
        .show();
    $("#iconSelector").hide();
    return;
    $.ajax({
        url: 'urltowebsite',
        type: 'POST',
        data: { selectedIcon: selection }
    });
}

A user interface element has been added to display the selected icon and some CSS modifications have been made to accommodate these changes.

Answer 2

Perhaps you would find this more suitable for your needs?

I have made some improvements to the click handlers:

$("#selectIconButton").click(function () {
    $("#iconSelector").fadeToggle();
});

$("#iconSelector span").click(function () {
    selectIcon($(this));
});

I have implemented a function to handle the icon selection process. Please note: remove the return; statement and adjust the code to fit your application.

function selectIcon(e){
    var selection = e.attr('class');
    $('#selectedIcon')
        .removeClass()
        .addClass(selection)
        .show();
    $("#iconSelector").hide();
    return;
    $.ajax({
        url: 'urltowebsite',
        type: 'POST',
        data: { selectedIcon: selection }
    });
}

A user interface element has been added to display the selected icon and some CSS modifications have been made to accommodate these changes.

Answer 3

Answer №2

To securely save the data, you must implement a server-side script. If you already have a script in place, follow this procedure:

$("#iconSelector span").click(function () {
    var xthis = $(this);
    xthis.click(function(){
        $("#iconSelector").hide();
        $.post('/saveData','icon='+$(xthis).attr('class'),function(){
            $(".iconDisplay").html(xthis.get(0));
        });
    });
});

Try out the complete code on this fiddle: http://jsfiddle.net/6NVpL/45/

Note: Remember to replace /saveData with the name of your own save script.

Answer 4

To securely save the data, you must implement a server-side script. If you already have a script in place, follow this procedure:

$("#iconSelector span").click(function () {
    var xthis = $(this);
    xthis.click(function(){
        $("#iconSelector").hide();
        $.post('/saveData','icon='+$(xthis).attr('class'),function(){
            $(".iconDisplay").html(xthis.get(0));
        });
    });
});

Try out the complete code on this fiddle: http://jsfiddle.net/6NVpL/45/

Note: Remember to replace /saveData with the name of your own save script.

Developing custom selectable symbols in a form

Answer №1

Answer №2

Similar questions

Tips for retaining filled data after an incomplete form submission

Is it logical to steer users to a different page through a redirect?

How I made my WordPress columns automatically resize with the help of Bootstrap

Guide for updating the background color, font color, and border color in Material UI's autocomplete textfield

What is the best way to import my json information into an HTML table and customize the rows as radio buttons using only Javascript?

Issue with October CMS: Radio button selection triggers an Ajax call, but clicking twice in quick succession causes the content

The property 'apply' is trying to be accessed but is undefined and cannot be read

top margin is functioning properly in Internet Explorer, but not in Google Chrome

"Enhance Your Design With CSS3 Styling for Labels and

Changing the z-index using createjs

Is the accept attribute of the input not recognizing application/json as a valid input type?

In an AJAX response, the button will be disabled if any checkboxes are left unchecked, regardless of their group

Can the JavaScript code be altered within the client's browser?

Implementing link submission with jQuery AJAX that sends empty values

The requested TYPO3 eID for ajax functionality could not be found and returned a

Incorporating hyperlinks within the navigation buttons

Incorporate Angular exclusively in pages that are dynamically loaded via ajax requests

Combining dropdowns, nav-pills, and separate links in Bootstrap 4 to create a seamless horizontal layout

Adaptable data table featuring varying sizes of columns and rows

Trigger an event in JQuery when a selector changes