Get the values of the form and replace variables in textarea - javascript

Hi i'm currently stuck with a task: I've to create a form on a page with fields and texarea.
i have to put info in fields and a text in textarea with variables : "hi my name is $name and i live at #adress...."
The values of these variables comes from fields of the form.
when i press on button it should change the $name by the value. So i'll get "hi my name is john".
And the idea would be to stay on same page.
This an example :
<html>
<form action="values.php" method="get">
Name: <input id="name" type="text" name="name"><br>
Adress<input id="name" type="text" name="adress"><br>
Phone<input id="name" type="text" name="phone" ><br>
Textarea<input id="textarea" type="text" name="textarea"> Hi my name is $name and you can call me on this number : $phone<br>
<input type="submit">
</form>
/Result after clicking a button/
Hi my name is John and you can call me on this number : 77665555544 // Result i want to obtain whithout leaving the page
My code in values.php is :
<?php
$description= $_GET["textarea"];
$description = str_replace( '$name',$_GET["name"],$description);
$description = str_replace( '$adress',$_GET["adress"],$description);
$description = str_replace( '$phone',$_GET["phone"],$description);
echo "<textarea>$description</textarea>";
?>

This is quite simple to be done, if I understood correctly. You can see a working version here: http://jsfiddle.net/ah9qp/
After the user has clicked on submit, you need to stop the form from actually submitting. This can be done by using the following: e.preventDefault();
After this, you need to grab all the values you want to output from the input boxes. You can do that by using the jquery .val(); This will get the value of the input. In order to get this though you have to have a specific ID associated with each input element. Below is your form modified to hear and interact with Jquery:
<form action="" method="get" id="formit">
Name: <input id="name" type="text" name="name" value="John"><br>
Adress<input id="address" type="text" name="adress"><br>
Phone<input id="phone" type="text" name="phone" value="77665555544"><br>
Textarea<textarea id="textarea" rows="5">Hello my name is $name and you can call me at this: $phone</textarea><br>
<input type="submit" id="textit">
</form>
Once you form is set up correctly, all you need to do is add in the jquery file:
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
and last you need to create the code using jquery that will achieve what you need:
$("#textit").click(function(e){
//prevents the form from submitting
e.preventDefault();
//get variables from input
var name = $("#name").val();
var phone = $("#phone").val();
//set var to textarea for output
var textarea = $("#textarea");
textarea.val("Hi my name is "+name+" and you can call me on this number: "+phone);
});
You will see the id's in the form are being called by jquery and outputted. Hope this helps! Let me know if you have any questions.

Use event.preventDefault(); to prevent submiting the form (refreshing the page), and fill the textarea with the values.
Example:
$('form').submit(function(event) {
/* rest of the script */
event.preventDefault();
});

Related

How to copy the hidden field value and pass it on another page using jquery in CodeIgniter?

I am new with CodeIgniter and I want to pass hidden field value to another page using jQuery in CodeIgniter. Can I do this using jQuery?
<input type="hidden" name="grdtot" class="grdtot" />
this hidden field on cart.php page
<label id="grdtot_c" name="grdtot_c" class="grdtot_c"></label>
I want to fetch this hidden field value on checkout.php page. How I can do this using jQuery?
You can do this another way using localstorage to getting value from another page
Just write like this on page one.
localStorage.setItem('Gridtotal', $('.grdtot').val());
And get value from another page.
var grdTotal= localStorage.getItem('Gridtotal');
$('#grdtot_c').val(grdTotal);
Suppose You have form given below:
<body>
<div>Upload data to the server without page Refresh</div>
<input type="hidden" name="hidden_name" id="hidden_name">
<input type="text" name="name" id="name">
<input type="text" name="email" id="email">
<input type="text" name="website" id="website">
<input type="submit" name="submit" id="save" value="Submit">
<div id="display"></div>
</body>
And Now Your Script to send data to Your Controller.
You must have to use ajax to send data to the controller in CodeIgniter, And It will make your work easy.
<script>
$(document).ready(function(){
$('#save').click(function(){
var hidden_name = $('#hidden_name').val();
var name = $('#name').val();
var email = $('#email').val();
var website = $('#website').val();
$.ajax({
type:'POST',
url:'<?php echo base_url();?>index.php/controller_name/function_name',
async:false,
data:{
"done":1,
"hidden_name":hidden_name,
"name":name,
"email":email,
"website":website
},
success:function(data){
$('#display').html(data);
}
});
});
});
</script>

How to set a variable js with input (form) tag html / PhP

