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.
Related
Situation
I have a form
<form action="." method="POST" id="my_form">
<!-- Form stuff here -->
</form>
<p onclick="confirmUpdate();">Update</p>
The confirmUpdate() function generates a confirmation message and the following input tag:
<input type="submit" name="my_name" value="Yes. Update the data.">
using the following JavaScript:
inputYes.type = 'submit';
inputYes.name = 'my_name';
inputYes.value = 'Yes. Update the data.';
inputYes.form = 'my_form';
The page is created as intended, but the input element has no form="my_form" on it.
Condition
The HTML generated with Javascript has to be shown as a nice "HTML pop-up" (not an alert box) to ask the user if the info is correct before submitting.
Questions
Why isn't it working?
The JavaScript generated HTML doesn't appear on the Page Source. Will it be able to submit the data from the form?
Thank you in advance.
You should use setAttribute instead:
inputYes.setAttribute('form', 'my_form');
If the goal is to get your input button to work, then inside your method confirmUpdate(), make the following additions/changes:
Updated fiddle here: http://jsfiddle.net/B7QAc/4/
//add this
var theform = document.getElementById('my_form');
//change this
document.body.appendChild(screenDiv);
//to this
theform.appendChild(screenDiv);
While the previous answers were correct, I found a better solution for my problem. I had to update the question in order to make it more clear. The HTML generated with Javascript was intended to show as a nice "pop-up" to ask the user if the info is correct before submitting.
Therefore, the <input> tag has to be outside of the <form> and reference its id="my_form" via a form="my_form attribute.
Here is the updated JSFiddle for it.
While inputYes.form = 'my_form'; doesn't add the form attribute, inputYes.setAttribute('form', 'my_form'); does the job.
Notice though that it only works at the end of the script, only after it is appended to the HTML Document. It would not work otherwise (at least in this script).
Even though I lack the technical knowledge to explain it better, those are my observations.
This would be the accepted answer. I will promptly accept any other answer that is more complete than this one.
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"
I hope this question has an obvious answer to anyone who knows his way around JS and HTML :)
I have a very specific problem. I am trying to add to the header on a site buttons that will function like 'quick searches' which will basically on click send pre-filled form values to my search page and have the search page also populate these values in the ajax form inside.
Here is a sample search page that's outside of the results page:
http://www.thediamondsexperts.com/index.php?route=product/diamondsearch/jewelry
You'll notice that when you change the values there and click Search, the values also appear in the ajax form on the sidebar of the search results page.
What I simply want to do is create different variations for pre-set searches, and put them as buttons in the header.
When I try to put a few invisible forms in it won't work because of the multiple form values with the same ids but in general I think there must be a simple way to do this server side.
For instance, copy the current function that accepts the search, have it with pre-set values instead of populating the values from the form and then simply calling that function onClick. Does that make sense?
I need to create something simple enough though that would be easy for the admin to later change and customize more buttons so a client-side solution would be best.
Your help is much appreciated!
All you need is a form with hidden inputs and a submit button:
<form>
<input type="hidden" name="param1" value="Predefined value 1" />
<input type="hidden" name="param2" value="Predefined value 2" />
<input type="hidden" name="param3" value="Predefined value 3" />
<button type="submit">Search!</button>
</form>
This will only show the button, but the values will still be sent to your form's action.
...there must be a simple way to do this
server side
...a client-side solution would be best
...copy the current function that accepts
the search, have it with pre-set
values instead of populating the
values from the form and then simply
calling that function onClick. Does
that make sense?
Not really, not to me at least. If you can clarify I'd be glad to help more.
When you say "multiple form values with the same ids", I fear you may be confused: There is no requirement for a form input to have an "id", I think you mean "name", and there's no need to have multiple inputs with the same name in a form unless you want to send an array of values.
I didn't want to go overboard and talk about how the ajax works on that site, because that's another thing altogether and all you seemed to be concerned about was the preset search buttons. Hopefully this helps you figure it out, GL.
EDIT: I'm having a tough time figuring out what you're really asking, if you are trying to duplicate the behavior on that site, please tell us what server side language is available to you, if you're using or open to using any javascript libraries, and what you have tried so far. A full fledged spoon-feeding tutorial is really out of scope, you will get better, clearer help if you share the code from your current attempts.
If you want to pass values from one page to another and handle it client-side, use "get" for the form submit method, and use the handy "gup()" function to grab the param values. You can get more info on gup() here:
function gup( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
On your initial page, you can either use inputs with type="hidden" or just get the values from the visible inputs (as on your sample page). Then submit to your results page. Given an initial page with something like this...
<form method="get" action="results.html">
<input type="text" name="caratFrom" value="0.7" />
<input type="submit"/>
</form>
... here's sample usage for the results page:
var caratFrom = gup('caratFrom');
// etc.
Then simply assign those values to whatever elements you want, e.g. an input:
<!-- HTML -->
<input type="text" name="caratFromResult" value="" />
// Javascript
document.getElementById('caratFromResult').value = caratFrom;
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
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.