go back to dynamically created form - javascript

i have a form that is created from a textfile. I fill the form with values and then on the next step i just show the values with text. But if any of the values is wrong and i want to change it i would like to be able to go back and change them. But as it is now i can't because then i need to do all the steps again and generate the form again. Is there a way to just go back to the previous page?
now i use
$(document).on("click", "#btnBackO", function () {
window.location = "/Home/RiskScore";
});
but this does obviously not work. This code just sends me back to nothing because the form is not generated before it tries to go to the page. Is there a way to go back to a cached page of something?

I am pretty sure you would be required to be using some kind of server side language or javascript for this. Reason being is because the only way to "save state" is by passing the values back and forth. So when you hit back it's not like you are just going back to your last state, your essentially reloading the page.
Your code:
$(document).on("click", "#btnBackO", function () {
window.location = "/Home/RiskScore";
});
would change to something like:
$(document).on("click", "#btnBackO", function () {
window.location = "/Home/RiskScore?field1=value1&field2=value2"; //etc.. etc..
});
your page that holds the orginal form would have to be at bare minimum an HTML file that can support javascript tags. Preferable doing something server side via PHP:
VERY SIMPLIFIED EXAMPLE: (things like error catching, and escaping special characters are not addressed here)
<?php
$field1 = $_GET['field1'];
?>
<input type='text' value='<?php echo $field1; ?>' />
Any web language will be capable to accomplish this.
Sources:
How to get the query string by javascript?
http://php.net/manual/en/reserved.variables.get.php

If you want to go back to previous page :
history.go(-1)
history.back() or history.back(-1)
should work as well

Related

How do I change a HTML class via PHP?

I'm currently stuck at my "Newsletter Subscribe Form". I use MailChimp to send my newsletters and have managed to redirect the visitor of my page to a custom PHP file after entering the email.
The process goes like this:
User enter email
Email silently (user doesn't see it) gets added to the MailChimp Database (Email List)
Instant redirection to a self hosted PHP script.
4. The PHP Script changes the color of the button via a CSS Class in the HTML file.
I'm stuck right at Point 4, since I don't really know how to change a CSS Class in a HTML file with PHP. It's important that the webpage still remains in HTML (otherwise i'd use a simple variable in PHP).
Do I need to parse the PHP value to AJAX or JSON which then changes the class (probably with jquery?)
If yes, could you give me an example on how to do it? I have never really used JSON or AJAX before.
Thank you guys very much :)
It's a little bit difficult to understand the question completely.
If you're trying to output a class when the page loads, that's very easy using php:
<?php
$classVariable = "myClass";
?>
<div id="someID" class="<?php echo $classVariable; ?>">Some content</div>
PHP loads once, before anything else on the page, and never runs again. You can call other scripts using AJAX which can then return data that you can use. For example (using jquery)
<script type="text/javascript">
$.get("path-to-myscript.php", function(response){
// read the response in, perhaps you grab some class name from it
// for demo purposes, lets say this response is in json formatted as a simple string:
// '{ "class" : "someClass" }'
var data = $.parseJSON(response);
var newClass = data.class;
$("#someID").attr("class", newClass);
});
</script>

Form submission string concat/modify

