I have read all sorts of similar Q/A. This may be too specific I suppose.
I would like to toggle input (text) values by "clicking" a voided hyperlink
<a id="same" href="javascript:;">link</a>
The toggle values are stored in sessions.
So click the link once and value="session". Click again value="". Back and forth. I know its probably simple. I can read jquery. Still learning to write it.
$("#same").on("click", function(){
$("[name='event_contact_name']").val($("[name='<?php echo "session 1"; ?>']").val());
$("[name='event_contact_lastname']").val($("[name='<?php echo "session 2"; ?>']").val());
$("[name='event_contact_phone']").val($("[name='<?php echo "session 3"; ?>']").val());
$("[name='event_contact_email']").val($("[name='<?php echo "session 4"; ?>']").val());
});
You could PHP echo $_SESSION["something"] inside a data-* attribute of your input elements. like:
data-sessionval="<?= $_SESSION["something"] ?>"
Example with anchor toggle
$("#same").on("click", function() {
var tog = this._sessTog = !this._sessTog;
$("[data-sessionval]").val(function() {
return tog ? $(this).data("sessionval") : "";
});
});
<a id="same" href="javascript:;">Use session values</a>
<br>
Name: <input name="event_contact_name" data-sessionval="php echoed here">
last name: <input name="event_contact_lastname" data-sessionval="php echo text">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But using anchors for something cehckoxes were invented for - seems odd, so:
$("#same").on("change", function() {
var ckd = this.checked;
$("[data-sessionval]").val(function() {
return ckd ? $(this).data("sessionval") : "";
});
});
<label><input id="same" type="checkbox"> Use session values</label>
<br>
Name: <input name="event_contact_name" data-sessionval="php echoed here">
last name: <input name="event_contact_lastname" data-sessionval="php echo text">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you don't like the checkbox, use CSS:
$("#same").on("change", function() {
var ckd = this.checked;
$("[data-sessionval]").val(function() {
return ckd ? $(this).data("sessionval") : "";
});
});
[type=checkbox] + span:before {
margin-right: 10px;
content: "\2610";
}
[type=checkbox]:checked + span:before {
content: "\2611";
color: #0bf;
}
<label>
<input id="same" type="checkbox" hidden>
<span>Use Session values</span>
</label>
<br> Name: <input name="event_contact_name" data-sessionval="php echoed here">
Last name: <input name="event_contact_lastname" data-sessionval="php echo text">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
I want to make a dynamic form. I am basing this on the post here
How To Show And Hide Input Fields Based On Radio Button Selection which has an updated jsfiddle here http://jsfiddle.net/QAaHP/16/
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'block';
}
else document.getElementById('ifYes').style.display = 'none';
}
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>
No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="visibility:hidden">
If yes, explain:
<input type='text' id='yes' name='yes'/>
<br>What can we do to accommodate you?
<input type='text' id='acc' name='acc'/>
</div>
other 3 <input type='text' id='other3' name='other3'><br>
other 4 <input type='text' id='other4' name='other4'><br>
Not being a big fan of javascript, I tried to modify this in a new jsfiddle here for detection of 'ifno' condition as well
http://jsfiddle.net/35nxgw8o/
My goal is to detect both the 'no' and 'yes' conditions so that I am making this an 'either/or, never 'both' condition but having little luck doing so. Maybe I am goiing about it all wrong?
#Stevish Indeed onchage does it.
I am posting what I used here as is so others may find it useful. It is PHP and Javascript. It allws me to set the pre-determined variable in the URL (GET) , then depending on which way it was loaded,(hideshow or showhide) Javascript handles it from there.
echo '><span style="color:#666; font-weight:bold; line-height: 300%"> Yes</span><input type="radio" name="mppdf" value="yes" onChange="getValue(this)"';
if ($_GET['mppdf']!='yes')
{
$showhide=' style="display: none "';
$hideshow=' style="display: block "';
echo ' checked';
}
else
{
}
if (($_GET['pdf']=='yes') || ($_GET['mppdf']=='yes') || (isset($_GET['pdfname'])))
{
$hideshow=' style="display:none; "';
$showhide=' style="display: block "';
echo ' checked';
}
else
{
echo '><div id="yourfield1" '.$showhide.'>';
echo'<input style="width: 120px; height: 16px; color:#666; background-color: #DDD; font-weight:bold" type="text" value="'.$_GET['pdfname'].'" placeholder="'.$name.'" id="pdfname" name="pdfname"';
echo' <div id="yourfield2" '.$hideshow.'"> ';
echo'
<span style="color:#666; font-weight:bold; line-height: 300%"> jpg</span>
<input type="radio" name="jpgpdf" value="no" id="JPG"';
if (($_GET['pdf']!='yes') && ($_GET['mppdf']!='yes') && (!isset($_GET['pdfname'])))
{
echo ' checked';
}
else
{
}
echo '><span style="color:#666; font-weight:bold; line-height: 300%"> pdf</span><input type="radio" name="jpgpdf" value="no" id="PDF"';
if (($_GET['pdf']=='yes') || ($_GET['mppdf']=='yes') ||(isset($_GET['pdfname'])))
{
echo ' checked';
}
else
{
}
echo'>
</div>';
<script type="text/javascript">
function getValue(x) {
if(x.value == 'No'){
document.getElementById("yourfield1").style.display = 'none'; // you need a identifier for changes
document.getElementById("yourfield2").style.display = 'block'; // you need a identifier for changes
}
else{
document.getElementById("yourfield1").style.display = 'block'; // you need a identifier for changes
document.getElementById("yourfield2").style.display = 'none'; // you need a identifier for changes
}
}
</script>
I have a html form with such structure:
...
<select name="Employee">
<option>a</option>
<option>b</option>
</select>
<input type="checkbox" name="email" value="Yes" unchecked>Include Email Contact
<input type="checkbox" name="phone" value="Yes" unchecked>Include Phone Contact
Job Title: <input type="Text" name="jobTitle" size="20"><br>
<input type="Button" value="Generate" onclick="show()" id="refresh">
...
And a div:
<div class="data">
<div class="ft_name"></div>
<div class="ft_pos"></div>
<div class="ft_tbl_meta">E-Mail:</div>
<div class="ft_tbl_data"></div>
<div class="ft_tbl_meta">Phone:</div>
<div class="ft_tbl_data"></div>
</div>
How can I show my values in div section by pressing the button without reloading the entire page?
I know Javascript a bit, but unfortunately, didn't find the answer yet.
Thank you in advance!
Here is one solution, using unobtrusive vanilla javascript.
The function showData() runs when the button is clicked.
Then, the function showData():
gets the Boolean value of each checkbox (either true if checked or false if unchecked)
rewrites the Boolean value as a string (a value of true becomes 'Yes' and a value of false becomes 'No')
rewrites the relevant data field, including the string.
function showData() {
var emailValue = document.querySelector('input[value="email"]').checked;
var phoneValue = document.querySelector('input[value="phone"]').checked;
var data = document.getElementsByClassName('data')[0];
var dataFields = data.getElementsByTagName('div');
if (emailValue === true) {emailValue = 'Yes';} else {emailValue = 'No';}
if (phoneValue === true) {phoneValue = 'Yes';} else {phoneValue = 'No';}
for (var i = 0; i < dataFields.length; i++) {
switch (i) {
case (0) : dataFields[i].textContent = 'E-Mail: ' + emailValue; break;
case (1) : dataFields[i].textContent = 'Phone: ' + phoneValue; break;
}
}
}
var button = document.querySelector('input[type="button"]');
button.addEventListener('click',showData,false);
form, .data, label, input[type="button"] {
display: block;
}
form, .data {
float: left;
width: 200px;
}
input[type="button"] {
margin-top: 24px;
}
<form>
<label><input type="checkbox" name="contact" value="email" unchecked>Include Email Contact</label>
<label><input type="checkbox" name="contact" value="phone" unchecked>Include Phone Contact</label>
<input type="Button" value="Generate">
</form>
<div class="data">
<div class="ft_tbl_meta">E-Mail:</div>
<div class="ft_tbl_meta">Phone:</div>
</div>
set some IDs for your divs you wish to take/assign values from/to and put this code
IncludeEmailCheckBox is for your "include Email" checkbox
EmailToDiv is for your div to get the email
EmailFromDiv is for your input for Email
IncludePhoneCheckBox is for your "include Phone" checkbox
PhoneToDiv is for your div to get the Phone
PhoneFromDiv is for your input for Phone
function show(){
if (document.getElementById("IncludeEmailCheckBox").checked){
document.getElementById("EmailToDiv").innerHTML = document.getElementById("EmailFromDiv").innerHTML ;}
if (document.getElementById("IncludePhoneCheckBox").checked){
document.getElementById("PhoneToDiv").innerHTML = document.getElementById("PhoneFromDiv").innerHTML ;}
return false;
}
Remember to change IDs as nessesary
Get elements of class by calling document.getElementsByClassName(class_name)
Example javascript code below
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
var x = document.getElementsByClassName("ft_name");
x[0].innerHTML = form.name.value;
x = document.getElementsByClassName("ft_tbl_meta");
x[0].innerHTML = form.email.value; // name email is one provided in form
// Do same for all other classes
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR>
<input type="checkbox" name="email" value="Yes" unchecked>Include
Email Contact
<input type="checkbox" name="phone" value="Yes" unchecked>Include Phone Contact
Job Title: <input type="Text" name="jobTitle" size="20"><br>
<input type="Button" value="Generate" onclick="show(this.form)" id="refresh">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
</FORM>
</BODY>
</HTML>
here is your view (I updated) using Jquery:
<div class="data">
<div class="ft_name"></div>
<div class="ft_pos"></div>
<div class="ft_tbl_meta">E-Mail:<span id="email_here"></span></div>
<div class="ft_tbl_data"></div>
<div class="ft_tbl_meta">Phone:<span id="phone_here"></span></div>
<div class="ft_tbl_data"></div>
</div>
Now fetching and printing values:
var Employee = $( "select[name=Employee]" ).val();
$('.ft_name').html(Employee);
var email = $( "input[name=email]" ).val();
$('#email_here').html(email);
var phone = $( "input[name=phone]" ).val();
$('#phone_here').html(phone);
var jobTitle = $( "input[name=jobTitle]" ).val();
$('.ft_pos').html(jobTitle);
I am creating an options dashboard for my wordpress theme and I managed to work almost everything but here's the thing: I added a colorpicker and worked super! If you click in the input field, a colorpicker will pop up so you can choose a color (or write the HEX instead) then if you click outside the colorpicker, it disappears.
But if I add a second one, the first input pops the colorpicker and takes the color value to BOTH inputs and after clicking outside the pop it won't disappear. Then if I click on the second input the colorpicker won't pop.
On other scenario, if I click first the second one, the colorpicker will pop but any of the inputs will take the value.
My code is this:
HTML and PHP:
case 'colorpicker':
?>
<div class="options_input options_text color-picker">
<input class="pickcolor" name="<?php echo $value['id']; ?>"
id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>"
value="<?php if ( get_option( $value['id'] ) != "") {
echo stripslashes(get_option( $value['id']) ); } else { echo $value['std']; } ?>" />
<div id="colorpicker"></div>
</div>
<?php
break;
My js:
jQuery(document).ready(function($) {
$('#colorpicker').hide();
$('#colorpicker').farbtastic('.pickcolor');
$('#color').click(function() {
$('#colorpicker').fadeIn();
});
$(document).mousedown(function() {
$('#colorpicker').each(function() {
var display = $(this).css('display');
if ( display == 'block' )
$(this).fadeOut();
});
});
});
jQuery(document).ready(function($) {
$('.pickcolor').click( function(e) {
colorPicker = jQuery(this).next('div');
input = jQuery(this).prev('input');
$(colorPicker).farbtastic(input);
colorPicker.show();
e.preventDefault();
$(document).mousedown( function() {
$(colorPicker).hide();
});
});
});
Can anyone help me tweak the js to make it work with multiple twin fields?
Not sure if this is still relevant or not... But I found this demo on HTMLDrive to do the trick.
Basically, it's already built into the farbtastic plugin... It just needs to be set up correctly, then you simply assign the picker to the required text box on some action.
var farbPicker = $.farbtastic('#colorpicker');
$('.tbColourPicker').each(function ()
{
farbPicker.linkTo(this);
})
$('.showColourPanel').click(function ()
{
var targetObject = input you want to edit;
farbPicker.linkTo(targetObject);
});
The only thing you'll need to watch for is having default colour values in the text boxes before editing with the picker.
Need some trick, but possible.
$('div.colorpicker-component').colorpicker();
var ColorPickedDom = null;
$(document).ready(function () {
// add new
$("body div#colorpicker_wrapper").on('click', 'div.colorpicker-component i.add_new_picker', function() {
var UploadTemplate = $('div#colorpicker_control_template').html();
$('div#colorpicker_wrapper').append(UploadTemplate);
});
// remove clicked
$("body div#colorpicker_wrapper").on('click', 'div.colorpicker-component i.remove_picker', function() {
$(this).parent().closest('div.colorpicker-component').remove();
});
// the trick
$('div#colorpicker_wrapper').on('click', 'div.colorpicker-component span.color_picker_trick', function(e) {
ColorPickedDom = $(this).parent();
$(ColorPickedDom).colorpicker('show');
});
});
span.color_picker_trick {
background-color: rgba(255, 0, 0, 0);
opacity: 0;
position: absolute;
width: 26px;
height: 30px;
cursor: pointer;
}
<div id="colorpicker_control_template" style="display: none">
<div class="input-append color colorpicker-component" data-color="rgba(255,146,180,1)" data-color-format="rgba">
<input type="text" class="input-medium" value="rgba(255,146,180,1)" readonly="">
<span class="color_picker_trick">a</span><span class="add-on"><i style="background-color: rgba(255,146,180,1);"></i></span>
<i class="btn add_new_picker" type="button" title="Add one more colorpicker">Add new</i>
<i class="btn remove_picker" type="button" title="Remove this colorpicker">Remove</i>
</div>
</div>
<div id="colorpicker_wrapper">
<div class="input-append color colorpicker-component" data-color="rgba(255,146,180,1)" data-color-format="rgba">
<input type="text" class="input-medium" value="rgba(255,146,180,1)" readonly="">
<span class="color_picker_trick">a</span><span class="add-on"><i style="background-color: rgba(255,146,180,1);"></i></span>
<i class="btn add_new_picker" type="button" title="Add one more colorpicker">Add new</i>
</div>
</div>
Working demo:
https://codepen.io/cosmiclaca/pen/jOyvRKO
i am working on a project in which i have to render rows dynamically . but user could also delete that row have a look at my current working
JQuery
var counter = 1;
function addrow() {
var textbox = "<div id='rows" + counter + "'> </br><label> Option : </label><input type='text' name='Answers[" + counter + "]' class='ahsan required' />Remove</div>";
var form = $("#form").valid();
if (form) {
$("#TextBoxesGroup").append(textbox);
counter++;
}
else {
return false;
}
}
html
<div id="TextBoxesGroup" style="margin-left: 100px;">
<div id="rows0">
</br><label>
Option :
</label>
<input type='text' name='Answers[0]' class='ahsan required' />Remove
</div>
</div>
<div>
<input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' /></div>
Now , if i have 10 rows there names will be Answers[0,1,2,3,4,5] . I want to remove input when i click on remove anchor and also reoder all textbox's name
For Example if i remove input at 4th index then all textbox automatically get re arranged . Can i Do it Please Help me and Thanks in Advance
You can make it without counter. This way your answers will be always ordered in the array starting by zero.
Here's a plausible solution:
$(function(){
$("#form").validate();
this.addrow = function() {
if ($("#form").valid()) {
var textbox = "<div> </br><label> Option : </label><input type='text' name='Answers["+$("#TextBoxesGroup div").length+"]' class='ahsan required' /><a class='remove-me' href='#'>Remove</a></div>";
$("#TextBoxesGroup").append(textbox);
$('.remove-me').click(function(){
$(this).parent().remove();
return false;
});
}
else {
return false;
}
}
this.addrow();
});
and the html is simple like this:
<form id="form">
<div id="TextBoxesGroup" style="margin-left: 100px;"></div>
<div>
<input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' />
</div>
</form>
I have this JQuery:
$(document).ready(function() {
$("#generate").click(function() {
var texts = [];
alert();
$("form label").each(function() {
var oLabel = $(this);
var oInput = oLabel.next();
texts.push(oLabel.text() + " " + oInput.val());
});
texts[0] += texts[1];
texts[2] += texts[3];
for(i=3;i<texts.length;i++)
texts[i-1] = texts[i];
texts[texts.length-1] = null;
$("#cont").html(texts.join("<br />"));
});
});
What it do is it reads form elements then types them as regular text (there is a purpose for this).
And this is how my form looks like ...
<div id="cont" style="float:right; width:75%; height:auto">
<form onSubmit="return generate();">
<label class="itemLabel" for="name">Name : </label>
<input name="name" type="text" class="itemInput" value="<? echo $queryB[1]; ?>" readonly="readonly" />
<label># Some Text</label><br />
<label for="priPhone" class="itemLabel">Customer Telephone Number : </label>Phone#
<input name="priPhone" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[2]; ?>" />
<label for="secPhone"> // Mobile#</label>
<input name="secPhone" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[3]; ?>" /><br />
<label class="itemLabel" for="email">Customer Email Address : </label>
<input name="email" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[4]; ?>" /><br />
<label>***************</label><br />
<label>Best Regards,</label><br />
<input name="another_field" type="text" /><br />
<label>last thing</label><br />
<button type="button" id="generate">Generate</button>
</form>
</div>
now, when I click the button "Generate", everything goes well except that it ignores "another_field" and doesn't get its value
Anyone got an idea to solve this? (Note: This piece of code will be running on around 25 forms so I need to have it working.)
UPDATE:
Sample output:
Name : username # Some Text
Customer Telephone Number : 90237590 // 3298579
Customer Email Address : email#host.com
***************
Best Regards,
last_field
last thing
Workaround
Since I'm having all the forms have the same ending, I've been able to get to this code:
texts[0] += " " + texts[1];
texts[1] = texts[2] + " " + texts[3];
for(i=4;i<texts.length;i++)
texts[i-2] = texts[i];
texts[texts.length-2] = texts[texts.length-3];
texts[texts.length-3] = $("#agent").val() ;
texts[texts.length-1] = null;
It solved the problem, but I'm looking for a better way to accomplish this.
Try this javascript:
$(document).ready(function() {
$("#generate").click(function() {
var texts = [];
$("form").children().each(function() {
var el = $(this);
if (el.prop('tagName') == "LABEL") texts.push(el.text());
if (el.prop('tagName') == "INPUT") texts.push(el.val());
if (el.prop('tagName') == "BR") texts.push("<br />");
});
$("#cont").html(texts.join(""));
});
});
Working example here:
http://jsfiddle.net/Q5AD4/6/
Your <br/> tag is the next tag after the label before "another_field". You should probably make your next call something like:
var oInput = oLabel.next('input');