Jump to content
Please Use CODE Tags

[HTML/CSS/JS/JQ] Click text to input text

NeatSquidYT
By NeatSquidYT
in Programming
 Share
Posted

Hi,

So I'm looking to make it so when I click on the clock speed or clock type (as I've called it), I can input different types like a text box. Then, when I hit enter, it saves it.

 

here's the site so far:

<!DOCTYPE html><html><head>    <title>PCList - Share Your PC!</title>    <link rel="stylesheet" href="style.css" />    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>    <script type="text/javascript" src="main.js"></script>    <link rel="shortcut icon" type="image/png" href="images/fav.png"/></head><body>    <div id="container" class="container">        <tr id="header"><td align="left"></td></tr>        <table style="width:100%">            <tr id="categories">                <th>Image</th>                <th>Part</th>                <th>Specs</th>            </tr>            <tr>                <td align="left" class="img"><img src="" /></td>                <td align="center" class="name"><button id="cpuadd">Add a CPU</button></td>                <td align="right" class="specs" id="specs">Clock Speed:<span id="cpu">0</span><span id="clocktype">GHz</span> <p>Turbo Boost:</p><p>Voltage: 0.0V</p></td>            </tr>            <tr>                <td align="left" class="img"><img src="" /></td>                <td align="center" class="name"><button id="cpucooler">Add a CPU Cooler</button></td>                <td align="right" class="specs"> <p> </p><p> </p></td>            </tr>            <tr>                <td align="left" class="img"><img src="" /></td>                <td align="center" class="name"><button id="mobo">Add a Motherboard</button></td>                <td align="right" class="specs">Chipset: <p>Socket: </p><p>Form Factor: </p></td>            </tr>            <tr>                <td align="left" class="img"><img src="" /></td>                <td align="center" class="name"><button id="ram">Add RAM</button></td>                <td align="right" class="specs">Type: <p>Memory Speed: 0MhZ</p><p> </p></td>            </tr>            <tr>                <td align="left" class="img"><img src="" /></td>                <td align="center" class="name"><button id="storage">Add Storage</button></td>                <td align="right" class="specs">Type: <p>RPM: </p><p>RAID: </p></td>            </tr>            <tr>                <td align="left" class="img"><img src="" /></td>                <td align="center" class="name"><button id="gpu">Add a GPU</button></td>                <td align="right" class="specs">Base Clock: 0MhZ <p>Memory Clock: 0MhZ</p><p>Voltage: 0.0V</p></td>            </tr>            <tr>                <td align="left" class="img"><img src="" /></td>                <td align="center" class="name"><button id="case">Add a Case</button></td>                <td align="right" class="specs">Supported Form Factors: <p>Colour: </p><p>5.25" Bays: </p></td>            </tr>            <tr>                <td align="left" class="img"><img src="" /></td>                <td align="center" class="name"><button id="psu">Add a PSU (Power Supply)</button></td>                <td align="right" class="specs">Watts: <p>Efficiency: </p><p>Form Factor: </p></td>            </tr>            <tr>                <td align="left" class="img"><img src="" /></td>                <td align="center" class="name"><button id="os">Add an Operating System</button></td>                <td align="right" class="specs">Released: <p>Version: </p><p>Bit Type: </p></td>            </tr>            <tr>                <td align="left" class="img"><img src="" /></td>                <td align="center" class="name"><button id="expansion">Add an Expansion Card</button></td>                <td align="right" class="specs">Connector Type: <p>Card Type: </p><p>Features: </p></td>            </tr>        </table>    </div></body></html>
* {    font-family: Arial, Comic Sans MS;}html {    display: table;    margin: auto;}.name {}.img {}.specs {}.popup {    width: 300px;    height: 400px;    border-radius: 15px;    background-color: #333333;}body {    display: table-cell;    vertical-align: middle;    width: 100%;    background: grey;}input {    width: 30px;}.container {    width: 700px;    background: whitesmoke;}table, th, td {    border: 1px solid black;    border-collapse: collapse;}
$(document).ready(function() {    $("#cpu").click(function() {            });    $("#specs").click(function() {            });    $("#cpucooler").click(function() {        alert("CPU Cooler");    });    $("#mobo").click(function() {        alert("Motherboard");    });    $("#ram").click(function() {        alert("RAM");    });    $("#storage").click(function() {        alert("Storage");    });    $("#gpu").click(function() {        alert("GPU");    });    $("#case").click(function() {        alert("Case");    });    $("#psu").click(function() {        alert("PSU");    });    $("#os").click(function() {        alert("OS");    });    $("#expansion").click(function() {        alert("Expansion");    });});
Link to comment
https://linustechtips.com/topic/319614-htmlcssjsjq-click-text-to-input-text/
Share on other sites
Link to post
Share on other sites
Posted

Do you mean kinda like in MSI afterburner? Where you click the Mhz to enter a new value?

Core i7 4820K  |  NH-D14 | Rampage IV Extreme | Asus R9 280X DC2T | 8GB G.Skill TridentX | 120GB Samsung 840 | NZXT H440  |  Be quiet! Dark Power Pro 10 650W

Link to post
Share on other sites
Posted

What do you mean by it saves it? Saves it for later use by your javascript application?

$("#expansion").click(function() {        alert("Expansion");        var expansion = true;    });

Then later in the program you can see it again by using

if(expansion){

    //do your stuff

}

And you can technically pass all those variables to other pages by storing them in cookies

 

But to me it seems like a PCPartpicker type deal just looking at the code. In which case you will be wanting to store it on the sever rather than on the clients machine yes?

You can use javascript/jquery to add everything to a variable then send the variables to another page using GET, or store them in a database. Or am I completely wrong it what you're asking?

 

EDIT: Yeah, I'm completely wrong

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to post
Share on other sites
Posted
  • Author

Do you mean kinda like in MSI afterburner? Where you click the Mhz to enter a new value?

Sort of. I want it so that you can click the value and input a new one, and change the default "GHz" to "MHz" if the user desires.

Link to post
Share on other sites
Posted
  • Author

What do you mean by it saves it? Saves it for later use by your javascript application?

$("#expansion").click(function() {        alert("Expansion");        var expansion = true;    });

Then later in the program you can see it again by using

if(expansion){

    //do your stuff

}

And you can technically pass all those variables to other pages by storing them in cookies

 

But to me it seems like a PCPartpicker type deal just looking at the code. In which case you will be wanting to store it on the sever rather than on the clients machine yes?

You can use javascript/jquery to add everything to a variable then send the variables to another page using GET, or store them in a database. Or am I completely wrong it what you're asking?

yes, that's what I want. A PCPP like thing where it saves the variable, and you can then publish it.

Link to post
Share on other sites
Posted

Sort of. I want it so that you can click the value and input a new one, and change the default "GHz" to "MHz" if the user desires.

 

like so? http://jsbin.com/uqifa/

 

http://stackoverflow.com/questions/2217664/input-type-text-helper-fades-out-the-text-when-user-types-javascript

Core i7 4820K  |  NH-D14 | Rampage IV Extreme | Asus R9 280X DC2T | 8GB G.Skill TridentX | 120GB Samsung 840 | NZXT H440  |  Be quiet! Dark Power Pro 10 650W

Link to post
Share on other sites
Posted
  • Author

Sort of, but once the user presses enter or clicks away, it's just a normal value without the input box.

Link to post
Share on other sites
Posted

yes, that's what I want. A PCPP like thing where it saves the variable, and you can then publish it.

Ok.. Maybe I wasn't COMPLETELY wrong with knowing what you asked. You have 3 options for getting all the stuff "ready" for sending server side.

 

First, make a large javascript function that builds a query string. Something along the lines of

//In plain javascript because I like normal javascript bettervar queryString = '';function buildString(){queryString += 'cpu=' + document.getElementById('cpu').innerHTML;queryString += '&gpu=' + document.getElementById('gpu').innerHTML;}

Give everything a class of.. Like.. part and use document.getElementsByClassName and loop through the array that creates to generate a string. This is what I would do if you choose to use contenteditable

 

Third, make everything into on large form. The spans get replaced with <input type="text"> and what you were talking about with choosing GHz or MHz gets replaced with <select><option name="mhz" value="mhz">MHz</option><option name="ghz" value="ghz">GHz</option></select>. Then, after you do that you can use Jquery to do something like this

var QS = $('#form_id').serialize();

 

Then, no matter what option you choose to use, you can then send the data to your server page with the data of all the values.......

 

And I take so long to type that an answer has already been given and selected but oh well

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to post
Share on other sites
Posted

-

 

You should add something to highlight the contentEditable when the user clicks on it. Maybe this will work: onClick="this.select();"

My HTML is pretty rudimentary so it might not work lol

Core i7 4820K  |  NH-D14 | Rampage IV Extreme | Asus R9 280X DC2T | 8GB G.Skill TridentX | 120GB Samsung 840 | NZXT H440  |  Be quiet! Dark Power Pro 10 650W

Link to post
Share on other sites
Posted

You should add something to highlight the contentEditable when the user clicks on it. Maybe this will work: onClick="this.select();"

My HTML is pretty rudimentary so it might not work lol

ContentEditable divs automatically add a border on focus, just like a traditional old form element 

I am good at computer

Spoiler

Motherboard: Gigabyte G1 sniper 3 | CPU: Intel 3770k @5.1Ghz | RAM: 32Gb G.Skill Ripjaws X @1600Mhz | Graphics card: EVGA 980 Ti SC | HDD: Seagate barracuda 3298534883327.74B + Samsung OEM 5400rpm drive + Seatgate barracude 2TB | PSU: Cougar CMX 1200w | CPU cooler: Custom loop

Link to post
Share on other sites
Posted
  • Author

You should add something to highlight the contentEditable when the user clicks on it. Maybe this will work: onClick="this.select();"

My HTML is pretty rudimentary so it might not work lol

I'll try it :) It is a bit confusing to navigate ATM :P

Link to post
Share on other sites
Posted

I'll try it :) It is a bit confusing to navigate ATM :P

 

I figured it out :P Use the bold part in addition if you want the text to be highlighted when someone clicks on it. I think it makes it a lot clearer to the user that its actually editable than just havign the cursor sit somwhere in the text ;)

 

    <div contentEditable="true" onclick="document.execCommand('selectAll',false,null)">

      This text can be edited by the user.

    </div>

 

