update
I just try to call the farbtastic color picker, all scripts are included in the Html. the following code is a form with the color picker as placeholder. How can I call my farbtastic color picker? I'm using the following javascript code enclosed.
enter code here <form action="controller.php" method="post" class="popupform" id="form_changecolor">
<div id="colorpicker"></div>
<table>
<tr><th>huidige:</th><th>nieuwe:</th></tr>
<tr><td><input type="text" name="oldcolor" disabled="disabled" id="oldcolor" />
</td><td><input type="text" name="newcolor" id="newcolor" /></td></tr>
</table>
<div class="buttonrow">
<input type="hidden" name="page" value="{$PAGE}" />
<input type="hidden" name="module" value="changecolor" />
<input type="hidden" name="id" id="parameter_key" value="" />
<input type="submit" class="btnOk" value="Aanpassen" />
<input type="button" class="btnCancel" value="Annuleren" />
</div>
enter code here // color picker.
$("#content").dblclick(function() {
alert('color picker');
$("#colorpicker").farbtastic("#color");
});
See Basic Usage on the plugin's site.
Make sure you have the empty div in place in your code. And place the jQuery script first before the farbtastic script
<form>
<label for="color">Color:</label>
<input id="color" type="text" value="#123456" />
<div id="colorpicker"></div>
</form>
<script type="text/javascript">
$(function() {
$("#colorpicker").farbtastic("#color");
});
</script>
Related
I have a simple form:
<form class="form-contact-warp form-calc-ship cb-form" action="javascript:redirect();">
<input class="form-control" required="" id="textBox" type="text" name="code" size="15" placeholder="USI-TECH affiliate ID">
<button type="submit" class="btn-main-color btn-block"> Create page</button>
</form>
If I put in input field the text daniel, I want to append a link.
Example:
I put daniel in and I click submit. I want to appear below the link
www.example.com/daniel and the text This is your link.
Thanks
I think the best way to do this is to use jQuery or JavaScript by itself:
<form class="form-contact-warp form-calc-ship cb-form" action="" method="post">
<input class="form-control" required="" id="textBox" type="text" name="code" size="15" placeholder="USI-TECH affiliate ID">
<button type="submit" class="btn-main-color btn-block"> Create page</button>
</form>
<div id="response"></div>
<!-- add jquery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$('form').on('submit',function(e){
e.preventDefault();
$('#response').html('This is your link:<br />http://www.example.com/'+encodeURI($('#textBox').val()));
});
});
</script>
Here is a jQuery demo found at jsFiddle
Here is the same thing, only it changes when you type.
If you want to use purely PHP, you need to check something has been submitted:
<form class="form-contact-warp form-calc-ship cb-form" action="" method="post">
<input class="form-control" type="text" name="code" size="15" placeholder="USI-TECH affiliate ID">
<input type="submit" class="btn-main-color btn-block" value="Create page" />
</form>
<?php
# Check if there is a post
if(!empty($_POST['code'])) {
# You want to make sure you remove possible html and covert the string to a url.
echo 'This is your link:<br />http://www.example.com/'.urlencode(trim(strip_tags($_POST['code'])));
}
how can I get users input and print it into another text field input?
I'm using php. I have 2 input types of text and one submit button. i want to be able to print the results of input A into the input textbox B
example:
<form>
<input type="text" name="input"/> <!-- thiss is where the user enters text -->
<input type="text" name="output"/> <!-- I take that text out and output it here -->
<input type="submit" value="submit" <?php echo $input;/>
</form>
I keep trying to echo "$input" into output but not working.
hope this will help
<?php
$output= (isset($_POST['submit']))?$_POST['input']:'';
?>
pure php. <br>
try to input value in input field then submit.
<form method="post">
<input type="text" name="input"/> <!-- thiss is where the user enters text -->
<input type="text" name="output" value="<?php echo $output;?>"/> <!-- I take that text out and output it here -->
<input type="submit" name="submit" value="submit">
</form>
using javascript onchange.<br>try to input value in field input1
<form method="post">
<input type="text" id="input1" name="input1" onchange="clone();"/> <!-- thiss is where the user enters text -->
<input type="text" id="output1" name="output1" /> <!-- I take that text out and output it here -->
<input type="submit" name="submit1" value="submit">
</form>
<script>
function clone()
{
var x = document.getElementById("input1").value; document.getElementById("output1").value=x;
}
</script>
You cannot do this with PHP since PHP is a server side language. It does not support client side manipulation.
You will need something like this.
<script type="text/javascript">
$(document).ready(function () {
$(document).on('change', 'input[name="input"]', function () {
var contents = $(this).val();
$('input[name="outut"]').val(contents);
})
});
</script>
<!-- HTML -->
<form method="post">
<input type="text" name="input" />
<input type="text" name="output" value="" />
<input type="submit" name="submit" value="submit">
</form>
For more information about jQuery take a look at this W3Schools article
May be this what you are looking for using simple javascript events
function myFunction(){
var a=document.getElementById('a').value;
document.getElementById('b').value= a
}
<form>
<input type="text" name="input" onkeydown="myFunction()" onkeydown="myFunction()" id="a"/> <!-- thiss is where the user enters text -->
<input type="text" name="output" id ="b"/> <!-- I take that text out and output it here -->
<input type="submit" value="submit" >
</form>
I want to add text without reloading the page.
Here I have 2 TField (each with button POS and NEG) and 2 TArea (1 TArea POS and 1 TArea NEG).
when i input some text in first TField and then press POS button, the text added to TArea POS, and vice versa, if there is input in second TField then i hit POS, then my input append to TArea POST too.
In pure php with using FORM I could do it. but here I want page without reloading.
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<input type="submit" id="neg" name="neg" value="NEG"/>
</div>
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<input type="submit" id="neg" name="neg" value="NEG"/>
</div>
<div id="box" >
<textarea style="width:420px" name="posbox" rows="4" cols="70"></textarea>
<textarea style="width:420px" name="negbox" rows="4" cols="70"></textarea>
</div>
<?php
if (isset($_POST['pos'])) {
}
if (isset($_POST['neg'])) {
}
?>
Can you help my case?
Thanks for the help.
note : here i using same ID for all my input.
You cant do asynchronous requests with php. It is server compiled, not like javascript that is compiled by the browser..
learn how the internet works!
You can change fields in html with Javascript. The problem of your code is that your buttons are "submit" and thus a form has to be submitted (the page reloaded, etc). With these small changes you can get what you want:
<html>
<head>
<script>
function changeField()
{
document.form1.tweet.value=document.form0.tweet.value;
}
</script>
</head>
<form name='form0' id='form0'>
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<input type="submit" id="neg" name="neg" value="NEG"/>
</div>
</form>
<form name='form1' id='form1'>
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<button type="button" id="neg" name="neg" value="NEG" onclick="changeField();">NEG</button>
</div>
</form>
</html>
Logically, the only button including the new functionality is "neg" in form1: when it is clicked, the text in the "tweet" textbox above is written into the one below.
How to submit this form without using submit button. I want to submit it in loading this form,
<form name="frm1" id="frm1" action="../somePage" method="post">
Please Waite...
<input type="hidden" name="uname" id="uname" value="<?php echo $uname;?>" />
<input type="hidden" name="price" id="price" value="<?php echo $price;?>" />
</form>
You don't need Jquery here!
The simplest solution here is (based on the answer from charles):
<html>
<body onload="document.frm1.submit()">
<form action="http://www.google.com" name="frm1">
<input type="hidden" name="q" value="Hello world" />
</form>
</body>
</html>
You can try also using below script
<html>
<head>
<script>
function load()
{
document.frm1.submit()
}
</script>
</head>
<body onload="load()">
<form action="http://www.google.com" id="frm1" name="frm1">
<input type="text" value="" />
</form>
</body>
</html>
Do this :
$(document).ready(function(){
$("#frm1").submit();
});
You can do it by using simple one line JavaScript code and also be careful that if JavaScript is turned off it will not work. The below code will do it's job if JavaScript is turned off.
Turn off JavaScript and run the code on you own file to know it's full function.(If you turn off JavaScript here, the below Code Snippet will not work)
.noscript-error {
color: red;
}
<body onload="document.getElementById('payment-form').submit();">
<div align="center">
<h1>
Please Waite... You Will be Redirected Shortly<br/>
Don't Refresh or Press Back
</h1>
</div>
<form method='post' action='acction.php' id='payment-form'>
<input type='hidden' name='field-name' value='field-value'>
<input type='hidden' name='field-name2' value='field-value2'>
<noscript>
<div align="center" class="noscript-error">Sorry, your browser does not support JavaScript!.
<br>Kindly submit it manually
<input type='submit' value='Submit Now' />
</div>
</noscript>
</form>
</body>
using javascript
<form id="frm1" action="file.php"></form>
<script>document.getElementById('frm1').submit();</script>
You missed the closing tag for the input fields, and you can choose any one of the events, ex: onload, onclick etc.
(a) Onload event:
<script type="text/javascript">
$(document).ready(function(){
$('#frm1').submit();
});
</script>
(b) Onclick Event:
<form name="frm1" id="frm1" action="../somePage" method="post">
Please Waite...
<input type="hidden" name="uname" id="uname" value=<?php echo $uname;?> />
<input type="hidden" name="price" id="price" value=<?php echo $price;?> />
<input type="text" name="submit" id="submit" value="submit">
</form>
<script type="text/javascript">
$('#submit').click(function(){
$('#frm1').submit();
});
</script>
I use the farbtastic color picker, I included all files for this, but how can I call this color picker when I double click?
More info:
That's my placeholder in my .tpl file. and I call it as follow.
// color picker selecteren.
$(function(){
$("#color").dbclick(function(){
$('#colorpicker').farbtastic('#color');
});
});
<!-- new color form -->
<form action="controller.php" method="post" class="popupform" id="form_changecolor">
<div id="colorpicker"></div>
<table>
<tr><th>huidige:</th><th>nieuwe:</th></tr>
<tr><td><input type="text" name="oldcolor" disabled="disabled" id="oldcolor" /></td><td><input type="text" name="newcolor" id="newcolor" /></td></tr>
</table>
<div class="buttonrow">
<input type="hidden" name="page" value="{$PAGE}" />
<input type="hidden" name="module" value="changecolor" />
<input type="hidden" name="id" id="parameter_key" value="" />
<input type="submit" class="btnOk" value="Aanpassen" />
<input type="button" class="btnCancel" value="Annuleren" />
</div>
</form>
#NeXXeus, I already try it to do so (too big for a comment, and useful in the context of this question):
That's my placeholder in my .tpl file. and I call it as follow.
// color picker selecteren.
$(function(){
$("#color").dbclick(function(){
$('#colorpicker').farbtastic('#color');
});
});
<!-- new color form -->
<form action="controller.php" method="post" class="popupform" id="form_changecolor">
<div id="colorpicker"></div>
<table>
<tr><th>huidige:</th><th>nieuwe:</th></tr>
<tr><td><input type="text" name="oldcolor" disabled="disabled" id="oldcolor" /></td><td><input type="text" name="newcolor" id="newcolor" /></td></tr>
</table>
<div class="buttonrow">
<input type="hidden" name="page" value="{$PAGE}" />
<input type="hidden" name="module" value="changecolor" />
<input type="hidden" name="id" id="parameter_key" value="" />
<input type="submit" class="btnOk" value="Aanpassen" />
<input type="button" class="btnCancel" value="Annuleren" />
</div>
</form>
You question isn't very clear, this page has a very nice description on setting it up: http://acko.net/dev/farbtastic
Basing off of the example there, if you only want it to become a colorpicker when it is double-clicked...
$("#color").dblclick(function(){
$('#colorpicker').farbtastic('#color');
});