There are 3 buttons on a web page. On clicking each button a same popup window (say window1) opens up. Now there is another button on this popup window (window1), which further opens up to another popup window (say window2). On selecting some value from the 'window2', that value is passed onto the 'window1'. There is a 'Find' link on a 'window1', which calls a javascript function 'clicked()':
<head>
<%
Dim command
command = Request.Form("hid");
Response.Write(“Value” & command); -- The value is not printed (Reason found after
analysis that may be because the form is not submitted
successfully)
%>
function clicked()
{
document.form.hid.value='FIND';
alert("before"); -- This message box appears
**document.form.submit();** -- after a lot of analysis the conclusion is that
this submit statement stops working (as on the status
bar 'Opening https:.....File1.asp?form=...' is not
displayed when 'after' message box appears
alert("after"); -- This message box appears
}
<body.......>
<% if command = "FIND" then
Response.Write ("Inside Find"); -- This message is not printed.
// some functonality
%>
<form ....>
<input type="hidden" name="hid" value="">
</form>
</body>
This full code works fine on my machine. But this code does not work properly when run on the client-side!, although the same server and the same deployed application is being accessed. There is no particular sequence/scenario but for eg.
When say button1 clicked->window1 opens->window2 is opened->value selected->returned to window1->Clicked on Find-> clicked on Ok->returned on the main page.
Then repeated the same scenario for say 3rd button.
(Till now 'Find' link works fine).
Now repeated the same scenario for 2nd button and here 'after' message is obtained but 'inside Find' is not printed!!
The document object doesn't have a form property.
The code only works if you have the attribute name="form" on the form, and only if there is a single form with that name on the page. That is a bad name for a form, as there are other objects in the DOM that actually have a form property (i.e. fields in a form).
You should give an unambiguous name to the form, and use the document.forms collection to access the form instead of relying on that the form is added to the document namespace.
Related
I want to show message using dynamic action say this data already exist
after check the database
i tried to do that using excute server side code then alert
i tried to use trigger and automation
You didn't describe what you're doing so I'm assuming this is a form region and you want the message to appear on change of the page item.
Here is an example with a form on the EMP/DEPT sample data. Functionality is that on change of the item P59_ENAME, a dynamic action fires and shows a javascript alert if the ename already exists. In my case this is page 59. I tested this on apex 21.2
Create a form on table EMP
Create an additional page item of type "Hidden" named P59_ENAME_EXISTS
Create a dynamic action on the item P59_ENAME
Add a first true action to execute the pl/sql code. This will set a value for the page item P59_ENAME_EXISTS (Y if ename exists, N if it does not exist). Note the "items to submit" and "items to return" values - those are very important.
Add a second true action to show the javascript alert if ename already exists. Note the client side condition.
Add a 3rd action to reset the value of page item P59_ENAME_EXISTS
Run the form, change the ENAME to an existing value and click in another field on the page. You'll get the popup.
Triggers or Automations cannot be used to achieve this functionality.
I have a basic "contact us" form that asks for some basic information and has a submit button at the bottom. When the user clicks submit the form will be submitted to itself and the fields validated. If no errors, a routine is called that generates an email.
I want the button to be disabled and also have the label changed to "Sending..." when the user clicks it.
I was able to use the jQuery bootstrap calls to change the button label and then disable it... great! But as soon as I add a form submission, the changes to the button no longer occur?
I am not sure if it is the order things are done in the code or some other reason related to the submit? Here are the pertinent code bits (note all in PHP):
<html>
<form id='jkform'>
F_hidden_field("action",$G['action']);
... // bunch of forms fields
//--- Submit Button ---
echo "<div class='form-group'>";
echo "<div class='col-sm-offset-3 col-sm-9'>";
echo "<button type='button' id='sendButton' class='btn btn-primary' autocomplete='off' data-complete-text='Sending...' onclick=\"$(this).prop('disabled',true);$(this).button('complete');J_action('send_email');\">";
echo "Send Message";
echo "</button>";
echo "</div>";
echo "</div>";
...
</form>
</html>
Additionally, the JS function that simply submits the form is the following:
function J_action(the_action) {
document.jkform.action.value = the_action;
document.jkform.submit();
}
Does anyone have a clue as to why the submit would squash the changes to the button? I hope I am just missing something obvious.
Thanks.
Followup 5/26/16 - 5:12pm PT
PRE NOTE: I was just about to post the lengthly followup below, when I cross-browser tested this and discovered that my original code works perfectly as-is in Chrome, IE11 and Firefox, but not in Safari. I think this may actually be either a bootstrap & Safari compatibility issue or a Safari rendering issue (less likely). Still leaves me with an issue to deal with, but at least proves I am not crazy! For proof of concept, here was my original followup...
ORIGINAL FOLLOWUP POSTING:
Thanks for the feedback. I still think something is fishy here.
One important thing I may not have mentioned that is when the original page calls itself from the submit, it is only calling a PHP edit check function and if it passes, a PHP function that generates an email and finally a redirect to a "thank you page." What is important here is that the original script never posts anything to the client until the redirect to the thank-you page. In my understanding of client server in HTTP, that should leave all form fields and elements in whatever state they were in until some new HTML is pushed to the client.
To prove this, I did a little test using code I have used before. It essentially performs the exact same process as what I want from the bootstrap code, and works flawlessly. Basically I added a regular submit button underneath the bootstrap class button and added some "onclick" JS to it and two new JS functions. It stays disabled AND shows my "working..." text until the page redirects to the thank-you page. If this works with a regular button, then something is different in the Bootstrap structure that causes it to freak out when a submit occurs.
The javascript code to make this happen is as follows:
//--- Disables the submit button (to prevent double clicking) ---
function J_try_submit($disableField, $theAction) {
document.getElementById($disableField).disabled = true;
document.jkform.action.value = $theAction;
document.jkform.submit();
}
//--- Show "Please wait" message ---
function showWait() {
document.getElementById('waitMsg').style.display = 'block';
}
And the code in the HTML is the following:
<input id='mySubmit1' type='submit' name='dummy' value='Save Changes' onclick="J_try_submit('mySubmit1','add'); showWait();" />
<div id='waitMsg' style='display: none;font-size:12px;color:#3f7799'> Please wait...</div>
Works great and is easy to test.
FINAL NOTE: I do see the disabled cursor when I mouse over the bootstrap button after I click it while it is working, just not the style changes? So it must actually be disabled, but does not look disabled. Weird.
Not entirely clear from this code example, but my guess is you are submitting the form and causing a screen refresh, thus immediately reloading the page. In other words, the JS is executing properly but immediately being overwritten.
If you are building in client side validation and emailing the form from the client, then instead of having your logic attached to a click event on the button, you should attach the logic to a submit event on the form, and call preventDefault in the event callback to prevent the browser's default form handling. For documentation and examples in jQuery, see .submit() documentation.
after submitting your page is reloaded ? if so, the button is not pressed in , the jquery reset. you need to add to the form field <input type = "hidden" name = "btn-state" value = " 0 " > . then when you click through to install jquery in the value status and transmit it when the form is submitted . Further php check this box via $ _GET [btn-value] and depending on the state ( 0 or 1 ) to set the button text and add class "btn-disabled" in php
There doesn't seem a need to use js here at all, unless you are using it to validate the form input. From what I can gather you are posting the form to itself and validating in php, so you can use the default form submitting behaviour.
Use something like this:
<form id ="jkform" action = "example.com/thispage" method = "post">
// bunch of forms fields
//--- Submit Button ---
<div class='form-group'>
<div class='col-sm-offset-3 col-sm-9'>
<button type='button' id='sendButton' class='btn btn primary'>Send</button>";
</div>";
</div>
</form>
You seem to be adding the F_hidden_field() function to the form which is not needed as you can add that as the action and method on the form itself.
This way you can eliminate all the js and extra echo's everywhere in the php. If you need to generate a lot of things in php you can look into template engines such as handlebars which will make things much cleaner and simpler.
If your only intention is to have the effect of the button changing when clicked you could use jquery submit function.
I am new to forms and am trying to get an understanding of what is going on. I have looked at lots of questions and tutorials, but feel unclear on certain points.
So far I have created the following form in an aspx page:
<form id="uploadbanner" enctype="multipart/form-data" method="post" action="#">
<span class="txtSmallGrey fl" style="display:block; width:200px; margin:15px; margin-bottom:2px">
<%= oUtils.GetContentText("Collect_Config_upload_sound") %>
</span>
<input type="file" name="SoundFile" id="SoundFile" style="margin:15px; margin-bottom:2px">
<input type="submit" value="Upload" id="submit" style="float:left; margin-left:245px; margin-top:1px; height:20px;">
</form>
and I have the following script at the top of the page:
<%
if(Request.Form["SoundFile"] != "")
{
HttpPostedFile file = Request.Files["SoundFile"];
string fname = Path.GetFileName(file.FileName);
file.SaveAs(Server.MapPath(Path.Combine("~/App_Data/", fname)));
}
%>
I have a reasonable understanding of AJAX so some of this seems familiar to me.
Now to explain what I understand:
The form is declared and given the id of 'uploadbanner'. As I am transferring a file I have to include 'enctype...' I am posting as it is more secure and more flexible.
The action term tells the form where to post to. In this case I have put the C# code at the top of the page so do not need to include an asp.net page address to process this. If I did, I would include an asp.net page, in the same way as I would for AJAX (I think?).
Anything with an input tag inside the form tags will be posted in the form, and will send the name and value.
When the submit button is pressed, the form will be submitted to the the server side code for processing. So far I feel I understand what is going on.
Now the parts I feel less clear about,
Is it the case the when the 'submit' button is pressed, the C# code
at the top of the page will be activated, and so if the field was
blank it would not do anything?
And if the button was pressed multiple times, would the form be
submitted multiple times?
If so, then this is much the same way as AJAX?, and the file will
simply be passed to the C# code, from where I can do what I need with
it?
My final questions is, can I submit the form using an alternate
method to the submit button, eg can I make a normal JavaScript button
and tell it to submit the form?
Is it the case the when the 'submit' button is pressed, the C# code at the top of the page will be activated, and so if the field was blank it would not do anything?
Yes, Every time your page loads it will run the C# code, One would assume that if you submit the form it will check the posted form data. It's probably best to check HTTP headers.
And if the button was pressed multiple times, would the form be submitted multiple times?
Yes, the form will be submitted multiple times.
If so, then this is much the same way as AJAX?, and the file will simply be passed to the C# code, from where I can do what I need with it?
It's similar in the sense of HTTP requests but your posting to the page with a file attached and then C# checks with the page has file attached by running the Request.Form and then Request.Files and Posts to the server.
My final questions is, can I submit the form using an alternate method to the submit button, eg can I make a normal JavaScript button and tell it to submit the form?
What do you mean by a normal JavaScript button? You don't have to use a submit button. As long as your passing in a file and the page is loaded, the code will still run. I have approach where as i post to a HTTPHandler. Code snippet below:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile postedFile = context.Request.Files["Filedata"];
string filename = postedFile.FileName;
var Extension = filename.Substring(filename.LastIndexOf('.')
+ 1).ToLower();
string savepath =HttpContext.Current.Server.MapPath("/images/profile/");
postedFile.SaveAs(savepath + #"\" + user.uid + filename);
}
So when submitting i point to the HttpHandler.ashx which is a class that implements the IHttpHandler interface, Which in turn gets the current context.
I am writing code for a small webproject using js and jquery. In it, at some point, onclicking a button, i create a dialog. the dialog has a form within it with a name field and some number fields. I am supposed to check user inputs and send them to server, along with appending the name field to a list in the browser, to intimate user, one more item has been added. Two strange things are happening -
1) After posting the form, the dialog box closes on its own without me issuing a dialog('close') anywhere in the submit button handler.
2) The name entry doesn't get appended to the list. Its as if the whole page refreshes after the submit. With the original default entries of the list of names.
Anyone has any ideas on why this is happening? Would post some code for your aid.Please don't suggest to use Ajax instead. I think this reflects some fundamental flaw in my understanding of JS ways and would like to clear it first than just switching to some other technology.
<div id='dialog' title='Define New Matrix'>
<form name='form1' id='form1' method='post'>
<fieldset>
<label for="Name">Name</label>
<input type='text' name='nameofmatrix' id='Name' class='whitepanes'><br>
<label for="a11">a11</label>
<input type="text" name='a11' id='a11' class='whitepanes number-field'><br>
<label for="a22">a22</label>
<input type="text" name='a22' id='a22' class='whitepanes number-field'><br>
<button id='submit_button'>Submit</button>
<button id='cancel_button'>cancel</button>
</fieldset>
</form>
<p id='tip' style='color:red;'><i>All fields are required</i></p>
</div>
<script>
//#button_define is a button on whose clicking the dialog opens.
$('#button_define').click(function(){
$('#dialog').dialog('open');
$('#tip').html("<p style='color:red; font-size:small'>All fields are mandatory</p>");
});
$('#submit_button,#cancel_button').button();
$('#cancel_button').on('click',function(){
$('#dialog').dialog('close');
});
$('#submit_button').click(function(event){
event.preventDefault();
var name=$('input[name=nameofmatrix]').val();
//Validate is a function which returns a bool if validation proceeds correctly
var isCorrect = Validate();
if(isCorrect){
//if validated correctly then add to list
$('#form1').submit();
//$('#dialog').dialog('close');
$('#selectable').append("<li class='ui-widget-content'>",name,"</li>");
}
});
</script>
Its as if the whole page refreshes after the post. with the original entries.
That's precisely what happens. Though I'm not sure where you're submitting the POST request to since there's no action attribute on your form. But a standard non-AJAX request triggered by a form sends the request to the server and then renders the response from the server. If the response is this same page again, then this same page will be rendered again.
JavaScript isn't going to remember the state of the previous page when it loads this new response. Even if they're the same page, they're two separate responses from the server. So...
1) After posting the form, the dialog box closes on its own without me issuing a dialog('close') anywhere in the submit button handler.
The dialog isn't closing. After the page refreshes you're in an entirely new page context. It didn't close, it just hasn't been opened yet in this context.
2) The name entry doesn't get appended to the list.
There's nothing that would cause this to happen when the page loads, so in the new page context it doesn't happen. Your server-side code would need to include this content in the response to the POST request.
I think this reflects some fundamental flaw in my understanding of JS ways and would like to clear it first than just switching to some other technology.
Included in that misunderstanding is the fact that AJAX is part of JavaScript. (The "J" in "AJAX" stands for "JavaScript.") It's not "switching to some other technology." It's taking advantage of the capabilities of the technology you're already using. All AJAX does, really, is send requests and receive responses to/from the server without refreshing the page context.
You are not properly appending the name. The concatenation operator is not a comma, but a + in javascript:
$('#selectable').append("<li class='ui-widget-content'>" + name + "</li>");
Next, the form refreshes because you are submitting the form using $('#form1').submit();. If you do not want the page to refresh while submitting, use ajax.
I'm trying to have users enter info into a form (via radio buttons), manipulate the input data, and write resulting text onto the middle of a web page--beneath the radio buttoned form. So I have variables assigned to whenever a user selects a radio button, the onClick event calling a function something like:
function saveValue1(value) {
someVariable=value;<br>
}
And when users click a Submit button, a function works like it's supposed to, ultimately writing an output string. The problem is how to write the string value in the middle of the page. I have this [pseudo]code at the end of the function (pretend the string I want to write to the page is named aVariable):
document.getElementById('aPlace').innerHTML=aVariable;
And of course there's HTML in the displayed page like this:
<div id="aPlace"></div>
After a user pressed the form's Submit button the correct output variable is displayed very briefly, and then disappears. Why is this? And how should I be writing this code instead?
Thanks for helping a newbie, as always.
The form is probably submitted. put a "return false" at the end to stop it submitting the form
It seems that the browser is refreshing? How is the form data handled?
If the form is needed only to add the text to the page, I would add a button
<button onclick="saveValue1("+value+");")>
and avoid submitting the form.