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>
Related
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 have tried using the code below to save and display information using ajax. But it doesn't work.
Here's the code.
<?php session_start();?>
<html>
<head>
<script src="style/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="style/jquery-1.11.1.min.js"></script>
<script>
$(function() {
$("#ajaxquery").live( "submit" , function(){
// Intercept the form submission
var formdata = $(this).serialize(); // Serialize all form data
// Post data to your PHP processing script
$.post( "show.php", formdata, function( data ) {
// Act upon the data returned, setting it to #success <div>
$("#success").html ( data );
});
return false; // Prevent the form from actually submitting
})
});
</script>
</head>
<form id="ajaxquery" method="post" action="">
<label for="field">Type Something:</label>
<input type="text" name="field" id="field" value="" />
<input type="submit" value="Send to AJAX" />
</form>
<div id="success"> </div>
</html>
AND MY show.php which displays data in id="success"
<?php
// Process form data
echo '<strong>You submitted to me:</strong><br/>';
print_r( $_REQUEST );
?>
Please help...
at first you have to load jquery ui after jquery
<script src="style/jquery-1.11.1.min.js"></script>
<script src="style/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
then in this case you don't need to use live you can simply do this
$("#ajaxquery").submit(function(){
// your code
})
"live" function ( or for now "on" ) used when you going to create or load html code after you set events.
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 an HTML file that has a form with two fields. These fields' value should be posted to a PHP and this PHP should be fetched from the HTML using JQuery. This is what I implemented.
My HTML file:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#first").load("result_jquery.php");
});
});
</script>
</head>
<body>
<div id="first"></div>
<div>
<form method="POST" id="myForm">
Name: <input type="text" name="name"/><br/>
Number: <input type="text" name="number"/><br/>
<button>submit</button>
</form>
</div>
</body>
This is my result_jquery.php
<?php
$n = $_POST["name"];
echo "hello ".$n;
?>
When I click the submit button, the hello is getting printed. But the name is not getting printed. Can you please help me with this. I don't know where I am going wrong.
I think that the use of the button element is the worry and the code that i will put now it is working properly as you need so try this and tell me the result :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
var n = $('[name="namee"]').val();
var nb = $('[name="number"]').val();
$("#first").load("result_jquery.php",{'namee':n,'number':nb},function(data){});
});
});
</script>
</head>
<body>
<div id="first"></div>
<div>
<form method="POST" id="myForm">
Name: <input type="text" name="namee"/><br/>
Number: <input type="text" name="number"/><br/>
<input type="button" value="Submit" id="button" />
</form>
</div>
</body>
</html>
copy this code:
<script type="text/javascript">
$(document).ready(function() {
$("#send").click(function() {
$.ajax({
type: "POST",
data : "name="+$( '#name' ).val(),
url: "result_jquery.php",
success: function(msg) {
$('#first').html(msg);
}
});
});
});
</script>
change this in form
<form method="POST" id="myForm">
Name: <input type="text" id="name" name="name"/><br/>
Number: <input type="text" id="number" name="number"/><br/>
<input type="button" id="send" value="Submit">
</form>
just try that and tell me the result :)
var n = $('[name="name"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'name':n,'number':nb},function(data){});
Note try to change the element name for the name field from "name" to "namee" and apply changes as needed look like this :
var n = $('[name="namee"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'namee':n,'number':nb},function(data){});
and the result_jquery.php file :
<?php
$n = $_POST["name"];
echo "hello ".$n;
?>
From the jQuery documentation on load:
This method is the simplest way to fetch data from the server. It is
roughly equivalent to $.get(url, data, success) except that it is a
method rather than global function and it has an implicit callback
function. When a successful response is detected (i.e. when textStatus
is "success" or "notmodified"), .load() sets the HTML contents of the
matched element to the returned data. This means that most uses of the
method can be quite simple:
You are performing a HTTP GET with that method, and not a POST.
My suggestion would be if you want to send an AJAX request to your server with information in it, get used to using the long form jQuery AJAX:
$.ajax({
data: 'url=encoded&query=string&of=data&or=object',
url: 'path/to/server/script.php',
success: function( output ) {
// Handle response here
}
});
For more info, see jQuery documentation: http://api.jquery.com/jQuery.ajax/
I am new to using jquery and i have written the following code and it does not work and i am not able to figure out what the mistake is ..syntax might also be wrong.
It has 2 submit buttons while using button1 it should get info from the DB and display on the same page.i.e., get the title from the DB and display on the same page.
While second submit button is used to submit title into the DB and update it(written in script_2.php).
<form id="myForm" method="post">
id: <input type="text" name="search"/>
<input type="button" id="button1" value="Submit to script 1" />
<input type="button" id="button2" value="Submit to script 2" />
title:<input type="text" name="title"/>
</form>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },
function(output) {
$('#age').html(output).show();
}) ;
}) ;
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
</head>
Help appreciated.
You are missing the }); to close the $("#button1").click function:
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },function(output) {$('#age').html(output).show();});
});
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
You have too many closing
<script type="text/javascript" src="jquery.js"></script></script>
to
<script type="text/javascript" src="jquery.js"></script>
jQuerys attr() expects strings, not an object, like:
$('form#myForm').attr("action", "script_2.php");
You form is before your <head> tag. It should be after your </head> and in a <body> tag.
You are putting the results of your ajax call in an element with id age, but I don't see any element with that id on your page.
That's all for errors (that I see as of now), but you can also speed up your selecter here $('form#myForm') by changing it to $('#myForm') since id's are unique, and I doubt you have any element with the id myForm which isn't a form.