I have a simple form with two slider and two buttons created using links, because truthfully those links are images created with css.
So, I want to be able to send all slider values when you click the button and then retrieve those values in the second div to show it.
I want to do it using PHP, so I think the best way is to send over POST and then retrieve it using the same way.
</br></br></br>
<div class="main">
<form method="post" action="">
<input type="range" name="val1" id="val1" value="5" min="0" max="10" data-show-value="true"></br>
<input type="range" name="val2" id="val2" value="5" min="0" max="10" data-show-value="true">
</br>
</form>
</div>
<a class="btn1" href="#">Button 1 - View 1 (Sliders)</a></br>
<a class="btn2" href="#">Button 2 - View 2 (Results)</a>
<div class="second">
<p>--Second div---</p>
<p>--Value 1---</p>
<?php $_POST['val1'] ?>
<p>--Value 2---</p>
<?php $_POST['val2'] ?>
</div>
At first I want to know how to pass values between pages and then when you come back to the main view put the value selected before. I think this can be done using $_SESSION.
So, what do you suggest to get the values from the each slider and put it in the second div using PHP?
I want to develop a dynamic site when depends on the button that you click go to one page or another. I have nearly 20 possibilities depends on the button clicked, so I think that the best way is using divs and putting all the PHP and HTML code in a file and show or hide depends on the button that you click.
And I using bootstrap-slider library, but to do the example I used the jquery slider.
I've done a fiddle to see if someone is able to do it.
https://jsfiddle.net/dperezq/ph7mfu0v/
Related
I have a page ( index.html ) with a form. On submit the data is posted to a php-file which then stores said data in a (temporary) xml-file, however, I also have a number of iframes which also contain forms.
At first, I was planning on simply posting the input-data from the iframes to a seperate php file but I encountered several problems:
-I have several iframes, but I don't have a fixed amount since the user is supposed to be able to delete/ add iframes. Therefore I can't just tell iframe 1 to send its data to php-file no. 1, iframe 2 to send its data to php-file no.2 etc.., I need a flexible solution.
-I tried to submit all iframe inputs to ONE php file and was hoping it'd work since the xml-file this php-file sends the data to is only updated and not completely overwritten. As you might guess, this did not work.
-Another problem I encountered is that the user may go back and edit whatever he entered into the iframe. The data should only be saved once he clicks on the save button in the html-file to prevent that.
I also tried submitting the data via JavaScript, as people in similar questions suggested, but that did not work out for me. So I guess what I would like, is a suggestion as to how I should go about this. How can I send all the data once the "main" save button is clicked, it doesn't matter if the data goes to several php files. The solution shouldn't depend on a fixed amount of elements as that amount is not always the same.
Here's the iframe-html:
<form method="POST" action="php/iframe.php">
<label>Your thoughts:</label>
<input type="text" name="header">
<label>Suggestions:</label>
<textarea type="text" name="textbox"></textarea>
<input type="button" value="submit">
</form>
(It's basically the same for all Iframes).
Please let me know if you need any additional information.
Edit: I read that submitting forms at the same time may cause interference, I know that much
Edit:
Relevant index.html:
<form method="post" action="main.php">
<div id="firstSection"
<label>First input</label>
<input type="text" name="input[]">
<button type="button" onclick="openIframe1()">Read more</button>
</div>
<div id="secondSection"
<label>Second input</label>
<input type="text" name="input[]">
<button type="button" onclick="openIframe2()">Read more</button>
</div>
<button type="submit" value="submit"></button>
</form>
<div class="iframe">
<button type="button" class="close">Close</button>
<iframe src="iframe1.html"></iframe>
</div>
<div class="iframe">
<button type="button" class="close">Close</button>
<iframe src="iframe2.html"></iframe>
</div>
Define an array of your iframe inputs in the main page as hidden element, on click submit in the main page loop through the iframe by getting the datas and append to your hidden element from where you can now post that to your back end.. try this: Access jQuery data from iframe element
Imagine taking a quiz at mysite/test/universe (URL = 'universe') or mysite/test/earth (URL = 'earth'). After you select the answers and click the Submit button, you're forwarded to a static page at mysite/test/results.php. The form automatically forwards some test data (e.g. $answer1 = $_POST['q1']).
Is there a way to modify the script so that, when someone clicks the Submit button, the page's URL is also captured and forwarded to the results page?
I don't want the URL itself to change. For example, if people are forwarded to mysite/test/results%universe, or something like that, then they could just visit that URL to see all the answers.
So I just want to forward the value of the URL, which I can then use to display and style correct and incorrect answers, along with feedback.
I should also explain that I'm working with PHP, jQuery and perhaps AJAX, and my ultimate goal is to modify my tests so that users can log in, and the test results will be published to a database. With that in mind, what's the best way to modify the HTML below so that the page URL is captured and forwarded to the results page?
<div id="quiz" rel="key" style="width: 500px; margin: 10px auto;">
<form action="grade.php" method="post" id="quiz">
<ol>
<li id="q1">
<div class="Question">No one knows if there’s just one universe or a series of universes, sometimes referred to as a:</div>
<div class="Answer">
<label for="q1-A"><div class="Radio"><input type="radio" name="q1" id="q1-A" value="A" style="display: none;"> A. multiverse</div></label></div>
<div class="Answer">
<label for="q1-B"><div class="Radio"><input type="radio" name="q1" id="q1-B" value="B" style="display: none;"> B. parallel universe</div></label></div>
</li>
</ol>
<input type="submit" value="Submit Quiz" />
</form>
</div>
Have a hidden field in your form
<input type="hidden" id="url" />
and set its value with this javascript
document.getElementById("url").value = document.URL;
or this jQuery
$(document).ready(function(){
$("input#url").attr("value", $(location).attr('href'));
});
then it will be submitted with the form.
you can use query string. if your first page url in http://something.html and second page url after form submit is another.html then
<form action="another.html?previous=<?php echo $_SERVER['REQUEST_URI']; ?>">
</form>
In another.html, you can get previous page url before submitting form by using GET
$_GET["previous"]
I'm making a social network type site, where users can upload their items to be rated. However, I'm trying to improve the way the site is laid out, so want to automatically generate pages once the user inserts a new item. The add.php page has the following form:
<form action="add.php" method="post" autocomplete="on" enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="pic">
<p> <label for="jname" class="iconic user"> Name of Jam <span class="required">*</span></label> <input type="text" name="jname" id="jname" value="<?php if (isset($_POST['jname'])) echo $_POST['jname']; ?>" required="required" placeholder="Input your Name of Jam here" /> </p>
<p> <select name="jtype" id="jtype" value="<?php if (isset($_POST['jtype'])) echo $_POST['jtype']; ?>" required="required">
<option value="jam">Jam</option>
<option value="jelly">Jelly</option>
<option value="marmalade">Marmalade</option>
<option value="preserve">Preserve</option>
</select> </p>
<p> <label for="producer" class="iconic user"> Jam Producer <span class="required">*</span></label> <input type="text" name="producer" id="producer" value="<?php if (isset($_POST['producer'])) echo $_POST['producer']; ?>" required="required" placeholder="Input the producer of the Jam here" /> </p>
Upload a picture of your jam: </br> </br> <input name="userfile" type="file" /> </br>
<input type="submit" name="submit" value="Register" />
<input type="hidden" name="submitted" value="TRUE" />
</form>
When the form is submitted, I then want it to generate a new page for that new user created item. Is there a fairly simple way of doing this?
Cheers
You don't have to actually 'create' new html page for each item.
You could save this information to database (mysql for example).
Then you could create another php file, say 'item.php' and access different entries from mysql database like so:
item.php?id=1
This generally isn't the way such sites are created. (i.e.: You don't generate the physical pages themselves at the point of form submission.) Instead, you'd usually store the form data in a database and then retrieve/display it based on the URL - either by decoding the URL itself via a "controller" or by using a query string variable such as ?producerid=x. This data would then be used to populate a template.
To be honest, I'd really recommend getting hold of a recent PHP book (as far as database access is concerned, you should be using PDO or MySQLi) or following some online tutorials - whilst it might initially seem like this won't be a meaningful form of progress, its likely to pay substantial dividends in the long run.
The best and efficient way to do it is to store the data in a database and retrieve it whenever user clicks on specific item. One thing though, if part of your plan is to make your site accessible by google search engine, you have to generate the individual web pages... because, google is only a web crawler...it cant get into mysql or other databases.
Usually there's no new page generation for things like that. You should create a template and load dynamic informations from other sources (such an XML file or a database) to it so that it seems a completely new page.
Just:
See what each item page has in common
Define a template which contains the common code
Retrieve dynamic informations (item infos for example) from a database
Use PHP embedded in HTML to load dynamic HTML
An example:
Facebook does not create a new page per each user registration. There's an HTML template which defines the position of the profile photo, the position and style of the posts, the position and style of the friend list and stuff common to any profile page, and then just load different informations when you call such a page for Mark, Frank, Jeff and so on.
I want to use a search option to find the contents in another page.
My Html page:
<form action="search.php" method="post">
<input name="search" type="text"/>
<input type="image" src="images/search-btn.jpg" alt="search-btn" />
</form>
I have 5 topics in another page, say 'products.html'. Topic headings are Film, Music, etc.
So if a keyword, like the headings or some predefined keywords in each topic, is typed and search button is clicked I want to redirect to the products.php page.
The main thing is that i want to get the focus on that particular topic
Now I'm redirecting simply like this:
<?php
$val=$_POST['search'];
if($val=='Music'||$val=='singer')
{
header('Location:http://localhost/products.html');
}
?>
page1.html
<a name='music'></a><!-- This is anchor -->
<a href='#music'>Go to music on same page</a>
page2.html
<a href='page1.html#music'>Go to music on another page</a>
SERVER SIDE:
<?php
if($val=='Music'||$val=='singer'){
header("Location:http://localhost/products#$val.html");
}
?>
You can style your keywords anchors as you wish:
<a name='music'><b>music<b></a>
<span id='music'>music</span>
Within your form post to a page that can deal with the result, save it and then push the user on.
<form action="process.php" method="post" name="search">
This response page will redirect to something like
header("Location: /products.html#music");
Depending on how the form was completed.
Then on your products page add ids that tie this up, for example:
<h2 id="music">Music</h2>
The user will be redirected and the browser will jump to the corresponding anchor or id.
You can also try this technique by using a hidden field, but for the first page JavaScript will work for this
<input name="target" type="hidden" value=""/>
<input name="search" type="text" onkeyup="your-function-to-set-value-on-hidden-field"/>
Set the value if typed keyword is matched with your list and on the second page receive the hidden field value in PHP variable and do the stuff.
I have a php page with a form on it for adding people to a small group.
For each person being added, there is a with multiple form elements, each named according to the person's number. For example:
<div class="user">
<input type="text" name="user1LastName" />
...
</div>
<div class="user">
<input type="text" name="user2LastName" />
...
</div>
For each person in the database, the php page populates a form sections.
To add additional people, the user can click on a "+" icon, at which time the page uses jQuery to dynamically populate a new . To do this I am simply appending the new div html to the existing form. This means that the javascript page contains all the same html markup (to be appended), as the php page.
This seems like an unnecessary duplication of code. Whenever I change something in the php page, I also have to change it in the javascript code.
Is there any general method for avoiding such code duplication? The only thing I can think of is to use jQuery to grab the html from an already existing div. But in this case, the values of the form fields for user n will appear in the new code for user n+1.
Thanks.
Capisci :)?
<div class="user" id="user_1">
<input type="hidden" name="uid[0]" value="1"/>
<input type="text" name="lastname[0]" value="user480029"/>
...
</div>
<div class="user" id="user_2">
<input type="hidden" name="uid[1]" value="2"/>
<input type="text" name="lastname[1]" value="arto"/>
...
</div>
Now when adding another field just...
<div class="user" id="user_3943094103945">
<input type="hidden" name="uid[]" value=""/>
<input type="text" name="lastname[]" value=""/>
...
</div>
Then you iterate trough $_POST[] a do what you want.
You have user ID on .user, so I you delete user you can remove that part of HTML (this is more for UX), more importantly, you don't have hundreds of variables but just a few array which you can iterate in one loop. Hope you get the point. Cheers.
The php code should give the javascript a "prototype", which could be modified using javascript. That way, even if there aren't any users, the javascript would still work. This example is obviously missing lots of code (like forms), but it should give you an idea. I haven't tested it because I assume you have to make lots of modification anyways.
<script type="application/x-javascript">
addEventListener("load",function(){
document.getElementById("add-user").addEventListener("click",function(){
var node=document.getElementById("prototype-container").getElementsByClassName("users")[0].cloneNode(true),n=document.getElementById("add-user").getElementsByClassName("users").length,list=node.getElementsByTagName("input");
document.getElementById("user-list").appendChild(node);
node.id="users_"+(n+1);
for(var i=0;i<list.length;++i)
list[i].name&&(list[i].name+="["+n+"]");
},false);
},false);
</script>
</head>
<body>
<div id="prototype-container">
<? /* print out a div without any information in it */ ?>
</div>
<div id="user-list">
<? /* print out divs with some infomation in them */ ?>
</div>
<button id="add-user">add a user</button>