Wow...all similar questions have serious downvotes. Guess I will be taking some as well, but been on this for a couple days and still stuck. So here it goes...
All of the following code is in index.php:
<form action="index.php" method="get">
<select name="month" id="month">
<option value="1">jan</option>
<option value="2">feb</option>
<option value="3">mar</option>
<option value="4">apr</option>
<option value="5">may</option>
<option value="6">jun</option>
<option value="7">jul</option>
<option value="8">aug</option>
<option value="9">sep</option>
<option value="10">oct</option>
<option value="11">nov</option>
<option value="12">dec</option>
</select>
</form>
<?php
$month = $_GET["month"];
echo "MONTH: $month";
$month in the php is NULL (Nothing prints out for $month). I want to be able to use it in the <?php ?> to make adjustments to it, then use it again in my HTML. How can I get the value from the HTML code for use in the PHP code?
I want to take 'value' and assign it to '$month'
Changes on the html page cannot change things within a php script as it has already executed on the server side. You need to setup some method to add the proper variable to the url (as you are using $_GET which is an array of the url variables in the query string, name value pairs after the ? in a url).
HTML
<select name="month" id="mySelect">
<option value="1">jan</option>
<option value="2">feb</option>
<option value="3">mar</option>
<option value="4">apr</option>
<option value="5">may</option>
<option value="6">jun</option>
<option value="7">jul</option>
<option value="8">aug</option>
<option value="9">sep</option>
<option value="10">oct</option>
<option value="11">nov</option>
<option value="12">dec</option>
</select>
JS
window.onload = function(){
var select = document.getElementById("mySelect");
select.onclick = function(){
var selectval = this.value;
window.location.href = "/somepage.php?month="+selectval;
};
};
Or using form submit, forms with the method GET will put all the input/select/textarea elements values into the url when submitted
<form action="somepage" method="GET">
<select name="month" id="mySelect">
<option value="1">jan</option>
<option value="2">feb</option>
<option value="3">mar</option>
<option value="4">apr</option>
<option value="5">may</option>
<option value="6">jun</option>
<option value="7">jul</option>
<option value="8">aug</option>
<option value="9">sep</option>
<option value="10">oct</option>
<option value="11">nov</option>
<option value="12">dec</option>
</select>
<input type="submit" name="submit" value="Submit">
</form>
PHP is a server side language. You cannot use php on client side. If you want to do something on client side, use JavaScript.
If you want to use php with your html either you have to refresh the page(see answer of Patrik Evans), or use Ajax.
If you are planning to use ajax as it is fast and simple, move your php to a different file like index-form.php and call it by ajax get method.
Basically when you load the page via browser, browser first lookup for your site IP from DNS. Then your server will compile the whole page (ignoring html, js and other client side script) and compile the server side scripts like PHP, Perl, Python etc depending upon the type of server. Then your server will send the compiled page to your browser and browser will read it, compile the client side scripts and render it in your viewport.
Related
I making a page in Wordpress and I need to be able to use the data submitted by an HTML form as variables. The form in my case is two simple dropdown select forms with a submit button. I am not sure what to put as the action attribute for the form and how to access it. I want to use the GET method to do this, but I am not sure how to use PHP in Wordpress or where I would store a PHP page/file. Any help would be appreciated.
This is the HTML code of my page, the items in square brackets are from plugins. kids.php is a file on my computer that I ran it locally with, it has nothing to do with my Wordpress site and does not do anything there.
<form id="form" action="kids.php" method="get">
[one_half]
<h3>Select a Country</h3>
<div class="dropdown">
<select id="dropdownl" name=dropdownl>
<option disabled="true">Country</option>
<option disabled="true">North America</option>
<option value="62292">Canada</option>
<option value="72808">Mexico</option>
<option value="144586">Puerto Rico</option>
<option value="163668">United States</option>
<option disabled="true">South America</option>
<option value="63839">Argentina</option>
<option value="67922">Brazil</option>
<option value="78702">Colombia</option>
<option value="60670">Peru</option>
<option disabled="true">Oceania</option>
<option value="32137">Australia & New Zealand</option>
<option disabled="true">Africa</option>
<option value="63210">Egypt</option>
<option value="78700">South Africa</option>
<option disabled="true">Asia</option>
<option value="66137">China</option>
<option value="49932">India</option>
<option value="40308">Israel</option>
<option value="78709">Japan</option>
<option value="223252">Philippines</option>
<option value="60438">Republic of Korea</option>
<option value="69605">Singapore</option>
<option value="70391">Taiwan</option>
<option value="71971">Thailand</option>
<option disabled="true">Europe</option>
<option value="32142">Austria</option>
<option value="32146">Belgium</option>
<option value="78707">Bulgaria</option>
<option value="72763">Czech Republic</option>
<option value="31277">Denmark</option>
<option value="62393">Finland</option>
<option value="31223">France</option>
<option value="31026">Germany</option>
<option value="63208">Greece</option>
<option value="63016">Hungary</option>
<option value="183519">Ireland</option>
<option value="122492">Italy</option>
<option value="142792">Lithuania</option>
<option value="162411">Netherlands</option>
<option value="67164">Norway</option>
<option value="56320">Poland</option>
<option value="62344">Portugal</option>
<option value="67210">Romania</option>
<option value="68895">Russian Federation</option>
<option value="143380">Serbia</option>
<option value="78705">Slovakia</option>
<option value="25372">Spain</option>
<option value="25520">Sweden</option>
<option value="25408">Switzerland</option>
<option value="67375">Turkey</option>
<option value="63212">Ukraine</option>
<option value="25482">United Kingdom</option>
</select>
</div>
[/one_half]
[one_half_last]
<h3>Select a Country</h3>
<div class="dropdown">
<select id="dropdownr" name=dropdownr>
<option disabled="true">Country</option>
<option disabled="true">North America</option>
<option value="62292">Canada</option>
<option value="72808">Mexico</option>
<option value="144586">Puerto Rico</option>
<option value="163668">United States</option>
<option disabled="true">South America</option>
<option value="63839">Argentina</option>
<option value="67922">Brazil</option>
<option value="78702">Colombia</option>
<option value="60670">Peru</option>
<option disabled="true">Oceania</option>
<option value="32137">Australia & New Zealand</option>
<option disabled="true">Africa</option>
<option value="63210">Egypt</option>
<option value="78700">South Africa</option>
<option disabled="true">Asia</option>
<option value="66137">China</option>
<option value="49932">India</option>
<option value="40308">Israel</option>
<option value="78709">Japan</option>
<option value="223252">Philippines</option>
<option value="60438">Republic of Korea</option>
<option value="69605">Singapore</option>
<option value="70391">Taiwan</option>
<option value="71971">Thailand</option>
<option disabled="true">Europe</option>
<option value="32142">Austria</option>
<option value="32146">Belgium</option>
<option value="78707">Bulgaria</option>
<option value="72763">Czech Republic</option>
<option value="31277">Denmark</option>
<option value="62393">Finland</option>
<option value="31223">France</option>
<option value="31026">Germany</option>
<option value="63208">Greece</option>
<option value="63016">Hungary</option>
<option value="183519">Ireland</option>
<option value="122492">Italy</option>
<option value="142792">Lithuania</option>
<option value="162411">Netherlands</option>
<option value="67164">Norway</option>
<option value="56320">Poland</option>
<option value="62344">Portugal</option>
<option value="67210">Romania</option>
<option value="68895">Russian Federation</option>
<option value="143380">Serbia</option>
<option value="78705">Slovakia</option>
<option value="25372">Spain</option>
<option value="25520">Sweden</option>
<option value="25408">Switzerland</option>
<option value="67375">Turkey</option>
<option value="63212">Ukraine</option>
<option value="25482">United Kingdom</option>
</select>
</div>
[/one_half_last]
<input type="submit" value="Submit">
</form>
In order to integrate your custom form in Wordpress, you have to do the following:
Create a custom page template by creating a new php file in your theme and include this convention on the top of the page:
<?php /* Template Name: Example name */ ?>
You can include your form on this template file, but ensure that you leave the action attribute empty. Do not use common names for the input fields in your form, because you can easily make a conflict with some of WordPress' reserved names.
<form id="form" action="" method="get">
You can access the $_GET variable in this file or through the "init" action hook.
Make sure to create a new Page from the WordPress dashboard and use your newly created custom template with this page. This way you can access your form on the front-end.
The path to the PHP page would need to be the action. If the page containing your form is the same page where the PHP script will execute, then you would use that path as the action.
So lets say your application runs on example.com/subdir/mypage.php, then your action could simply look like this: action="/subdir/mypage.php"
But if your PHP script runs in a different location, then your action would have to point to that location.
To access the parameters submitted from the form, your PHP script would need something like this:
<?php
$myvar=$_SERVER['QUERY_STRING'];
parse_str($myvar,$output);
$dropdownl_val=$output['dropdownl'];
$dropdownr_val=$output['dropdownr'];
?>
I would recommend you look into Wordpress plugin development though, because adding any scripts to your template means it would execute on every request, and that is not a good idea unless it is exactly what you want to achieve, or unless the page runs independently from your Wordpress application.
I have this HTML code :
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
and to make user able to select more than one items, I'm using this jQuery plugin : http://harvesthq.github.com/chosen/
but, once it submitted... the PHP script only able to retrieve one of $_POST['cars'] value. the last one. how to make PHP to be able to retrieve ALL of it?
I've found the answer...
<select name="cars[]" multiple="multiple">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
and in the PHP part :
$cars = $_POST['cars'];
print_r ($cars);
you must do the following:
//$_POST or $_GET is the method of your form request
foreach ($_POST['cars'] as $selected_option) {
echo $selected_option;
}
that's it.
I have a question. Let me explain this with an example.
I have this piece of code:
<form action="vehicles.php" method="get">
<span>Marca:
<select name="brand">
<option value="null" selected="selected"></option>
<option value="Volkswagen">Volkswagen</option>
<option value="Renault">Renault</option>
<option value="Peugeot">Peugeot</option>
<option value="Fiat">Fiat</option>
</select>
</span>
<span>Modelo:
<select name="model">
<option value="null" selected="selected"></option>
<option value="206">206</option>
<option value="Suran">Suran</option>
<option value="Passat">Passat</option>
<option value="Punto">Punto</option>
</select>
</span>
<input type="submit">
</form>
Is any way to prevent the assignment of those variables if the option selected is the "null" one?
If, for example, I select brand="Renault" and model="null" the url is
http://mywebpage.com/vehicles.php?brand=Renault&model=null
but it should be
http://mywebpage.com/vehicles.php?brand=Renault
I know how to unset the variables with "null" value after the form submission with PHP. Is any way to do it before the submission and after the variables are setted to "null".
I would like a cleaner url, free of "variable=null" results.
P/D: I don't have a native english speaking so feel free to edit my question. I wish you understand me.
I am afraid that you might need javascript to achieve what you want.
Take a look at this code:
<form action="vehicles.php" id="carForm" method="GET">
<span>Marca:
<select name="brand" id="brand">
<option value="none" selected>-</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Renault">Renault</option>
<option value="Peugeot">Peugeot</option>
<option value="Fiat">Fiat</option>
</select>
</span>
<span>Modelo:
<select name="model" id="model">
<option value="none" selected="selected">-</option>
<option value="206">206</option>
<option value="Suran">Suran</option>
<option value="Passat">Passat</option>
<option value="Punto">Punto</option>
</select>
</span>
<input type="button" value="Submit" onclick="submitFormFilter();" />
</form>
Javascript : code will be like this:
<script>
function submitFormFilter(){
var myForm = document.getElementById("carForm");
var carBrand = document.getElementById("brand");
var carModel = document.getElementById("model");
if(carBrand.value === "none" || null){
carBrand.parentNode.removeChild(carBrand);
}
if(carModel.value === "none" || null){
carModel.parentNode.removeChild(carModel);
}
myForm.submit();
}
</script>
http://jsfiddle.net/7xzKP/1/
you can it try here.
Include the value attribute of your option tags.
<option value="" selected="selected">-</option>
You should really do this for all of your options.
if you don't want to use $_GET superglobal because of the url extension that it comes with try using $_POST instead. It will not have a url extension and it can still store values that you can later retrieve. Just be sure to change your method to equal POST instead of GET.
So the code for the form tag would change to:
<form action="vehicles.php" method="POST">
And you can later access it by (for example):
echo $_POST['brand'];
or
echo $_POST['model'];
as well, you probably want to add a value param to the values that you have in your option tag.
EDIT-
I've added this new section since you don't want to use POST even though I think you should.
You can stay with the GET method by doing this line of code:
<form action="vehicles.php" method="GET">
<span>Marca:
<select name="brand">
<option value="none" selected>-</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Renault">Renault</option>
<option value="Peugeot">Peugeot</option>
<option value="Fiat">Fiat</option>
</select>
</span>
<span>Modelo:
<select name="model">
<option value="none" selected>-</option>
<option value="206">206</option>
<option value="Suran">Suran</option>
<option value="Passat">Passat</option>
<option value="Punto">Punto</option>
</select>
</span>
<input type="submit">
</form>
Let me know if that helps
You should set the value for the option tag of <select> :)
You's missing set value for option tag. you should set the value for option tag in select tag. With the blank value, you can assign it to a special value like zero(0)
<select name="model">
<option value="0" selected>-</option>
<option value="1">206</option>
<option value="2">Suran</option>
<option value="3">Passat</option>
<option value="4">Punto</option>
</select>
EDIT:
Ok. I got your point. You can import jquery to your page and make a check by javascript before you submit, if the value of select box is blank. you can remove it.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$.ready(function(){
$("form").submit(function(){
if($("select[name='model']").val() == "0") $("select[name='model']").remove();
return true;
});
})
</script>
I have 8 select fields with different options in each and im trying to pass each selected value into a querystring but im not sure how this work.
<form method="post">
<fieldset>
<legend class="hidden">Choose your options</legend>
<ol>
<li><label>option 1</label>
<select>
<option value="">Select one..</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
<li><label>option 2</label>
<select>
<option value="">Select one..</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
<li><label>option 3</label>
<select>
<option value="">Select one..</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
</ol>
</fieldset>
</form>
so ive got 8 of these and I want to select a value from each one and then press submit which will then bring up a best match from the values passed...
Read about Dealing with Forms.
You must give the form elements a name, e.g.:
<li><label>option 1</label>
<select name="option1">
<option value="">Select one..</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
Then you can access the value via $_POST['option1'].
Note: As you specified POST as form method, the data is not sent via the URL to your PHP script, but is contained in the request body. If you want to have the data in the URL (as querystring) you have to change the method to GET.
I'm nut sure exactly what you're looking for, but if you put a name=".." attribute into your select tags, they'll end up into the querystring?
You are missing NAME argument from the SELECT TAG
Once you have this, options will be received by the php script in $_POST array.
So, for example:
<SELECT NAME="mySelect">
<OPTION VALUE="V1">Value 1</OPTION>
<OPTION VALUE="V2">Value 2</OPTION>
...
</SELECT>
You would read the value in your php script from $_POST['mySelect']
Also, keep in mind that you need to enter ACTION tag for your form, defining the php script that will execute once you send your form.
Each <select> needs to have a name, for example, the first one could be <select name="firstSelection">. When you click submit, the browser sends something like firstSelection=1&secondSelection=&thirdSelection=1.
i have a form containing inputs for times (specifically, an opening and closing time). when the submit button is pressed, it goes to a php page where these inputs are added to a database. i want to check a few things before allowing the form to submit. for example, i want to make sure that the start time is earlier than (less than) the end time. here's the form:
Opens:
<select name="starthour1">
<option value="00">12</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select> :
<select name="startminute1">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="59">59</option>
</select>
<select name="startwhen1">
<option value="am">am</option>
<option value="pm">pm</option>
</select>
Closes:
<select name="endhour1">
<option value="00">12</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select> :
<select name="endminute1">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="59">59</option>
</select>
<select name="endwhen1">
<option value="am">am</option>
<option value="pm">pm</option>
</select>
i found javascript code for how to check individual form elements, but i can't figure out how i could combine multiple without submitting. in my php page, i have the following code:
$starthour1=$_POST['starthour1'];
$startminute1=$_POST['startminute1'];
$startwhen1=$_POST['startwhen1'];
$endhour1=$_POST['endhour1'];
$endminute1=$_POST['endminute1'];
$endwhen1=$_POST['endwhen1'];
$start_time1=$end_time1="";
if($startwhen1=="pm"){
$starthour1=$starthour1+12;
}
if($endwhen1=="pm"){
$endhour1=$endhour1+12;
}
$start_time1=$starthour1.":".$startminute1.":00";
$end_time1=$endhour1.":".$endminute1.":00";
if($end_time1=="00:00:00"){
$end_time1="23:59:00";
}
echo "<br>start time is ".$start_time1;
echo "<br>end time is ".$end_time1;
$startnum=str_replace(":", "", $start_time1);
$endnum=str_replace(":", "", $end_time1);
if($endnum<$startnum){
echo "<br>start time can't be later than end time!";
}
else{
//add to database
}
however, checking this stuff after submitting doesn't make sense. i suppose i could redirect back to the initial page if the error was found, but that doesn't seem efficient.
also, i was thinking maybe i could have some php on the page with the form that checks for validity. if it validates, it then posts to the php page that inserts stuff into the database. does this make sense and is it possible?
is there a better solution? i imagine there is something i could do with javascript but i haven't been able to figure it out.
additionally i'd like to inform the user of invalid inputs with text that appears next to the input box. i should be able to figure this out once the rest is working though.
thanks.
Have the onSubmit() or action of the form call a JavaScript function, like this:
<form id="form" onSubmit="return doSubmit();" action="#">
Then, in doSubmit() you can actually perform any of the validations (and only actually submit the form if they pass)
function doSubmit(){
if (validationsPass()) {
$('#form').submit();
}
}
To inform users of invalid input next to the actual form field, you can have hidden divs or spans next to each field, and use Javascript to un-hide them if they fail some sort of validation.
if(!fieldNotValid){
$('#field-error').show(); //Or use effects like .highlight()
}
Always check at PHP level the user input, no matter if you check it in the client side as well using javascript.
In javaScript I recommend you to use a Js library like jQuery that has a plugin for form validation. Very useful and easy to implement.
At PHP level I recommend you to use filter_var functions. Very efficient as well.
Consider turning the Form Data into DateTime objects instead. This will make comparison much easier than fiddling with each part individually. It will also make sure the DateTime string put into the database is safe for insertion, because you will get the string from the format() method.
thanks for the help! i ended up using:
<form action="add.php" onsubmit="return validate_form()" method="POST" name="addform">
with:
function validate_form(){
var f = document.addform;
var start, end, starthour, endhour;
var valid=true;
..........
starthour=f.starthour1.value;
endhour=f.endhour1.value;
if(f.startwhen1.value=="pm"){
var starthournum = starthour * 1;
starthournum = starthournum+12;
starthour = starthournum.toString();
}
if(f.endwhen1.value=="pm"){
var endhournum = endhour * 1;
starthournum = starthournum+12;
starthour = starthournum.toString();
}
start = starthour+f.startminute1.value;
end = endhour+f.endminute1.value;
if(end=="0000"){
end="2359";
}
if(end<start){
alert("Start time can't be later than end time!");
valid=false;
}
return valid;
}