hide farbtastic color code - javascript

There is a great http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
I need to do 2 things:
a. Hide color code that we can see under
<input readonly="readonly" type="text" id="color" name="color" value="#123456" />
b. Keep this code to some other hidden field.
How it can be done?
Thank you!

Try this
HTML
<form>
<input type="text" id="color" name="color" />
<input type="hidden" id="colorValue" name="colorValue" />
</form>
<div id="colorpicker"></div>​
JS
$(document).ready(function() {
var picker = $.farbtastic('#colorpicker');
picker.setColor("#fff");
picker.linkTo(function onColorChange(color) {
$('#color').css({'background-color':color});
$('#colorValue').val(color);
});
});
DEMO.

I cannot see the script you're referring, page won't load, but I'm pretty sure you just need to change the type into hidden, when it's hidden you can also remove the readonly attribute:
<input type="hidden" id="color" name="color" value="#123456" / >
I assume that script automatically updated the field you mentioned, if it's hidden it will still update it.

Related

set the value of the input field as value of the hidden field using JS

This question seem to be very silly! but I am looking for the best answer,
I have a input field and a hidden field. How to set the value of the input field as value of the hidden field?
<input class="class1" id="id1" name="name1" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">
Please try this
$(document).ready(function(){
$("#id1").change(function(){
$("#id1").val($("#hidden").val());
});
});
DEMO
You can use a change event handler to update the value of hidden field
//set the initial value
hidden.value = id1.value;
<input class="class1" id="id1" name="name1" value="06/30/2015" onchange="window.hidden.value=this.value" />
<input type=hidden name="hidden" id="hidden" value="I want the value of above field">
You can this by below why, i used onblur for set values from input to hidden. same why you can use different method for this.
Or if you strictly want to use javascript then add one onblur function and do code as i do with callthis() function.
$("#id1").blur(function(){
$("#hidden").val($(this).val())
console.log($("#hidden").val());
});
function callthis(inputobj)
{
document.getElementById("hidden").value = inputobj.value;
console.log(document.getElementById("hidden").value)
}
<input class="class1" id="id1" name="name1" onblur="callthis(this)" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">

Setting input value when moving 'scroll control'

I've been working on a script that lets a user set a setting using HTML5' <input type="range", I've got it to work and got it to show a value on my site, but the thing is that I want the user set setting to be posted as a form input $_POST['gearsdrag'].
For clearification I'm providing a JSfiddle.
http://jsfiddle.net/hqdesf70/
The input I want to be sent is
<input id="r" type="text" name="gearsdrag" value="6000" />
But what the script set's is <input id="r" type="text" name="gearsdrag" />6000</input> and that's not being sent with $_POST.So is there a way to do this or maybe with get parameters or something.I can't figure it out.
Changing the function to this will insert the value into the input and from there you can post it is that what your after?
<script>function showValue(newValue)
{
//changing the "innerHTML" to "value" is what inserts it into the text field
document.getElementById("r").value = newValue;
document.getElementById("rr").innerHTML = newValue;
}
</script>
Keisti pavarą prie: <span id="rr">0</span> / RPM
<form action="test.php" method="post">
<input type="range" min="0" max="7800" value="0" step="100" onchange="showValue(this.value)" />
<input id="r" type="text" name="gearsdrag" value=""/>
<input type="submit" value="Nustatyti" />
</form>

Input value hidden

