Changing Data Output depending on pull down - javascript

I am new to coldfusion and Java Script and I can not figure the correct syntax needed to make this work. What I am trying to do is that there is a pull down menu that has three options; Active, Inactive, and All. The goal is that when the page originally loads that it defaults to active and shows all active shippers. However, if the user wants to see inactive user they would select it from the pull down and the data should change to only show those values. All would show both active and Inactive.
The way I thought to do this was to create a variable called Active_status and then use Onclick to change the value and refresh the page. I am using if statements to generate the data.
<cfparam name="active_status" default="ACTIVE">
This is at the beginning to show active first
<select name="active_status" id="active_status" class="tx" onchange="editTable(this.value)">
<option value="ACTIVE" selected="selected">ACTIVE</option>
<option value="INACTIVE">INACTIVE</option>
<option value="ALL">ALL</option>
</select>
This is the code to generate the options within the page
<script language="javascript">
function editTable( inVal )
{
if( inVal == 'ACTIVE' )
{
document.getElementById( "active_status" ).value = "ACTIVE";
window.location.reload();
}
else if ( inVal == 'INACTIVE' )
{
document.getElementById( "active_status" ).value = "INACTIVE";
window.location.reload();
}
else if ( inVal == 'ALL' )
{
document.getElementById( "active_status" ).value = "ALL";
window.location.reload();
}
}
</script>
Show the active works but after each selection only active shows. I am sure it is due to the default I have but I am not sure of the correct syntax I need to make this work.
If you can assist me on this that would be greatly appreciated. Any advice would be great or if you have a better way to do this I am always eager to learn new things.
I made the change but it still is not changing when Inactive is clicked?

The way I thought to do this was to create a variable called Active_status and then use Onclick to change the value and refresh the page.
By refreshing the page with Javascript without making any AJAX calls or submitting the form first, you are simply reloading the page and resetting the client-side form data. The data goes nowhere-- nothing is sent to the server.
If you want to dynamically change what is displayed using Coldfusion, then you must make an HTTP request to a Coldfusion page. You could do this various ways, but the simplest method is to use a form submission. In order to submit a form with HTML, your form needs three things:
A url to send the data to (your .cfm page), which goes in the form action attribute.
The HTTP method to use, which goes in the form method attribute. Typically, you'd use POST.
An input tag with type="submit". This is the submit button that the user can click to submit the form.
Example:
<form action="myPage.cfm" method="POST">
<!-- ...form fields go here... -->
<input type="submit">
</form>
When a form is submitted to a Coldfusion page using action="POST", the Coldfusion code within that page can then access the submitted form data by using the form scope. For instance, you would use form.active_status to get the data from the "active_status" drop-down in your example.
You can then use this information to dynamically determine what to display on the page. Example .cfm page:
<cfif form.active_status is 'ACTIVE'>
<div>Status is active</div>
<cfelse>
<div>Status is not active</div>
</cfif>
Side note: You cannot interact with Coldfusion directly using Javascript. They are executed in two different environments on two separate machines: JS is in the browser on the client, and CF is in the JVM on the server.

Related

How to prevent recursive activation of form submit button when trying to activate once using javascript?

