I'm currently working on a project where the user needs to fill in a form which will be converted into HTML.
For example the user fills in the next form:
<form method="POST" action="">
Edit title: <input type="text" name="title"><br />
Edit subtitle: <input type="text" name="subtitle"><br />
Edit image: <input type="file" />
<input type="submit" value="OK" />
</form>
And the output has got to be in HTML, something like this:
<div class='container'>
<div class='leftBLock'>
<h2>*Title*</h2>
<p>*Subtitle*</p>
<img src='path/to/img/image.jpg' />
</div>
</div>
Do you guys know a way to easily get this done?
Thanks in advance!
Edit: I forgot to mention that I prefer a client-side solution.
Easy way to do is..
Store data in Table MySQL and fetch data in php file
<?php
//connection to database
//database query
?>
<div class='container'>
<div class='leftBLock'>
<h2><?php echo $rs['title']; ?></h2>
<p><?php echo $rs['subtitle']; ?></p>
<img src='<?php echo $rs['image']; ?>' />
</div>
</div>
Related
This is my HTML:
<form action="http://example.com/rezervari/index.html#/hotelbooking" method="get">
<input type="hidden" name="hotel" value="<?= $hotel ?>" class="form-control">
<input type="hidden" name="roomtypegroups" value="<?= $roomtypegroups ?>" class="form-control">
<div class="form-row">
<div class="col">
<div class="form-group">
<label>Sosire</label>
<div class="input-group mb-3">
<input id="from" type="text" name="from" value="<?= $arrival == 'CURRENT' ? date('Y-m-d') : $arrival ?>" class="form-control datepicker1">
<div class="input-group-append datepicker1-h">
<span class="input-group-text" id="basic-addon2"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Plecare</label>
<div class="input-group mb-3">
<input id="to" type="text" name="to" value="<?= $arrival == 'CURRENT' ? date('Y-m-d', strtotime(date('Y-m-d') . ' ' . $departure . ' day')) : date('Y-m-d', strtotime($arrival . ' ' . $departure . ' day')) ?>" class="form-control datepicker2">
<div class="input-group-append datepicker2-h">
<span class="input-group-text" id="basic-addon2"><i class="fa fa-calendar-times-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
</div>
When I submit the form, the URL loses the "#" and messes it up, and that's no good because the query doesn't work on the secondary website, as it becomes:
http://example.com/rezervari/index.html?hotel=14315&roomtypegroups=44332&from=2020-11-23&to=2020-11-24&roomscount=1&adult=1#/hotelbooking
Instead, it should be:
http://example.com/rezervari/index.html#/hotelbooking?hotel=14315&roomtypegroups=44332&from=2020-09-91&to=2020-09-14&adult=1&numchild1=1&numchild2=1&numchild3=1
How can I pass on the link without the "#" getting removed and the whole URL messed up? Thanks!
Fragment IDs are supposed to link to a specific part of a webpage and are resolved client-side.
Consequently they must go after the query string.
When you submit a GET method form, it will replace everything after the start of the query string in the action with the newly generated query string.
If you have some kind of hack which reads the fragment ID client-side, and you need to put the query string inside the fragment ID so that that code can read it, you can't use the standard form submission logic.
You'll need to add a submit event handler to the form with JavaScript, prevent the default action, build the URL yourself and then navigate to it (e.g. by assigning it to location).
I am looking how to reuse the value="typed_from_user" into another tag in the same formulary without using js, just PHP & HTML.
Is it even possible?
For example, here i want to reuse the word 'pizza'
<form>
<input name="hello" type="text" value="I want pizza">
<input name="order" type="text" value="pizza">
</form>
maybe something storing it in a variable?
<form>
<input name="hello" type="text" value="<?php echo $whatyouwant ;?>">
<input name="lunch" type="text" value="<?php echo substr($whatyouwant,7,5);?>"><!--cut it from letter 7, the word pizza-->
<input name="order" type="submit" value="submit">
</form>
yeah, supouse that we know where exactly starts the word pizza
This are the files i am using as tests
action.php
form.php
<?php
//action.php
$var = $_POST['hello'];
$var_lunch= $_POST['lunch'];
echo "hello: $var<br>";
echo "lunch: $var_lunch<br>";
?>
file form.php:
<html>
<header>
<title>test-page</title>
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="../../../css/bootstrap/bootstrap_v4.0.0.css">
</header>
<body>
<?php
$whatyouwant=777;
?>
<form method="post" action="action.php">
<input name="hello" type="text" value="<?php echo $whatyouwant ;?>">
<input name="lunch" type="text" value="<?php echo substr($whatyouwant,7,5);?>">
<input name="order" type="submit" value="submit">
</form>
</body>
</html>
OUTPUT:
hello: i want pizza
lunch:
If you are trying to get the input value form one text field to another text field only using PhP and HTML, I have to say that it is quite impossible. PhP is the server side language so to get the value from one field to another, it must first reach the server and then it display but will show error in PhP.
To achieve this, you have to use JS. You can achieve this from just a few lines of code using jQuery.
I have created a HTML code to build an user form that will contain information that people write inside the texts. This page also has a button that should take all the entered information and convert it into a json file.
I have never done this before, so I have no idea how I can do that. As far as I read, I understand that I need a local server to send the html code to it so it can return the json, but the process to do this is absolutely unclear for me.
My code in html is this:
<!DOCTYPE html>
<html>
<header>
<h1>My Promo</h1>
<h2>Get insights out of an endless see of data...</h2>
<link rel="stylesheet" href="mycss.css">
</header>
<form action="http://localhost/" method="post">
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">What is your banner?*</label>
<input type="text" name="banner" />
</div>
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">Name of current promo*</label>
<p>(write a short name, e.g: "DPE17")</p>
<input type="text" name="CurrentPromo" />
</div>
<div class="submit">
<input type="submit" value="Get my data" />
</div>
</form>
</html>
Then, when I click on the button "Get my data" it does nothing.
Can you give me the process to capture the json from this?
Many thanks!
As you did not mention any specific JSON structure I think below code will work for you. You will have to customize based on your needs.
I will recommend you to find and check different javascript libraries and see what suits you best for your client side application.(jQuery is easiest to learn)
Also check if it is a REST server. Based on that decide on your client side javascript framework. (Angular is good choice for REST based applications)
function onSubmitForm( myForm ){
var formjson = JSON.stringify( $(myForm).serializeArray() ); // <-----------
console.log( formjson );
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<header>
<h1>My Promo</h1>
<h2>Get insights out of an endless see of data...</h2>
<link rel="stylesheet" href="mycss.css">
</header>
<form action="http://localhost/" method="post" class="myform" onsubmit='return onSubmitForm(this)'>
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">What is your banner?*</label>
<input type="text" name="banner" />
</div>
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">Name of current promo*</label>
<p>(write a short name, e.g: "DPE17")</p>
<input type="text" name="CurrentPromo" />
</div>
<div class="submit">
<input type="submit" value="Get my data" />
</div>
</form>
</html>
Well, I guess the title says it all.
I'm looking for a way to reset all the fields within a form.
I've tried some of the following:
<input type="reset" value="Clear all fields">
And
<button type="reset">Clear all fields</button>
Yet, none of this seems to be working.
This is a stripped version of my form.
<form id="form2" action="mainframe.php?paso=21" method="POST">
<input type="reset" value="Reset">
<button type="reset" form="form2">Reset</button>
<?php while($row=$resultado->fetch_assoc()){ ?>
<p>Number of <?php echo $row['name']; ?>
<input type="text" name="saldo[<?php echo $row['id']; ?>]" value="<?php echo $row['saldo']; ?>" maxlength="30" />
<?php } ?>
</form>
<button type="submit" form="form2">Send</button>
Edit: Apparently the reset button will replace the values of all inputs with the values they had on page load. The button would clear all fields and leave them blank only if the input's value property aren't declared or are null on page load.
Guess what. It actually DOES work. I didn't change anything at all. I promise:
<form id="form2" action="mainframe.php?paso=21" method="POST">
<input type="reset" value="Reset">
<button type="reset" form="form2">Reset</button>
<?php while($row=$resultado->fetch_assoc()){ ?>
<p>Number of <?php echo $row['name']; ?>
<input type="text" name="saldo[<?php echo $row['id']; ?>]" value="<?php echo $row['saldo']; ?>" maxlength="30" />
<?php } ?>
</form>
<button type="submit" form="form2">Send</button>
If it's not working on your site, then you may have another syntax error.
get rid of what u echo to the input value and it should work...
The previous answers are correct. The reset button resets the form's inputs to their initial values, not to blank.
In my case, I wanted to blank all of my inputs. I thought about writing some JavaScript that sets all the inputs to "", but I decided that just reloading the page would be easier. In my case, reloading the page blanks the form.
Try this:
<input type="button" onclick="window.location='http://www.yourwebsite.com/form.php'" value="Reset" />
for some reason I cannot get any form to work correctly on my website, I even went to w3school and copied a simple test form to see if it works, and it does not, here it is:
welcome.php:
<?
Welcome <?php echo $_GET["fname"]; ?>!<br />
You are <?php echo $_GET["age"]; ?> years old.
?>
form:
<form action="welcome.php" method="get">
Name: <input type="text" name="fname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
I'm not sure if it matters or not, but I tried with and without brackets, and still I get a blank page, in explorer I get a 500 Error, most likely causes is maintenance or Programming Error", but I had the same issue last night so I doubt its maintenance, and everything else works.
Remove the beginning <? and ending ?> from your welcome.php.
Your form uses get and you're reading from $_POST.
Either change html to
<form action="welcome.php" method="post">
or change the php to
Welcome <?php echo $_GET["fname"]; ?>!<br />
You are <?php echo $_GET["age"]; ?> years old.
Also, make sure the value is present using the isset
Welcome <?php echo isset($_GET["fname"]) ? $_GET["fname"] : "Guest"; ?>!<br />
When you use $_POST["fname"] you should also specify post as method in your form
welcome.php:
<?
Welcome <?php echo $_POST["fname"]; ?>!<br />
You are <?php echo $_POST["age"]; ?> years old.
?>
form:
<form action="welcome.php" method="post">
Name: <input type="text" name="fname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>