POST two values and retrieve result of php function onchange - javascript

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Seleziona l'ente</label>
<select name="data" id="data">
<option value="PRO - 011142764">COMUNE DI AGLIE'</option>
<option value="PRO - 011120674">COMUNE DI AGRATE CONTURBIA</option>
</select>
<input type="text" name="textfield" id="textfield" />
</form>
<script>
$('#data').change(function() {
$.post("richiesta.php", { value: this.value });
$('#textfield').val(this.value);
});
</script>
</body>
</html>
Here's my simple web page with 2 options. The input tag is just for testing the POST data.
Here's richiesta.php, that receives the POST data on change event (I followed this thread):
<?php
list($comparto, $ente) = explode("-", $_POST['data'], 2);
echo "comparto: $comparto, ente: $ente";
?>
Here's what happens when I trigger the change event (from Firebug).
POST is ok:
Unfortunately the response has empty variables ($comparto and $ente):
What's the problem with the explode/list function?

$_POST['data'] doesn't exist you send 'value' param, so use $_POST['value']

I'm not overly familiar with javascript, so I tend to lean towards my own ways of solving this. That said, I think this would accomplish what you are trying to do (without the need for your script near the bottom of your code):
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form action="richiesta.php" method = "post">
<label>Seleziona l'ente</label>
<select name="data" id="data" onchange = "this.form.submit()" >
<option value="PRO - 011142764">COMUNE DI AGLIE'</option>
<option value="PRO - 011120674">COMUNE DI AGRATE CONTURBIA</option>
</select>
<input type="text" name="textfield" id="textfield" onchange="this.form.submit()" />
</form>
</body>
</html>
Note that this will cause the form to submit if either the select is changed or if text is entered. If you want to give someone the opportunity to alter both of them and THEN submit, you'll need to change this up a bit (probably best to just add a submit button).
Then, richiesta.php could simply get the data from $_POST['data'] and explode it from there.

Related

in form tag change button/input option with select