I am creating a Django app that retrieves data from a database based on a form. The form is just a collection of checklists. The data is then used to create a plot using Bokeh.
The app works. That is, when the submit button is pressed, the app accepts user input, collects relevant data and plots a graph. My problem is that I want to form to be submitted once as soon as the page loads, in order to display a graph with the default settings. The current behaviour is that no graph is displayed until the user presses the submit button.
Here is an abstract example that kind of reproduces my problem. Please note that my problem isn't exactly reproduced by this example because my inexperience with html/javascript makes it difficult to make html/javascript equivalent of what Django is doing. However, here's an attempt. Just bear in mind that a graph should be dynamically produced when the button is pressed - which graph is shown depends on user input.
<div id='form-container'>
<form action='.' name='ctrl-panel' method='post' class='form-check-inline'>
<ul>
<li>
<label id="label1">
<input id='label1' type='checkbox' name='checkbox1' value='A' checked='checked'>Checkbox 1
</label>
</li>
<li>
<label id="label2">
<input id='label2' type='checkbox' name='checkbox2' value='A'>Checkbox 2
</label>
</li>
</ul>
</form>
<input type="submit" value="Submit" class="btn" id="submit-btn" form="ctrl-panel">
</div>
<script>
window.onload = function clickBtnOnWindowLoad() {
var btn = document.getElementById('submit-btn');
btn.click();
}
</script>
The issue is that the action on the form is set to the current page . and the javascript code runs when the page is loaded. Therefore, I am getting a recursive activation of the submit button, since the submit button loads the current page and loading the current page pressed the submit button.
Does anybody have any advice so that I can submit the form once, and only once, with default settings when the page loads.
I'm far away from Django, but logically there are two ways to solve this problem:
From the backend detect, whether the page loaded first time (without any data requested) or not. If yes - render form with the script, else don't render the form;
Change POST to GET so all submitted values will be appended to the query string to the URL. Then, if there is any query in URL (that can be detected with location.search, do not run the script:
(something like this)
<script>
window.onload = function clickBtnOnWindowLoad() {
var btn = document.getElementById('submit-btn');
if (!location.search)
btn.click()
}
</script>
But generally, if you wish always to render the form in case of user's input dependable data, your approach to do this is not so good. I suppose, you should consider to use AJAX request.
You can't use window onload because the function will run when the page is loaded.
if you still would like to keep it this way you could do an if statement like this:
var x = 0:
If x == 0 //when page is loaded
DO NOTHING
x = x + 1
else if x > 0 //because the page is loaded and x is now 1
DO THE CODE WHEN CLICKING BUTTON
Disclaimer currently programming in python and its been a while since i used
javascript so formatting may not be optimal, this is just an example

Javascript, Ajax and form submission/response

I'm hoping there is a simple solution to this, or else its possible AJAX time!
I WAS using ClickBank. I had a simple button on my page. That sent the form data to a script, I processed the data, and then added a redirect at end of script to jump to the "pay" link. Nice n' easy
But now I'm switching to "Click2Sell" ... and they have a direct href to their site.
Now I COULD use javascript to read the form data, place it into their "cp_" prefix, and create a super long (about 400 chars) query string and send that to their server, then re-read the data at the IPN stage ...
?country=UK&area=essex&desc=This is the data entered by the user 'whatever'
(but that leads to a little fact that certain parts might need to be escaped(?) such as the spaces and the " ' " or whatever other symbol they enter)
So I devised this method:
<javascript>
function send_data(){
document.user.submit();
return true;
}
</javascript>
<div name="noshowdiv"><object name="noshow"></object></div>
<form method="post" target="noshow" name="user">
<input type="text" name="country">
<input type="text" name="area">
<textarea name="desc"></textarea>
</form>
<img src="xxx" onclick="return send_data();">
In a nutshell, when the button is clicked, it jumps to the function, and submits the form data to my script, and then returns to the hyperlink to submit the second form via the hyperlink.
Two problems: Firstly, the data returned by my script is opening in a new tab rather than the <div>, (I suspect 'cos the submit option loses track of the sending window) and also, I need to get a response from my script which I can then append to the href link.
For example, if the form records the user's data on line 5 on my server, the script will return "id=5" I would then make the hyperlink "click2sell.asp?cp_id=5"
As I've said, I suspect this is a job for Ajax and a HttpRequest ... which is a whole new area to me. Any advice?
For the first problem, it opens a new tab because you have target="no-show" on your form.
For the second problem, if you want to use Ajax, I recommend you use jQuery, it will simplify a lot of the code.
But the best option is probably that you completely remove the direct link to click2sell, and just add a submit button to your form. Post the form to your site, which will store whatever info it needs, assigns an ID, and builds the click2sell URL with the ID in one of the parameters, and redirect to it.
Now how you would do that depends on what server-side language you use.
(I think) I have managed to find a work around, which was using the first option to reconstruct the href link. I couldn't iterate through the form as there are values that don't need to be forwarded. First I get the value, load it into a variable, then use an encode function I discovered online, and then reassign to the form ...
var cp_cc=document.getElementById('cc').value;
var cp_cs=document.getElementById('cs').value; // plus 10 other values
var str='&cp_cc='+encodeURIComponent(cc)+'&cp_cs='+encodeURIComponent(cs)+ // etc
var send_str=document.getElementById('c2s_bn_lnk_36288').href;
document.getElementById('c2s_bn_lnk_36288').href=send_str+str;
The "no-show" was a slip up in my typing! Alas, the answer given above wouldn't work as the Click2sell button also includes two calls to external JS files - and they give you no idea what they do, but is something to do with initializing the button, (it passes the "36288" to the script to do ???). And whilst using "Location: ..\n\n" on my server would redirect to their site, it wouldn't action whatever those external files do. (OK, so I didn't give the full facts, but I didn't want to increase the post size with data I felt didn't relate to problem)
** Now got to amend the listening scripts such that rather than set the ID number up front then jump to C2S, it now waits for C2S to send the data back to me and then sets up the database!!

How to create a form with a text area and two buttons, each with a different action?

I'm using Express.js and Jade and would like to create a form that consists of a textarea and two buttons, each of which invokes a different action. I came up with this but not sure if that's the proper way to do this since pressing the button only redirects but making one button submit does not differentiate it from pressing the other button:
form(method='post', action='')
textarea(wrap="soft" placeholder="Leave a reply...").fixit-reply
a.btn.btn-primary(href="/resolve") Resolve
a.btn.btn-warning(href="/comment") Comment
Ideally, one action would be caught with app.post('/resolve', handle); and the other with app.post('/comment', handleC);.
(As requested, my original comments formed up into an answer.)
Although this can be handled client-side with JS, I'm not familiar with Express.js or Jade so I don't know how to integrate a JS solution with your existing code.
However, if both buttons are submit buttons you can test server-side which one was pressed and redirect as appropriate, thus avoiding the need for any client-side JS. The name and value of whichever submit button is clicked will be submitted along with other form data. The button that wasn't clicked will not be included in the form data. So you could give both buttons name="action" and then server-side you'd test that parameter and redirect according to the associated value. (Or give your buttons different name attributes and test server-side whether the parameter for a particular button exists at all.) Of course you'd need to give your form an action="something" attribute corresponding to the server-side action that does the test and redirect.
In my opinion a server-side only solution is better for this particular requirement because it's easy to do, it keeps the client-side stuff simple, and (obviously) will work even in browsers where the end user has disabled JavaScript (not that many users do that, but it does happen).
Client side, jade template, 2 buttons, fulfill "xss" with different data from different button:
form#formTestHtml1(name="htmlForm",method="post",action="/testhtml")
button#btnSubmit1(type="submit" name="xss" value="s-html") Submit to sanitize-html
br
button#btnSubmit2(type="submit" name="xss" value="bleach") Submit to bleach
Server side, check the value of "xss" ( I used node.js and express for routing in the example)
router.post('/testhtml', function (req, res, next) {
var sanitizedStr = "";
if ( req.body.xss && req.body.xss == "sanitize-html" ) {
sanitizedStr = "sanitize-html";
} else
if ( req.body.xss && req.body.xss == "bleach" ) {
sanitizedStr = "bleach";
} else {
sanitizedStr = "xss undefined or unknown";
}
res.render(sanitizedStr);
});
It's a real-life example, I took it from a page, when i test snippets for XSS with different html/css sanitizers. Simplified, ofc.

How to use JavaScript & DOM on one html page to externally link to another html page

So basically I have two html pages in the same folder. One of them is the homepage, while the other is a page that basically is a form. Once the person fills out the form and clicks the submit button, I would like to make it so that it automatically changes the homepages information with the information written out on the form using DOM.
What I have tried:
Using an external & same JavaScript file for each HTML document, Firefox console said that the id is null
Using global variables, did not work.
If I haven't worded this well enough or if you don't understand, please comment and tell me!
Here's an example of what I tried to do, didn't work because the div with id type is in a different HTML document.
function submitform(){
var textbox = document.getElementsByName('name').item(0);
value= textbox.value;
window.alert(value);
document.getElementById('type').innerHTML = value;
}
Passing variables to one page from another requires some form of query with paramters, ie. newpage.php?newdata='This came from the old page'. You'll need to implement one of several options: as already mentioned, you could store the submitted data in cookies and then retrieve them on the subsequent page load, you could send the data back to the homepage using an actual submit query (see above) or you could use an AJAX routine to send the data to the home page without any type of submit action.
Form page:
function submitform(){
var textbox = document.getElementsByName('name')[0];
value = textbox.value;
localStorage["name"] = value; //save it in localStorage
} //for later use
Homepage:
function showStuff(){
var value = localStorage["name"]; //get the information back
document.getElementById('type').innerHTML = value; //put it in
}
localStorage is supported on all major browsers. If you need to support < IE9, try jStorage.
Try a DEMO: http://jsfiddle.net/DerekL/r4fXw/ or http://pastebin.com/SurbLhWZ
Why none of your attempts works
Using an external & same JavaScript file for each HTML document, Firefox console said that the id is null
Variables are not shared cross different webpages.
Using global variables, did not work.
Same as #1.

How to handle browser 'back' & 'refresh' with AJAX content on a page (so the content matches the form that loads it)

I'm having trouble searching for an answer to this, I think because the key words are too general and related to other things.
I have an index page with a records search form (AJAX) used to load records into the main div on the page. When the page first loads, the form is set to a specific state based on who the user and the contents of the div are loaded based on the same criteria. When the form is submitted the contents of the main div are replaced via AJAX.
If a user clicks a browsers REFRESH button, or goes to another page and clicks the browser BACK button, the index page comes up with the form in the same state it was when the user clicked BACK or REFRESH but the div contents are the original default contente. This makes it looks like the items listed are a result of the forms current state.
Is there a way way to detect if the page has been displayed from a a BACK or REFRESH browser action so that I could trigger the form to submit and update the contents based on the current state of the search form ($('#search_form_submit_button').click();)? Or, what is the proper thing to do for this?
Thanks - much appreciated!
If the form has a default value such as "" or "Search here.." you could check if the default value has changed and then submit the form:
// If the input value is different from the know default
if($("#search_form_input").val() != "Search here..") {
// Update the results on the page
$('#search_form_submit_button').click();
}
And call that on page ready - so inside the $(function(){ /* content here */ });
Also, have a look at History.js - https://github.com/browserstate/History.js
It provides a really complete history management system. It supports jQuery amongst several other libraries.
EDIT:
I will address some things Reno mentioned in his comment.
You can use this small library Session variables to persist data over page changes. Download the js file from that link and include it in the <head> of your document:
<script type="text/javascript" src="sessionvars.js"></script>
Then when a user makes a search, store the search in the sessvars object which is now available across pages:
sessvars.myObj = { searched: $("#Search_form_input").val() }
Then when the page loads, check if sessvars.myObj.search has a value in it. If it does then search for that value:
if(sesvars && sessvars.myObj && sessvars.myObj.searched) {
$("#Search_form_input").val(sessvars.myObj.searched);
$('#search_form_submit_button').click();
}
See the jQuery Address plugin.

Categories

Resources