I want to know if i can set a variable when the player finish the him form.
E.g:
<form>
First name:<br>
<input type="text" name="firstname" value="Pedro">
<br>
Last name:<br>
<input type="text" name="lastname" value="Pinto">
<br><br>
<input type="submit" value="Submit">
</form>
And when he submit, execute a function on JS, what saves the firstname and lastname to a variable.
And i want know in PhP, if it's possible too thanks.
JS solution:
In this solution, the data is processed client side. Be careful though if you are saving any of this to your server since users can use their browser to manipulate the data in unintended ways.
HTML:
<form>
First name:<br>
<input type="text" id="firstname" value="Pedro">
<br>
Last name:<br>
<input type="text" id="lastname" value="Pinto">
<br><br>
<input type="submit" value="Submit" onclick="myFunction()">
</form>
JS:
function myFunction() {
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
}
PHP solution:
In this solution, the data is processed server side. Here, you will clear out any JS variables because this causes a new page to load when you do this. So, generally, do not do this if you need to continue working on page after saving your variables. Also, note that the HTML forms use "name" instead of "id" when passing a post.
HTML:
<form action="MYPAGE.php" method="post">
First name:<br>
<input type="text" name="firstname" value="Pedro">
<br>
Last name:<br>
<input type="text" name="lastname" value="Pinto">
<br><br>
<input type="submit" value="Submit">
</form>
PHP:
<?php
$firstname = $_POST["firstname"];
$lastname = $_POST["lastname"];
?>
AJAX Solution: The third way to do it which is sort of a hybrid is to use AJAX. In this solution you use JavaScript to collect the variables, then you POST the data to another .php file without navigating away. This way you don't clear out any of your JavaScript variables, and you can write the data to the server. Then whatever content is generated by your targeted PHP page can be loaded into the page you are already on by inserting it into the element you target with your result.
NOTE: This sample code uses jQuery.
HTML:
<form>
First name:<br>
<input type="text" id="firstname" value="Pedro">
<br>
Last name:<br>
<input type="text" id="lastname" value="Pinto">
<br><br>
<input type="submit" value="Submit" onclick="myFunction()">
</form>
<div id="MYTARGETELEMENT"></div>
JS:
function myFunction() {
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
$.ajax({
type:"POST",
url: "MYPAGE.php",
data: {
firstname:firstname,
lastname:lastname
},
success: function(result){
$("#MYTARGETELEMENT").html(result);
}
});
}
PHP:
<?php
$firstname = $_POST["firstname"];
$lastname = $_POST["lastname"];
echo("Post Received By Server");
?>
var username = $("input[name=firstname]").val();
var lastname = $("input[name=lastname]").val();
This is how you get the value of both input field with Jquery. The first part gets your input by it's name, .val() gets the value from that input.
How to get it in PHP:
Add a name to the submit button:
<input type="submit" name="submit" value="Submit">
Then use this code:
<?php
if(isset($_POST['submit'])) {
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
}
?>

HTML,PHP,Javascript Save to .txt File

Is it possible to save to a .txt file all the generated or the inputted text on the text area? I just want to add a Save button besides the submit button or at the bottom and just save it directly to a .txt file. Thanks
Here's my code:
<html>
<body>
<form id="myForm">
Name: <br><input type="text" name="Name" placeholder="Name" size="40"/><br/>
Phone: <br><input type="text" name="Phone No" placeholder="Phone Number"/><br/>
Callback: <br><input type="text" name="Callback No" placeholder="Callback Number"/><br/>
CID: <br><input type="text" name="CID" placeholder="CID No" /><br/>
Status OK: <br><select name="Status" placeholder="Status"><option>Yes<option>No</select><br/>
INBOUND: <br><select name="INBOUND" placeholder="INBOUND"><option>Yes<option>No</select><br/>
<button type="button" onclick="ShowText();">Submit</button>
</form>
<p>Result:</p>
<p><textarea cols=40 rows=7 id="show" onClick='selectText(this);'></textarea></p>
<script>
function ShowText(){
// find each input field inside the 'myForm' form:
var inputs = myForm.querySelectorAll('input,select');
// declare 'box' variable (textarea element):
var box = document.getElementById('show');
// clear the 'box':
box.value = '';
// loop through the input elements:
for(var i=0; i<inputs.length; i++){
// append 'name' and 'value' to the 'box':
box.value += inputs[i].name + ': '+inputs[i].value+'\n';
}
}M
function selectText(textField)
{
textField.focus();
textField.select();
}
</script>
<textarea rows="9" cols="40">
Issue:
Steps:
</textarea>
</body></html>
You can try to use fopen.
if your text from yout post form example : $_POST['nameoftextarea'] you can add on variable. Maybe like this
<?php
$myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
$txt = $_POST['nameoftextarea'];
fwrite($myfile, $txt);
fclose($myfile);
?>
try to explore with the path of your text result too.
here some other example i found to make txt file on php create txt file using php
CMIWW
Server Side
Use the following code for server side:
$text = $_POST["textarea_name"] //Needs to correspond with the name in the HTML
file_put_contents("myFile.txt", $text); //Change the file path to your needs
For more info look at this: http://php.net/manual/en/function.file-put-contents.php
Simple as that. Remember to change your form tag like so (obviously change the action link):
<form id="myForm" action="/link/to/process/form" method="POST">
and change the name of the text area like so:
<textarea cols=40 rows=7 id="show" onClick='selectText(this);' name="textarea_name"></textarea>
You'll also need to add a Save button to the form.
<button type="submit">Save</button>
Client Side
For client side check this out:
http://eligrey.com/demos/FileSaver.js/
and
http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side
Those links also tell you how to save data other than text, but I assume your only interested on the text bit.