I have this input:
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
and I want to get this input value in a hidden input, so I used this:
<input type="hidden" name="tag" value="tags" />
Instead of getting the true value of the first input, I only get the string "tags"! Can you please tell me how to obtain the true value of the first input in my hidden input? Thanks!
EDIT: Actually it's a submit page, the user enters tags in the #tag1 and when he clicks on submit I want to send these tags to my controller, that's why I'm using the hidden input...
My full code:
<form>
<p>
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue()"; /></p>
<script>
$('#tag1').tagsInput({
// my parameters here
});
</script>
<style>
#wrapper {
margin: 20px;
}
</style>
<p>
<input type="submit" value="Create" />
<input type="hidden" name="taggg" id="tag2" />
<script type="text/javascript">
function setValue() {
document.getElementById("tag2").value = document.getElementById("tag1").value;
}
window.onload = setValue;
</script>
</p>
</form>
I don't understand why you would want to copy the value of one input field to another (albeit, hidden). But if that is what you want to do, try using the below code.
The function attached to the onblur event of the input field would set the value of the input field to the hidden field whenever it loses focus.
The window.onload = setValue will do the same on page load.
HTML
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue();" />
<input type="hidden" name="tag" value="tags" id="tag1_hidden" /> <!-- Note the addition of an id attribute -->
JavaScript
function setValue() {
document.getElementById("tag1_hidden").value = document.getElementById("tag1").value;
}
window.onload = setValue;
Try this
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
<input type="hidden" name="tag" value="tags" id="tag2" />
Jquery:
$("#tag2").val($("#tag1").val());
or
$("#tag1").blur(function() {
$("#tag2").val($(this).val());
});
You can do like this (and you will need javascript for this).
Give a id to your hidden input also like:
<input type="hidden" id="hidden_input" name="tag" value="tags" />
and then use/paste this code when you need it:
var input_value = document.getElementById('tag1').value;
document.getElementById('hidden_input').value = input_value;

Can't get value of radio buttons using jquery

I've got a series of radio buttons and a submit button:
<input type="radio" name="selectme_resubmit" id="selectme_resubmit1" value="first" /> <label for="selectme_resubmit1">Resubmit with the original submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit2" value="without" checked /> <label for="selectme_resubmit2">Resubmit without any submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit3" value="custom" /> <label for="selectme_resubmit3">Resubmit with a custom submitter:</label> <input type="text" name="selectme_custom_submitter" id="selectme_custom_submitter" /><br>
<input type="button" id="selectme_resubmit_button" name="selectme_resubmit2_button" value="Place a submit template" onclick="selectme_act(\'resubmit\')" />
I also have the following javascript (with jquery):
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
However, I get "undefined" in the console, even when I select something... what am I doing wrong?
I tested your code and the selector does work. The only issue I found was that you were escaping the ' character when it was not needed in the onclick event
you miss ready function
$().ready(function(){
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
});
please use ready function before your declaration
and check this link http://jsfiddle.net/FQGuu/

using innerHTML with <input>

I am trying to use the innerHTML method on an input tag and all i get back is a blank string. Here is the code i am useing.
javascript
function setName(ID){
document.getElementById('searchtitle').innerHTML = "Enter " + ID.innerHTML;
}
HTML
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)">Last Name</input><br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)">Phone Number</input><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
What is supposed to happen is depending on which radio button I pick the label for the input box should change. I can make the label.innerHTML=radio.value but the values are named for my php code and not formated nicely(ie. phonenumber vs. Phone Number) this is why I am trying to use the innerHTML of the radio button.
Any help I could get would be greatly appriciated.
you should embed input inside of label tag. input tag should closed by />. It's semantic HTML. When you do this clicking on label activate the input. InnerHTML only works for label then. It will return you label value.
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
</label>
JavaScript:
console.log(document.getElementById('searchtitle').innerHTML); // returns 'Enter Last Name'
If you want the value of an input tag, you want to use .value.
First, add labels around your inputs. Second, use getName(this.parentNode). Finally, call innerText instead of innerHtml.
<html>
<head>
<script>
function setName(el){
document.getElementById('searchtitle').innerHTML = "Enter " + el.innerText;
}
</script>
</head>
<body>
<label><input type="radio" name="searchtype" value="name" onclick="setName(this.parentNode)"/>Last
Name</label><br/>
<label><input type="radio" name="searchtype" value="phonenumber" onclick="setName(this.parentNode)"/>Phone
Number</label><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
</body>
</html>
Complete edit.
Ok, I figured out what you were looking for. First off, you've got to fix your HTML (don't put text inside of an input... and don't next an input inside of a label).
<label for="test">Last Name</label>
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)" />
<br/>
<label for="test2">Phone Number</label>
<input type="radio" id="test2" name="searchtype" value="phonenumber" onclick="setName(this)" />
<br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label>
<br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
JavaScript (in Jquery, for brevity):
function setName(elem)
{
$('#searchtitle').html('Enter ' + $('label[for="'+elem.id+'"]').html());
}
You have closed the Input tag improperly with </input>
this should be
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)"/>Last Name<br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)"/>Phone Number<br/>

Categories

Resources