How to create dynamic pages in html? - javascript

I have a scenario, in this i have to develop pages containing various check box items.
User can select at least one option from that and submit the form.
from the above form, user can select multiple items and proceed to next step.
when user submit form, i have to show next page form data on the basis of user selection.
How can i do that in html and javascript?
or do i need to create this application using php?
(i dont know php)
Can you please suggest me reference links that can i follow to implement this.

You can do it in javascript. On submit, check the checkbox selected and redirect accordingly.

You can do it using javascript. Here's an example form:
<form action="response.html" name="form1" method="GET">
<input type="text" name="param"></input>
<input type="submit" value="submit"></input>
</form>
When you click submit it will redirect to the "action" page you specified, in my case to response.html
In that page the URL will be something like www.mydomain.com/response.html?param=myanswer
You can then pull them apart using javascript e.g.
<script>
document.write(location.search);
</script>
You just have to split this up using methods like 'split', easy to google

Related

Disable Javascript after page is loaded should be detected on action page

I think i have searched already about tags and yes i am using them already.
But here my question or Idea is:
I have a form including input to search/insert data into database (mysql) (index.php)
form action is being performed on search.php
search box searches input data in the selected tables, if it is found, then it gives the records in result.php, otherwise it inserts the data in table(sql) and then shows it in result.php
I am validating the form/input using javascript on the same page even using tags
Now after loading the index.php page, if someone disable javascript, it shows an alert to reload the page. if someone reload the page, searchbox will hide.
but the problem is, if after loading the page, if someone disable javascript and does not reload the page, and search some restricted text using javascript regex, that text goes into mysql database and it is saved. search.php perform its action and redirect it to result.php
I want some trick in search.php that checks some condition for javascript enabled/disabled, then perform the remaining actions.
IS THERE ANY WAY, IF ACTION SHOULD BE ANOTHER PAGE, on that page is javascript is disabled then it shows nothing, and if it is enabled then redirects to search.php
Form validation on JS level is unimportant, what you need to think about is your php validation. Please read top answers of: form validation with javascript vs php
and this:
How can I prevent SQL injection in PHP?
If you need to check if JS is enabled you can simply make button for your form (but not type="submit" but just a button element). Add event to that button:
onclick="document.getElementById('FormId').submit();"
and your form will be submitted only if JS is enabled as button will use JS for submission
Use a hidden input field and set its value using javascript on form submission. Since the value will be set only using javascript, if the submitted form has an empty value for this field, it can be concluded that javascript was disabled.
Using jQuery:
In the html:
<form id="myformid" action="myactionurl.php" method="POST">
<!-- form fields here -->
<input type="hidden" id="time" name="time" value="">
</form>
In js:
$('#myformid').submit(function(ev) {
$('#time').val($.now());
});
In php:
if(!empty($_POST['time'])) {
//code
} else {
echo "Javascript must be enabled for this site to work.";
}
You don't have to use time, it can be anything.

Automatically filling in a form when a link is clicked on another page

I am making a website for a computer science project and have created a search function that lists data in an SQl database (based on the search text".
When I click on one of the listed values, I want it to automatically fill in an input box on another page.
I have already looked online and didn't really understand it all which is why I am asking.
You may want to have something like:
on page1:
link
and on page2:
<form ...>
<input type="text" name="..." value="<?= $_GET['foo']; ?>" />
...
</form>
You could also create a form in page1 to send data with the POST method (to hide data from within the URI).
What you should search is how to send and retrieve data with GET and POST methods.
With the <?= PHP tag you print (echo) the content of $_GET['foo'] variable.
Assumptions
But be careful, you must test variables before to print them (and avoid security issues)

Fill input file field onload

I have a basic HTML form where the user can select files.
<input multiple type="file" name="file"/>
<input type="submit" name="submit" value="Submit" />
The user will be redirected to this form after clicking on a well specific button (present on the home page). Let's say I have 3 differents buttons.
If the user clicked on button1 I would like to redirect him to mysite/myform.php?var=button1. I would also like to pre-fill the input file with a specific file located server-side : button1.txt
So I know which file is he wanting because of the URL and pick it with PHP code (server-side) and send it to the html page (with javascript).
Is it possible to fill in the form using this way?
Since it is a yes/no question the answer is yes. You need to create a proper form for your need and set the values of those inputs with selected file. You migh want to put them(the variables in that file) in a array or json format(or some other like xml... your choice) so it will be easier for you to traverse the file user selected.
And check this quesiton also.It can help you to create what you want:
Parsing JSON file with PHP

Submit multiple FORMS as 1 combined form?

I am using a jQuery plug-in to implement an accordion wizard based on bootstrap. http://sathomas.me/acc-wizard/#prerequisites
One thing that is odd to me is that each Panel is wrapped in a <form> </form> and the JavaScript then looks for each <form> and adds a Next or Back button.
So when you get the the final/last Panel and try to Submit the Form...it only will post the data from the last form.
I am not sure how I can make it take the form fields from each panel and then submit them all on the last form...This seems like a flaw in the design?
So my question is, is this even possible to have multiple forms and then have the last form submit all the data from all the forms combined?
With jQuery you can create a new in memory form var form = $('<form action="..."></form>') and then copy and append HTML from all forms on the page to this form form.append($('form').children().clone()). Then you can post in memory form form.submit().
This solution can only work if you're able to override behavior of submit button on the last form.
Check this fiddle Post all forms from page in one post jsFiddle

jQuery: issue with live events, a form and the back button

I have build a quite complex widget which contains "some kind of
form". It has a form tag, but I'm loading a lot of stuff in there via
Ajax etc. Cannot explain it in detail, and the code is too long to
paste in here.
Now, in a "live('click', function()" I use for one of the form fields,
I'm writing a couple of values into hidden fields of another form.
That works fine, as I can see them in the generated code. But if I
leave the page and then hit the back button, the values are gone.
If I write some values into those fields outside the live click
function though, they are still there when I leave the page and come
back using the back button.
But I need to write the values into the hidden fields out of the live
click function (I'm inserting values from fields of my form into
them).
I don't know what causes this and wasn't able to find a workaround yet
(even though I tried a lot).
Any ideas?
Thanks!
Have a look at the jquery history plugin (http://plugins.jquery.com/project/history)
Usually what happens is that browser remembers what you have entered into a form (even if you don't submit it) so that when you hit back button, it populates all the visible fields for you.
It seems it's not the case with hidden fields. There's a workaround though.
Every time one of your hidden fields is changed, you can add #part to your url (eg. www.mysite.com/users#userId,groupId,...).
When the page is loaded again (via back button for example), it will contain the #part. Parse it as a string to determine how to populate hidden fields and populate them.
Review the history plugin for jQuery to see how to read the #part.http://plugins.jquery.com/files/jquery.history.js_0.txt
Use CSS to hide the input instead of the input type.
<input type="text" id="foo" name="foo" style="display: none;" />
instead of
<input type="hidden" id="foo" name="foo" />
I tripped over the same issue and this seems to resolve it.

Categories

Resources