Well, i'm very new to Javascript and PHP, and I have a problem.
The idea: I want to do some post area, where in a single PHP page people will fill a form and it will create a little bootstrap panel. Don't worry about multiple pages, it's like a... wall.
Example:
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">My message</h3>
</div>
<div class="panel-body">
<h6>This is a test!</h6>
</div>
</div>
</div>
I don't know exactly how to do this. What i think is that in another page, there will be a form receiving the html contents for the panel title and body and then the PHP code will create html code [not a file] using this text and will put them in another file.
EDIT: As you can see in the comments, i'll have to use PHP and mySQL. I'm still not sure on how to do that.
Okay, i made this for you. The following is just for give you a start, the code is not correctly written, but it will give you a way to start your "project".
Firstly, create your database for storage your post, as follow :
TABLE_POST
title
content
date
autor
Then wall.php :
Start your file by getting with a query, all existing post in your database :
var post_list = "select id, pseudo, title, date, autor from table_post";
Once you have it, display it as you want :
<div>
foreach (post in post_list) {
echo "<div>";
echo "<h1>".post["title"]."</h1>";
echo "<p>".post["content"]."</p>";
...
echo "</div>";
}
</div>
In an other page, you can have your form :
form.php
<form id='myform' method='post' action='add_post.php'>
<input type='text' id='title'/>
<input type='text id='content' />
<input type='text' id='autor' />
<input type='submit' value='Post it !'>
</form>
And in an other page, you can have the function to insert in the database :
add_post.php
insert into table_post VALUES ($_POST["title"], $_POST["content"], NOW(), $_POST["autor"]);
I repeat, i just give a structure for your achievement, i didn't provide a correct syntaxe of the code.
Hope it can help you
Related
So I've been playing around with quill for a day or two. Currently building a website to learn more about javascript and ajax. But the formatting using quill isn't really working that smooth..
I started to read a little here but those solutions didn't get me that far.
I'm appending the result to a hidden textarea. Here I got 2 options. Taking the entire "#editor" element - Which works the best. It gives me the correct formatting and everything.
Problem is that I'm getting "Everything" - Including the tooltip div, so the posted information comes with an input box as well as the "ql classes".
So I tried to add "ql-editor" as well and if I do that, I get the correct text without the divs - But the formatting is lost instead..
Anyone know what I'm doing wrong?
Code:
<div class="content-div">
<div class="article_div">
<h2>Add new article</h2>
<form action="test.php" method="post" id="news_box">
<div id="editor"></div>
<textarea name="test" style="display:none" id="hiddenArea"></textarea>
<input type="submit" value="Done">
</form>
</div>
</div>
</div>
</div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
<script>
$("#news_box").on("submit",function(){
$("#hiddenArea").val($("#editor .ql-editor").html());
})
</script>
I'm soooo sorry for taking up anyone's time..
Found a solution..
After posting the info to the php page - I added a variable.
<?php
$news_text = "<pre>";
$news_text .= $_POST['test'];
$news_text .= "</pre>";
echo $news_text;
?>
I want to fetch some data (without reloading page) based on UserIds that are linked to a tags. I am not able to pass on UserID to jquery successfully and accurately. What it does is, just picks the last UserID and fetches it.
I have also tried to pass on variable throuh a-tag URL but could not get it accurately in jquery file. It fetches the data from already opened url, not the one being clicked right now.
HTML:
<?php foreach($Messagers as $Messagers1){ ?>
<form action="" method="post">
<input type="hidden" id="ANP" value="<?php echo ($Messagers1['UserID']*3);?>"></input>
<a class="LoadMsgsBtn">
Click to load data
</a>
</form>
<?php}?>
<div id="result">
<--The output will come here!-->
</div>
jquery:
$(document).ready(function(){
$(".LoadMsgsBtn").click(function LoadMsgsfunc(){
var ANP = $("input#ANP").val();
var Msg=6;
alert(ANP);
$("#result").load("LoadDB.php",{
ANP: ANP,
Msg: Msg
});
})
});
LoadDB.php:
<?php
$ID = $_POST['ANP'];
$Msg = $_POST['Msg'];
echo $ID . "\n";
echo $Msg;
I want to fetch data from database without reloading using UserID sent. $Messager is an array having multiple rows, there is a series of a-tags. clicking on any a-tag sents corresponding UserID to jquery code
Classic issue of multiple element selection. It's a bit tricky when you are using loops and jquery selectors ;) Check out the following code. It should work like butter B)
<?php foreach($Messagers as $Messagers1){ ?>
<form action="" method="post">
<a class="LoadMsgsBtn" href="javascript:void(0)" onclick="featchData('<?php echo ($Messagers1['UserID']*3);?>')">
Click to load data
</a>
</form>
<?php}?>
<div id="result">
<--The output will come here!-->
</div>
Javascript
function featchData(userId)
{
console.log(userId);
//if you get the id, write in the rest of the code here ;)
}
I want to create a fully dynamic chat UI for my website,
But it reloads the whole page if a person submits the button this will directly show the div
<div class="messeging" id="msg">
<?php print $message->getName() ." : " . $chat->message . ""; ?>
</div>
Without reload msgs are save in some xml file path like example (../user/xml)
HTML
<form action="action.php" method="post">
<input type="text" id="input" value="php echo">
<input type="submit" value="send" onclick="showDiv()">
</form>
<div class="messeging" id="msg">
<?php print $message->getName() ." : " . $chat->message . ""; ?>
</div>
i don't know javascript/ajax well how to solve this
Try jquery ajax, on submit button send last msg for save into db and fetch all record and show them into chat page. so each time you send msg it will fetch all msg. if you don't know about how ajax work then let me know.
Begin by looking at the event on forms called 'onSubmit'. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit
Once you understand that, you can 'event.preventDefault()' in your 'onSubmit' method handler. Or in English, keep a form's default behavior to submit to the action from occurring.
After preventing the default action, you will need to do something with the form, and the easiest in latest browsers is to use the fetch API. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
You should be able to submit the data in the form to some endpoint that returns the HTML you wish to inject.
Once the HTML has been successfully returned, simple document.createElement methods with append (https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) will need to be used.
Good luck learning the web!
On form submit, I want to give the user a message.
Originally, I was doing
if(isset($_POST['submit'])) {
echo "submitted";
}
But this would appear randomly at the top of the page.
I want control where the message is output, so I wanted to append the message to a DOM element... to do that, I thought I could use JavaScript as so:
if(isset($_POST['submit'])) {
echo "<script type=\"text/javascript\">
document.getElementById(\"submitmsg\").innerHTML = \"submitted\";
</script>";
}
The HTML shows that the PHP seems to output the JS correctly, but submitmsg is empty.
Any thoughts?
HTML form: calls itself so it can run the PHP code at the top of the page:
<form role="form" action="" method='post' accept-charset='UTF-8'>
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<input class="form-control" type="text" name="name" placeholder="Name">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" name="submit" class="btn btn-lg btn-success">Send</button>
</div>
</div>
</form>
Not sure what you really do since you didn't post all the code, but I see 2 options.
First : On submit, you use an ajax query and don't refresh the page. If that's the case you should use the oncomplete() callback to do the javascript stuff (php should not return javascript code).
Second : The page is reloaded, then you should use PHP to directly echo html wherever you want in your code :
<nav ... >...</nav>
<p id='submitted><?= isset($_POST['submit']) ? "Submitted" : "" ?></p>
Note that you can put php tags where you want really :
<html>
<head>
<title><?php echo "Today is " . date('Y-m-d');?></title>
</head>
<body>
<?= "My Cool Body" ?>
</body>
<html>
I want control where the message is output
Why don't you store the submit status in a PHP variable and output it where required:
<?php
$is_submitted = isset($_POST['submit']);
?>
<html>
<body>
<!-- your page -->
<nav></nav>
<?php if($is_submitted) : ?>
<p id="submitmsg">Submitted</p>
<? endif; ?>
Or even just put your isset() check inline further down your page.
But this would appear randomly at the top of the page.
There is no point in echoing out a Javascript call to display this message, you can put PHP where ever you want to in a document.
the other answers are pretty much the right way.. if you wanna stick with the way you're doing things now, just switch your php output to:
window.onLoad = document.getElementById("submitmsg").innerHTML = "submitted";
if the Page is reloaded anyway you can echo submitted where you need it.
I have a html page with a form and input fields. When a user enters text into the input field, at each key a database is searched for corresponding values. This is done through a Javascript call which then does an XMLHttpRequest to a PHP script. In the PHP I return a top 10 list of matches. This list is then shown on the html page.
What I now would like is to make each item in the list clickable and when clicked it should fill the form field with the value. I can make the results linkable by adding <a href> around them, but the onClick doesn't seem to work for it.
Html/PHP page with form:
<form action="index.php?page=n0402" method="post" Name="AddPolish" >
<div id="frmBrandInput">
<label for="frmBrand">Brand name:</label>
<input type="text" name="frmBrand" size="50" onkeyup="n0401CheckRecords(1);" onchange="n0401AddResults_Clear();" maxlength="100" id="frmBrand" />
</div>
<div id="ListResults">
<ul style="list-style-type:none;">
<div class="n0401AddResults" id="n0401AddResults_Status">
</div>
</ul>
</div>
<button type="submit" name="submit" value="submit-value">ADD</button>
</form>
The javascript calls the PHP and changes the n0401AddResults_Status:
function n0401CheckRecords( jsCheck){
---- xmlhttp request code and return snipped out ---
document.getElementById("n0401AddResults_Status").innerHTML = return_data;
}
The PHP page that checks the database:
While ($dbCheck_result = mysqli_fetch_row($result))
{
echo "<li class='CheckListItem' onClick='ClickMe();'><a href='".$dbCheck_result[1]."'>".$dbCheck_result[1] ."</a></li>";
}
What is the best way to structure that return string to make it clickable? Btw, I'm now using a list for it, but that is not a requirement to me.
Btw I'm NOT using JQuery.
I should have used the # for <a href>. Solution was to use this line:
echo "<li class='CheckListItem' onClick='ClickMe(\"".$dbCheck_result[1]."\");'><a href='#'>".$dbCheck_result[1] ."</a></li>";