Core i7 4820K  |  NH-D14 | Rampage IV Extreme | Asus R9 280X DC2T | 8GB G.Skill TridentX | 120GB Samsung 840 | NZXT H440  |  Be quiet! Dark Power Pro 10 650W

Link to post
Share on other sites
Posted
  • Author

Ok.. Maybe I wasn't COMPLETELY wrong with knowing what you asked. You have 3 options for getting all the stuff "ready" for sending server side.

 

First, make a large javascript function that builds a query string. Something along the lines of

//In plain javascript because I like normal javascript bettervar queryString = '';function buildString(){queryString += 'cpu=' + document.getElementById('cpu').innerHTML;queryString += '&gpu=' + document.getElementById('gpu').innerHTML;}

Give everything a class of.. Like.. part and use document.getElementsByClassName and loop through the array that creates to generate a string. This is what I would do if you choose to use contenteditable

 

Third, make everything into on large form. The spans get replaced with <input type="text"> and what you were talking about with choosing GHz or MHz gets replaced with <select><option name="mhz" value="mhz">MHz</option><option name="ghz" value="ghz">GHz</option></select>. Then, after you do that you can use Jquery to do something like this

var QS = $('#form_id').serialize();

 

Then, no matter what option you choose to use, you can then send the data to your server page with the data of all the values.......

 

And I take so long to type that an answer has already been given and selected but oh well

Thanks :D I've added the option :)

https://pagoda-jester.codio.io/

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×