So not sure if this is possible but I have a pretty complex form. With multiple levels of processing ie: If you click a radio button 'x' amount options so up in a drop down etc etc.
Well the problem I have is all the form fields need a name, and went I submit the form I'm sending alot of junk. IE Url could be '?meat=3434?fruit=34495?salad=034943' you get the idea. But in the end all I'm looking to is pull the 'salad' value into the url without all the other byproducts. IE: '?salad=034943'
I've tried a few things, pulling all the inputs radios etc out of the form and placing them in a div. The making a form with just a hidden value so I can pull through Mootools (But that made conflicts because I'm using Mootools Form.Validator so then that fails) Then I tired to make two forms, One that would just be all show, then I would pull the value I want into the processing form. Which I thought would work but apparently it still will process both forms.
Any ideas/techniques of how to accomplish this would be greatly appreciated! (because I'm losing my mind)
Disable any form field you don't want sent and it won't show up in the URL.
In HTML it's:
<INPUT type="text" name="foo" DISABLED>
In javascript set document.forms[...].elements[....].disabled = true.
If you hide the field with CSS it will still be sent like normal.
the elegant way you do this is mount your GET url to submit by yourself..
this way you can send only what you want..
dont send any junk.. you can have problems in the future with a variable that you didnt know you were sending..
you can use this util function of jQuery
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
// str is "width=1680&height=1050"

Insert javascript variable into a form on another page?

I am wondering if there's a good way to take a variable built in Javascript and then insert it into a form that's on another page.
My application is a survey: I've got it so that at the end of the survey, all the results are displayed so they can look over their answers. Now I want to have the user click a link and have the answers of the survey show up automatically in the body of the form where they'll then add their email and contact info and click "send."
Any ideas?
Knowing that this ISN'T possible is fine too...if not, what alternate methods might I accomplish the end result?
You can create a hidden field in first page and change that value from javascript variable. When you post that page it can be another page where you need to display in form element.
EDIT
If you need without form in first page you need to link with hyperlink like below.
<a href='#' onClick='OpenPage()'> Go To Result </a>
<script>
var val=20 ; // say this is the value you want to pass to second page
function OpenPage ()
{
window.location.href = "resultpage.php?param=" + val;
}
</script>
After you need to read that param in resultpage either with javascript through URL string or from server side (in PHP $_GET).
Hope it helps.

Submit form values to a script without loading a new page

I have an issue regarding sending form values to a script. I have a form set up, and upon the user pressing a button I want the values in the form to display on another part of the page. I can easily do this with php or another web scripting language, but all I know is how to do this by sending it to the script in a form of
http://www.example.com/myScript.pbp?value1=VALUE
is there a way to do this without loading a new page? Like just show a loading overlay on the page until the script completes and displays the value on the page?
I'm guessing this would be accomplished using Javascript or Ajax or something like that.
If anyone could help me out, or even just say where I should start to look, I'd really appreciate it!
Indeed. Just attach an onsubmit event listener to your form that always returns false to prevent actual sending of your form via the usual GET or POST request.
In your event listener you can send the form values using XMLHttpRequest and let the callback function update the relevant part(s) of your page.
But remember to always create a fallback option (with the usual GET or POST request of the form) to handle your form in case JavaScript is not available (e.g., turned off, blocked, etc.).
Yes AJAX would be exactly how you would do it. Have a look at the tutorial over at Tizag: http://www.tizag.com/ajaxTutorial/index.php
That will get you started in no time at all.
If you just want the values in the form to display on the page again without any interaction with the server then something like jQuery would be the best approach.
Jquery has a nice form plugin that you can do the following:
var form_values = $('#form_name').formHash();
the form_values will then be a hashed array of your form values in the system i.e.
<form id="test">
<input id="test1" name="test1" type="text" value="Test Text"/>
</form>
So form_values['test1'] would hold the value Test Text in it
Once you have the values you could then use some other jquery functions to display them on the page i.e.
<div id="displayDiv"></div>
then your javascript could be
for (key in form_values) {
$('div#displayDiv').append('<div>Key: ' + key + ' Value: ' + form_values[key] + '</div>');
}
This would put your values in the display div
Here is a simple javascript ajax object. You can use without loading any library.

Non-AJAX jQuery POST request

I am trying to use the jQuery POST function but it is handling the request in AJAX style. I mean it's not actually going to the page I am telling it to go.
$("#see_comments").click(function() {
$.post(
"comments.php",
{aid: imgnum},
function (data) {
}
);
});
This function should go to comments.php page with the aid value in hand. It's posting fine but not redirecting to comments.php.
#Doug Neiner Clarification:
I have 15 links (images). I click on a link and it loads my JavaScript. The script knows what imgnum I opened. This imgnum I want in the comments.php. I have to use this JavaScript and no other means can do the trick. The JavaScript is mandatory
Your method successfully POSTs the aid value. But in the comments.php when I try to echo that value, it displays nothing.
I am using Firebug. In the Console, it shows the echo REQUEST I made in Step (2) successfully.
I know what you are trying to do, but its not what you want.
First, unless you are changing data on the server, don't use a POST request. Just have #see_comments be a normal <a href='/comments.php?aid=1'>...
If you have to use POST, then do this to get the page to follow your call:
$("#see_comments").click(function() {
$('<form action="comments.php" method="POST">' +
'<input type="hidden" name="aid" value="' + imgnum + '">' +
'</form>').submit();
});
How this would actually work.
First $.post is only an AJAX method and cannot be used to do a traditional form submit like you are describing. So, to be able to post a value and navigate to the new page, we need to simulate a form post.
So the flow is as follows:
You click on the image, and your JS code gets the imgnum
Next, someone clicks on #see_comments
We create a temporary form with the imgnum value in it as a hidden field
We submit that form, which posts the value and loads the comments.php page
Your comments.php page will have access to the posted variable (i.e. in PHP it would be $_POST['aid'])
$("#see_comments").click(function () {
$('<form action="comments.php" method="POST"/>')
.append($('<input type="hidden" name="aid">').val(imgnum))
.appendTo($(document.body)) //it has to be added somewhere into the <body>
.submit();
});
While the solution by Doug Neiner is not only correct but also the most comprehensively explained one, it has one big problem: it seems to only work at Chrome.
I fidgeted around for a while trying to determine a workaround, and then stumbled upon the second answer by devside. The only difference is the extra code appendTo($(document.body)). Then I tested it in firefox and it worked like a charm. Apparently, Firefox and IE need to have the temporary form attached somewhere in the DOM Body.
I had to do this implementation for a Symfony2 project, since the path generator inside the .twig templates would only work with GET parameters and messing with the query string was breaking havoc with the security of the app. (BTW, if anyone knows a way to get .twig templates to call pages with POST parameters, please let me know in the comments).
i think what you're asking is to get to 'comments.php' and posting aid with value imgnum. The only way to do this is to submit this value with a form.
However, you can make this form hidden, and submit it on an arbitrary click somewhere with jquery.
html necessary (put anywhere on page):
<form id='see_comments_form' action='comments.php' action='POST'>
<input id='see_comments_aid' type='hidden' name='aid' value=''>
</form>
js necessary:
$("#see_comments").click(function(){
$('#see_comments_aid').val(imgnum);
$('#see_comments_form').submit();
);
this will redirect to 'comments.php' and send the proper value imgnum (that i assume you are getting from somewhere else).
Actually, $.post() sends some data to the server. It does not cause any redirection unless you do it in your server side code which handles the POST request. I can suggest two solutions:
To go to comment page, instead of using JQuery post, you can simply use a 'anchor' tag - Show Comments.
Or if you are want to go through JQuery, you can use this code snippet: $(location).attr("href", "comments.php?aid=1");
didnt exactly solve the problem. but did manage to work around it. i had to do a lot modification to the JS to make this work, but the core problem of this question was solved by doing this:
$("#see_comments").attr({href: "comments.php?aid='"+imgnum+"'"});
this appended the aid value to the URL as #Doug Neiner initially suggested me to do.
Thanks a lot Doug for all the effort. I really appreciate. +1 and accept to your answer for the effort.

Categories