JQuery replacing form elements with text

I am in a situation, where I need to convert my form filled data to a text before submitting.
Like for example, the form may have a name field and an email field. I will fill the form with details, then when I click export as text, I need to get the contents of the html in text format
name = <input type="text" name="name" /> <!-- user enters "john" -->
email = <input type="text" name="email" /> <!-- user enters a#b.com -->
when I export I need
name = john
email = a#b.com
Currently, I am using this code to convert. But the problem is, once I convert I am not able to get back to previous state.
$("#btn").click(function(){
$('.replace').replaceWith(function(){
return this.value
});
});
So, what I thought was, I will display the output in a div tag. But if I try
document.getelementByID("parentdiv").value
I am unable to get the form values.
Any suggestions please?
Update:
serialize is not working as expected. The above one is a small example. The form is so complex and I need to visually render the form values to its labels.
$x = $('form').serialize();
This will give you a string of elements and values which you can easily work with, it's intended to use as JSON, however for your intended purpose it should be fairly easy to fiddle around with.
It will give you an output similar to
name=John&x=y
try like this using serializeArray():
$("#btn").click(function(){
var x = $('form').serializeArray();
console.log(x);
var str="";
$.each(x, function( index, val ) {
str=str+val.name+":"+val.value+"<br>";
});
$('#textFrom').html(str);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
name =<input type="text" name="name" /> <!--user enters "john"-->
email =<input type="text" name="email" /> <!--//user enters a#b.com-->
</form>
<button id="btn">click</button>
<div id="textFrom"></div>
Use jQuery serialize function :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").text($("form").serialize());
});
});
</script>
</head>
<body>
<form action="">
Name: <input type="text" name="name" value="Tina" /><br>
Email: <input type="text" name="LastName" value="tina#yopmail.com" /><br>
</form>
<button>Export Values</button>
<div></div>
</body>
</html>
Output will be : name=Tina&LastName=tina%40yopmail.com

How to use the textbox value to fetch the records and to display it in the same page

i am having a Form like
<script language="javascript" type="text/javascript">
function formfn()
{
var str = document.getElementById('TitleSearch').value;
alert(str);//displays the keyword like database
}
</script>
<form name="f1" method="post">
<p><label for="TitleSearch">Keywords:</label>
<input title="Keyword" size="40" value="" id="TitleSearch"></p>
<p>
<input type="submit" id="im-search" value="Search" name="im-search" onClick="formfn();"></p>
</form>
I am having a page where in the top i have this form on search it has to take the value of the textbox TitleSearch and to use this to retrieve the records matching by
<?php
$db =& JFactory::getDBO();
$query = 'SELECT * from #__chronoforms_Publications where keyword like "%valueretrieved%" ';
$db->setQuery($query);
$rows = $db->loadObjectList();
//echo $rows;
?>
Once the search button is clicked the text box value of the keyword is retrieved .
I am trying to use this value in the select query to fetch the records and to display in the same page..
How to do so..
Pls change the button type
Here is the modified code:
<script language="javascript" type="text/javascript">
function formfn()
{
var str = document.getElementById('TitleSearch').value;
alert(str);
}
</script>
<form name="f1" method="post">
<p><label for="TitleSearch">Keywords:</label>
<input title="Keyword" size="40" value="" id="TitleSearch"
name="TitleSearch"></p>
<p> <input type="button" id="im-search" value="Search" name="im-search"
onClick="formfn();"></p>
</form>
You need to look into AJAX
Here is the simple version from w3schools
http://www.w3schools.com/PHP/php_ajax_database.asp
alternative is jQuery:
The first of the links here can get you to the next step - google for
php ajax jQuery
This is AJAX database.
See
http://www.w3schools.com/php/php_ajax_database.asp
which gives a really specific details. You need a separate PHP page to call your DB.
I did this function before. Just make sure your PHP page is not accessible and safe enough.

Categories