Hello I need to make a form at test.html that on click changes index elements (title, image, description (text) and a href attribute) with input elements. Can you help me?
index.html
<html>
<body>
<p id="pal">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id="ch">Replace the first p element with new text</button>
</body>
</html>
test.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#ch").click(function(){
$("#pal").replaceWith(#in1);
});
});
</script>
</head>
<body>
<input id="in1" type="text"></input>
<input id="in2" type="text"></input>
</body>
</html>
Ok, if i understand well, you have an input tag where the user will write something, and when he clicks on the button, that content will go to another place.
Input where he writes:
<input type="text" id="user_text">
The place it should go once it is clicked:
<p id="pal">This is the target.</p>
The click button:
<button id="ch">Replace the first p element with new text</button>
The JQuery script should be:
$(document).ready(function(){
//on click
$("#ch").click(function(){
//get content from input (what user wrote)
var userContent = $("#user_text").val();
//put it inside the desired div
$("#pal").html(userContent);
//clean what user wrote
$("#user_text").val('');
});
});
If you want to see the result, here is the JSFiddle
Related
I want to get a paragraph data from HTML file into the php code.
In my html file I have the following line:
<p style="display: inline;" id="symptoms" name = "symptoms"</p>
In the html file document.getElementById('symptoms').value gathers all the necessary data I want to use in the php code. Obviously, $symptoms = $_POST['symptoms']; doesn't get anything. How can I get it work?
We can actually get the value inside the symptoms as shown here for Jquery. To use this value as php POST value. We can improvise this by next set of code.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<p style="display: inline;" id="symptoms" name = "symptoms"> HEllo Hari</p>
<script>
$(document).ready(function(){
alert($("#symptoms").html());
});
</script>
Maybe we modify following code as required to achieve what you expect
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<p style="display: inline;" id="symptoms" name = "symptoms"> HEllo Hari</p>
<form method="POST" action="/*toPHPfilePath*/" id="target" >
<input type="hidden" id="hidden_symptoms" name="symptoms">
</form>
<script>
$(document).ready(function(){
$("#hidden_symptoms").val($("#symptoms").html());
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
});
</script>
I am very new to web designing. I want to create a web page such that when the user is typing in the form, at the same moment that data must be shown on the left side of the same page as in the image below. Example, as the user types in the about me text box, the data area on the left side with about me title should also get updated instantly and dynamically with the same speed the user is typing.
Can anyone please help me how this is possible? or which language will i have to use to do this?
thanks in advance.
example image
You will have to use javascript to achieve this.
<input type="text" id="input">
<div id="output">
</div>
<script>
var input = document.getElementById('input');
var output = document.getElementById('output');
// add event listener to the input element
input.onkeyup= function() {
// set the output element HTML to what you type in
output.innerHTML = this.value;
}
</script>
Fiddle: https://jsfiddle.net/xpvt214o/124485/
Use the following code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('#name').keyup(function () {
$('#display').text($(this).val());
});
});
</script>
</head>
<body>
<input type="text" id="name"/>
<span id="display"></span>
</body>
</html>
I'am using CKEditor and i have problem with upload into database. First of all I want take the value from textarea id (I dont want use textarea name but the id) and give the value in the hidden input.
HTML & Jquery (test.php)
<!DOCTYPE html>
<html>
<head>
<!-- CKEditor full package v4.7.3 -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<!-- Jquery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form action="test2.php" method="POST" target="_blank">
<textarea id="description-down1"></textarea>
<script type="text/javascript">CKEDITOR.replace("description-down1")</script>
<br><br>
<input type="submit" name="save-button" value="Insert">
<!-- #3 take the value via name into php -->
<input type="hidden" name="insert-variable-value-name" id="insert-variable-value-id">
</form>
<script type="text/javascript">
$(document).ready(function(){
//#1 take value from textarea "id"
var data = // what code write here?
//#2 put the value of textarea into hidden input
document.getElementById('insert-variable-value-id').value = data;
});
</script>
</body>
</html>
PHP (test2.php)
<?php
//connection
$conn = new mysqli("localhost", "root", "", "test_engine");
// call the value from the hidden input
$description = $_POST['insert-variable-value-name'];
// Insert data
$insert_data = "INSERT INTO test (description)
VALUES('$description')";
$conn->query($insert_data);
?>
var data = CKEDITOR.instances['description-down1'].getData();
You need to remeber to set hidden input value before form submit or update that field in some interval.
Thanks Bart for the help. I find here the answer. First runs the code, then submit.
Previus Code:
<body>
<form action="test2.php" method="POST" target="_blank">
<textarea id="description-down1"></textarea>
<script type="text/javascript">CKEDITOR.replace("description-down1")</script>
<br><br>
<input type="submit" name="save-button" value="Insert">
<!-- #3 take the value via name into php -->
<input type="hidden" name="insert-variable-value-name" id="insert-variable-value-id">
</form>
<script type="text/javascript">
$(document).ready(function(){
//#1 take value from textarea "id"
var data = // what code write here?
//#2 put the value of textarea into hidden input
document.getElementById('insert-variable-value-id').value = data;
});
</script>
</body>
Edited Code:
<body>
<!-- Create form id='form-id' -->
<form action="test2.php" method="POST" target="_blank" id='form-id'>
<textarea id="description-down1"></textarea>
<script type="text/javascript">CKEDITOR.replace("description-down1")</script>
<br><br>
<!-- Create submit id='save-button' -->
<input type="submit" name="save-button" value="Insert" id='save-button'>
<!-- #3 take the value via name into php -->
<input type="hidden" name="insert-variable-value-name" id="insert-variable-value-id">
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#save-button').click(function(e){
//Stop
e.preventDefault();
//The code
//#1 take value from textarea "id"
var data = CKEDITOR.instances['description-down1'].getData();
//#2 put the value of textarea into hidden input
document.getElementById('insert-variable-value-id').value = data;
//Proceed the submit
$('#form-id').submit();
});
});
</script>
</body>
I working on a page with some JQuery and Kendo UI. This is my first JQuery project and I getting things along. However, my page refreshes for some reason. This is what I am trying to do: I have a text field where I can enter a search term and when I press a button, the query is sent to a php file and some json info will pop up. So far, I can get it to return something, but the page refreshs and all the data is gone.
code:
*<!DOCTYPE html>
<html>
<head>
<title>Search</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
</head>
<body>
<div id="example">
<form id="search">
<label for="search">Search For:</label>
<input type="text" id="txtSearch" name="q">
<button type="submit" id="submit">Find</button>
</form>
<div id="grid">
</div>
</div>
<script>
$(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "include/showsearch.php"
},
schema: {
data: "data"
}
},
columns: [{field: "id"},{field: "name"},{field: "season"}]
});
$("#submit").click(function(){
var textVal = $("#txtSearch").val();
var dynamicURL = "include/showsearch.php?show_name=" + textVal;
var grid = $("#grid").data("kendoGrid");
alert("sdf123");
grid.dataSource.transport.options.read.url = dynamicURL;
grid.dataSource.read();
alert("sdf");
});
});
</script>
</body>
</html>*
NOTE:
I used the alert functions to stop and see how the page reacts. How do I get the page from refreshing?
The reason this is happening is that the default action for your submit button is still occurring; submitting the form.
It's probably best to catch the form submission event rather than the button click as hitting Enter in a text field may also submit the form.
You will also need to prevent the default event action.
Change this
$("#submit").click(function(){
to this
$('#search').on('submit', function(e) {
e.preventDefault();
// and the rest of your code here
I have some php code that generates a random password. Next to a text box I have some text which says "click to Generate a random password".
What I am looking to achieve is when the text in double quotes above is clicked that the PHP code is run and the generated random password is then pasted into the text box which is beside the text above in double quotes.
How could do this? I am thinking maybe jQuery but not sure how I would do what I want above.
Here you are... complete and working example :)
Put files 'index.html' and 'passgenerator.php' into same directory.
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#generate').click(function(){
$.get('passgenerator.php', function(data) {
$('[name=password]').val(data);
});
})
});
</script>
</head>
<body>
<form action="">
<input type="text" name="password">
<input type="button" id="generate" value="Generate password">
</form>
</body>
</html>
passgenerator.php
<?php
echo sha1(uniqid());
?>
either use ajax to call the script page that generates the password or like col. shrapnel says port the generating function to javascript (which is a better idea)
Example (with jquery using ajax)
$.get("/PasswordGenerator.php",function(password)
{
$("#TextboxID").val( password );
});
where TextboxID is the id of the textbox u want the password to be added to.
Don't do it in php. Just do it in javascript. Here is a very neat tutorial that should show you the step by step instructions:
http://www.mediacollege.com/internet/javascript/number/random.html
Patrick Evans is right. You can setup your form like this :
<input type="button" value="Generate" onclick="generate();">
And in section you have to define a function
<script type="text/javascript">
function generate(){
$.get("/PasswordGenerator.php",function(password)
{
$("#TextboxID").val( password );
});
}
</script>
Try this ajax call to get the content using ajax and display it on the div.
$("#generate").click(function(){
$.get('url:to:urPHP',{
data:urData
},function(data){
$("#generatedPassword").html(data);
});
});
<input type="" id="generate" value="click to Generate a random password" />
<div id="generatedPassword">
<div>