My idea : when click a filename will get the path of file ,
then create a form and submit this form,
but i don't know how to submit ,
when submit , undefined form cause elements was created at same time
help me, thank !
<p onclcick='startUpload(this.value)'>PATHTOFILE<p>
function startUpload(file)
{
var form = '<form name="form_upload" method="post" enctype="multipart/form-data" action="upload.php">';
form += '<input type="file" name="upload_logo"/>';
form += '</form>';
// code to submit . i don't know how :(
}
first off, p tags have no value. this.value needs to change to this.get("text").clear(); second, you cannot pass on the value to the file dialogue object from an external source - else, what's to stop you from changing that value to say, c:\autoexec.bat or /etc/passwd or similar, you get the idea - a major security flaw in the design.
so the form creation is fine but it needs to be user driven - they select the file, they submit (or you submit on select for the file input).
to plain submit using your current html you'd do:
new Element("div", {
htm: form
}).inject(targetDiv);
targetdiv.getElement("form[name=form_upload]").submit();
if you need to ajax it, then say so - there are some methods available through html5 or an iframe shin or a flash uploader that can allow you to do so without a page reload, neither of which qualifies for progressive enhancement though.
good luck
Related
I need to send a javascript String to a php file when it's called. I am aware of the server-side/client-side relation, but I'm guessing this case is a bit different.
The purpose of this website would be for an user to insert values on INPUT tags (many of them) and have them sent via email through PHPmailer. The problem is, I don't want any blank inputs to be sent AND I want a "label" to appear before the values in the email. The best workaround I thought of was to insert everything I want into a JS String and have it picked up by the phpmailer when the user submits the form.
Sorry for the long story, but if you think there's a better solution than mine, please speak up.
Anyway, here's the piece of code that is being a problem.
<form name="contactform" method="post" action="mailer.php">
I've looked around and it seems that I could send this variable through a function similar to this (which I tested and works fine):
var str = "This is a String variable";
function redirect(){
window.location.href = "mailer.php?values=" + str;
}
If I wanted to get that variable sent by the form's ACTION atribute (If I wanted to get some variables with $_POST I'd need the submit button, right?), how would I do it?
Just to help you visualize it, here's more or less what I want:
<form name="contactform" method="post" action="mailer.php$values"+str>
Thanks in advance for all the answers and suggestions.
#edit: I just realized what I'm basicaly asking is: How to have a SUBMIT button's ACTION changed before it accesses the php page?
I can only finish editing this String right before it's sent. Or I could re-write it every time an input loses focus but I don't think that re-writing this String, which involves an Array of 100+objects, every time something changes would be the best option.
As pointed out in the comments the best way of doing this is to place hidden files in the form via javascript.
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "name_you_want");
input.setAttribute("value", "value_you_want");
//append to form element that you want .
document.getElementById("contactform").appendChild(input);
Add the contactFormId
<form name="contactform" method="post" id="contactForm" action="mailer.php">
Note that doing this will get the values via $POST var instead GET wich makes more sense since you are sending via post your form.
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.
Please explain the piece of code below, emphasize on ./login and onsubmit keywords..
<form action="./login" onsubmit ="return validatedata()" method="post">
This is a form tag of HTML language. It says following things:
content of this form (such as Text Box or Radio Button or Combo Box or other HTML component values) send to ./login url. It is better use HttpServletRequest.getContextPath() for set relative path rather of absolute path.
onsubmit ="return validatedata()" part says: When user click on submit button(with any label) before submit form to ./login url, execute validatedata function in Java Script functions, if this function not existed , user get a java script error(or other script languages).
method="post" part says: this form send with POST method . please see http://www.cs.tut.fi/~jkorpela/forms/methods.html for more information.
for more information related to form tag see : http://www.w3schools.com/tags/tag_form.asp
This declares an HTML <form> element. When submitting the form it will call the javascript function validatedata(). If the function return true the form will be submitted and if it return false, it won't. The './login' is the destination of the form data. So there is probably a page handling the url http://<your_site>/<where_you_currently_are>/login. It also depends on the technology you use. I don't know if you use a framework such as Struts or if you only use JSPs as is.
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.