while working on a project i face a problem using form_input_button. in the search bar i need to get 2 action in form like this form action="http://www.youtube.com/results" and form action="https://torrentz.eu/search"
but i did not find anything on the internet about this. i only need one input and one button to submit. but what i get is 3 input one for text and another 2 for action can any one have the answer. How i can use only one input and one button showing.
My Code:
<body>
<form>
<input name="search_query" type="text" maxlength="128" />
<input type="submit" formaction="http://www.youtube.com/results" value="YouTube" />
<input type="submit" formaction="https://torrentz.eu/search" value="TorrentZ" />
</form>
</body>
</html>```
You can use this. You must listen to form submits and block them then you can open sites by selection
document.querySelector('#searchForm').addEventListener('submit', function (e) {
e.preventDefault()
let searchQuery = document.querySelector('[name="search_query"]').value
let selectedSite = document.querySelector('#selectSite').value
window.open(
selectedSite + searchQuery,
'_blank'
);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="searchForm">
<input name="search_query" type="text" maxlength="128" />
<select id="selectSite">
<option value="https://www.youtube.com/results?search">Youtube</option>
<option value="https://torrentz.eu/search?search">Torrent Z</option>
</select>
<button type="submit">Search</button>
</form>
</body>
</html>

passing a variable from Javascript to PHP using Ajax

I have a dropdown list where users can select multiple options. I stored the selected options in a String variable in this format : [value of first selected option],[value of second selected option]...
Now i want to pass the value of this variable from my Javascript in file 1 to PHP variable in file 2 using Ajax. Here is my code
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="displayData.php" id="multiple_select_form">
<select name="columns" id="columns" class="form-control selectpicker" multiple>
<option value="Country">Country</option>
<option value="Customer Name">Customer Name</option>
<option value="Order Date">Order Date</option>
<option value="Address">Address</option>
</select>
</form>
<br>
<button class="btn btn-info center-block" id="btn-get">Submit</button>
</div>
</body>
</html>
<script>
$('#btn-get').on('click', function() {
var selectedOptions = [];
$.each($(".selectpicker option:selected"), function(){
selectedOptions.push("[" + $(this).val() + "]");
});
var myVar = selectedOptions.join(",");
$.ajax({
type: "POST",
url: 'displayData.php',
data: { testVariable : myVar },
success: function(data)
{alert(data);}
});
$("#multiple_select_form").submit();
});
</script>
I added alert(data) on success in my Ajax to see if the variable got the correct value. It's working but when form is submited and the displayData.php is loaded I get error Undefined index: testVariable
displayData.php is a simple test file
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$variable = $_POST['testVariable'];
print_r($variable);
?>
Can anyone explain me what can be the issue ? I believe that the Ajax is written correctly. Thank you for your help.
Try this
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="displayData.php" id="multiple_select_form">
<select name="columns" id="columns" class="form-control selectpicker" multiple>
<option value="Country">Country</option>
<option value="Customer Name">Customer Name</option>
<option value="Order Date">Order Date</option>
<option value="Address">Address</option>
</select>
<input type="hidden" name="testVariable" id="testVariable">
</form>
<br>
<button class="btn btn-info center-block" id="btn-get">Submit</button>
</div>
</body>
</html>
<script>
$('#btn-get').on('click', function() {
var selectedOptions = [];
$.each($(".selectpicker option:selected"), function(){
selectedOptions.push("[" + $(this).val() + "]");
});
$("#testVariable").val(selectedOptions.join(","));
$("#multiple_select_form").submit();
});
</script>
You're making two requests to displayData.php. One is an AJAX request, with the value set in a field called testVariable, and one is a normal form submit with the value set in a field called columns. The error is happening on the second request.
If your intent is to use AJAX, then remove the following code:
$("#multiple_select_form").submit();
You might even remove the <form> wrapper entirely, since you're identifying the elements directly and not really using the form itself for serialization or anything. (If you ever put a button inside the form it will automatically submit unless you explicitly handle the event to cancel that behavior.)
Conversely, if you do want to submit the form, then you can remove the JavaScript code entirely and move the submit button to be inside the <form> wrapper. And, of course, rename the form element to what your server-side code expects:
<select name="testVariable" ...

Open window which user select language

Here is a short form for selecting language for a webpage, There are two languages one is marathi and another is english actually what I want is like: when a user select english language and submit the form english.html page should open and
when user select marathi language marathi.html page should open.
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<form>
<center>
<p id="p1">
Language:<select>
<option id="English" >English</option>
<option id="Marathi" >Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open" >
</center>
</form>
</html>
You can use this as a reference, considering english.html and marathi.html as your targeting pages, you can change them accordingly
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<script>
$('#button').click(function() {
var selected = $('#language option:selected');
window.location.href = selected + ".html"
})
</script>
</head>
<body>
<form>
<center>
<p id="p1">
Language:
<select id="language">
<option id="English">English</option>
<option id="Marathi">Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open">
</center>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I think its obviously, but please do not repeat it at production:
<input type="submit" id="button" onclick="window.locaton.href='lol/'+$('select').val()+'.html'" value="Open" >
Here is easy way;
<select name="forma" onchange="location = this.value;">
<option value="english.html">English</option>
<option value="marathi.html">Marathi</option>
</select>
if you want to create this using simple Javascript then use location.href = "yourPageAddress";
here is the sample code i have written for the same:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript">
function MyFunction(){
var getValue = document.getElementById("language");
//console.log(getValue);
var getIndexValue = getValue.options[getValue.selectedIndex].value;
//console.log(getValue.selectedIndex);
//console.log(getIndexValue);
if(getValue.selectedIndex == 1){
//console.log("English")
location.href = "http://www.google.com";
}
else if(getValue.selectedIndex == 2){
//console.log("Marathi");
location.href = "http://www.yahoo.com";
}
else{
console.log("Wrong Option Selected.");
}
}
</script>
</head>
<body>
Language:
<select name="language" id="language">
<option>Select..</option>
<option value="https://www.google.com" id="english">English</option>
<option value="https://www.yahoo.com" id="marathi">Marathi</option>
</select>
<br>
<button name="submit" id="submit" onclick="MyFunction()">Submit</button>
</body>
</html>
This is just the one way where you can redirect the user to selected page, there are many different ways also to execute the same operation.
You may find some console.log statement marked comment, which was just used for debugging purpose.

HTML form select option triggers text field

I'm trying to get a text field to appear when the user selects a certain option in a form select. I found exactly what I need at http://jsfiddle.net/0ak3b3z1/
However, when I copy this exact code into an html document, it doesn't work. Can anyone tell me where I'm going wrong.
Here is the HTML code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
$('#industry').on('change',function(){
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val()=="SaaS");
});
</script>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
</body>
</html>
Need to include jQuery. Plus you must place the javascript at end (after DOM elements are defined).
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$('#industry').on('change', function () {
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val() == "SaaS");
});
</script>
</body>
</html>
The dollar sign is used with the jquery library, and you're not including this library.
So just add jquery library before the js code.
Just Include this code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You need to include this line in your code.
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'> </script>

TypeError: d.textarea1 is undefined , d.textarea1.value = sChoices;

Hi i have this javascript code that when i click the qualities you want on the select dropdown list it will display to the textarea. Now i got this error
TypeError: d.textarea1 is undefined
d.textarea1.value = sChoices;
Is there something wrong in my code?
<!DOCTYPE html>
<html>
<head>
<title>List Box 4 Example</title>
<script type="text/javascript">
function tellMe(d){
var sChoices ="";
for(i=0; i<d.listbox.options.length; i++){
if(d.listbox.options[i].selected == true){
sChoices += d.listbox.options[i].text +"\n";
}
}
d.textarea1.value = sChoices;
}
</script>
</head>
<body bgcolor="lightgreen">
<form name="form1">
<p>Girl's quaalities you want?</p>
<select name="listbox" onchange="tellMe(this.form)" multiple>
<option>Pretty</option>
<option>Sexy</option>
<option>Hot</option>
<option>Intelligent</option>
<option>Funny</option>
</select>
</form>
<br />
You Choose:<br />
<textarea rows="4" cols="20" name="textarea1"></textarea>
</body>
</html>
Any help is muchly appreciated! thanks
The textarea is not in the form therefore you will not be able to reference it from the form elements, just add it to the form.
<form name="form1">
<p>Girl's quaalities you want?</p>
<select name="listbox" onchange="tellMe(this.form)" multiple>
<option>Pretty</option>
<option>Sexy</option>
<option>Hot</option>
<option>Intelligent</option>
<option>Funny</option>
</select>
<br />
You Choose:<br />
<textarea rows="4" cols="20" name="textarea1"></textarea>
</form>
http://jsfiddle.net/TgV83/
you should wrap textarea also inside the form otherwise this d.textarea1 is not known for your js code because d is your form and textarea is outside of your form. for the working code, see Musa's code.

Categories