jquery load passing a parameter - php

Hello just want to ask what is the proper way to pass a parameter using jquery my parameter is from a html input , below is my code.
function ajax_post(){
var param = document.getElementById('def').value;
$('#chatlogs').load('main.php?id='+param);
}
I'm able to load the main.php but cannot get to echo the param, here is my main.php code.
<?php echo $_GET['id'];?>
Adding more details.. im getting the parameters from a HTML select input then after getting the value, will then load the main.php into a div with a id of #chatlogs.
<select name="topic" id="def" class="form-control" style="width:450px;" onChange='ajax_post()'>
<option value="" selected>---</option>
<option value="Solder Short">Solder Short</option>
<option value="Insufficient Solder">Insufficient Solder</option>
<option value="Misaligned Component">Misaligned Component</option>
<option value="Missing Component">Missing Component</option>
<option value="Inverted Component">Inverted Component</option>
<option value="Pad Contamination">Pad Contamination</option>
</select>
<div id="chatlogs">
Please select a defect category...
</div>

Try this:
<select name="topic" id="def" class="form-control" style="width:450px;">
<option value="" selected>---</option>
<option value="Solder Short">Solder Short</option>
<option value="Insufficient Solder">Insufficient Solder</option>
<option value="Misaligned Component">Misaligned Component</option>
<option value="Missing Component">Missing Component</option>
<option value="Inverted Component">Inverted Component</option>
<option value="Pad Contamination">Pad Contamination</option>
</select>
<div id="chatlogs">
Please select a defect category...
</div>
<script>
$(document).ready(function(){
$('#def').on('change', function() {
var param = document.getElementById('def').value;
//alert(param);
$('#chatlogs').load('main.php?id=', param);
})
});
</script>

Try this one:
function ajax_post(){
var param = document.getElementById('def').value;
$('#chatlogs').load('main.php?id='+param);
}

Related

Chosen not work after ajax call

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>
HTML
Towns
<select class="form-control select2 chosen-select" id="propertyCity" name="propertyCity[]" style="width:90%;" multiple="multiple" data-tags="true">
<optgroup label="Alajuela">
<option value="Alaj_Alajuela">Alajuela</option>
<option value="Alaj_Atenas">Atenas</option>
<option value="Alaj_Grecia">Grecia</option>
<option value="Alaj_La Fortuna">La Fortuna</option>
<option value="Alaj_La Garita">La Garita</option>
<option value="Alaj_La Guacima">La Guacima</option>
<option value="Alaj_Orotina">Orotina</option>
<option value="Alaj_San Carlos">San Carlos</option>
<option value="Alaj_San Ramon">San Ramon</option>
<option value="Alaj_Upala">Upala</option>
</optgroup>
</select>
</div>
SCRIPT
jQuery(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"
})
this above code works first time but when i get response from ajax and replace my dropdown values then chosen not worked.
This is my ajax function success code
success: function( response ) {
$(".townsclss").html(response);
$("#propertyCity").addClass("chosen-select");
$("#propertyCity").trigger("chosen:updated");
$(select).trigger("chosen:updated");
}
Response comes in sucess:
<div id="propertyCityReplace">
<label for="propertyCity" style="width:90px;"> City </label><br />
<select class="form-control select2" id="propertyCity" name="propertyCity[]" style="width:90
%;" multiple="multiple" data-tags="true">
<optgroup label='Limón'>
<option value='Lim_Cahuita'>Cahuita</option>
<option value='Lim_Caribbean Coast'>Caribbean Coast</option>
<option value='Lim_Guacimo'>Guacimo</option>
<option value='Lim_Puerto Limon'>Puerto Limon</option>
<option value='Lim_Puerto Viejo'>Puerto Viejo</option></optgroup>
</select>
</div>
Can you help me why chosen not worked after ajax call?
Because jQuery(".chosen-select").chosen({... runs only at page load. The ajax changes the DOM elements and the events are gone.
You have call
jQuery(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"
})
after the ajax call, right after
$("#propertyCity").addClass("chosen-select");

Creating dynamic button with Jquery

Hey guys I'm trying to create a dynamic button from a drop down list. for example, in the HTML code below...
function dropdownbutton(){
var make = document.getElementById("makelist");
var answer = make.options[make.selectedIndex].value;
alert("answer")
}
<div class="make">
<label>Make</label>
<select name="make" id="makelist" onchange="getId(this.value);">
<option value="">Select Make</option>
<option value="">1</option>
</select>
</div>
<div id="model">
<label>Model</label>
<select name="model" id="modellist" onchange="getId2(this.value);">
<option value="">Select Model</option>
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div id="year">
<label>Year</label>
<select name="year" id="yearlist" onchange="getId3(this.value);">
<option value="">Select Year</option>
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>
I'm open to trying it in different languages but I would prefer to do it in php, I simply don't know how to get the values from each dropdown.
I have taken help of Jquery here, inside the dropdownbutton() function i call all the select box element.
And using .each function extracted the value selected value of dropdowns.
i check those value if not empty then created a button inside element having Id #append_new_button
Please check the below code it might solve your issue
Thanks
function dropdownbutton() {
jQuery('#append_new_button').html('');
jQuery('select').each(function(){
var select_value = jQuery(this).val();
var select_label = jQuery("#"+jQuery(this).attr('id')+" option[value='"+select_value+"']"). text();
if(select_value != ''){
jQuery('#append_new_button').append('<input type="button" id="'+select_value+'" value="'+select_label+'"></button>')
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="make">
<label>Make</label>
<select name="make" id="makelist">
<option value="">Select Make</option>
<option value="make_1">Make 1</option>
<option value="make_2">Make 2</option>
</select>
</div>
<div id="model">
<label>Model</label>
<select name="model" id="modellist" >
<option value="">Select Model</option>
<option value="model_1">Model 1</option>
<option value="model_2">Model 2</option>
</select>
</div>
<div id="year">
<label>Year</label>
<select name="year" id="yearlist" >
<option value="">Select Year</option>
<option value="year_1">year 1</option>
<option value="year_2">year 2</option>
</select>
</div>
<button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>
<div id="append_new_button">
</div>
I updated that code to find the values for each drop down
function dropdownbutton(val){
var make = document.getElementById("makelist");
var answer = make.options[make.selectedIndex].value;
var model = document.getElementById("modellist");
var answer2 = model.options[model.selectedIndex].value;
var year = document.getElementById("yearlist");
var answer3 = year.options[year.selectedIndex].value;
alert(answer2);
}
Now i need to figure out how to pass these variables to a link for example, mydomain.com/answer/answer2/answer3
i think that this code is more dynamic.
$("button").click(function() { // if button is clicked
var arr = $('select').map(function() { // run through all selects and get value
return this.value
}).get();
var url = "http://exp.com"; // base for the url
arr.forEach(function(item) {
url = url + '/' + item; // append all options to the base url
});
window.location.href(url); // redirect to base url + all options
});
Don't forget to add value to your options. <option value="1">1</option>
Please look at jsfiddle for a working example

How to get the values from the drop down list using php?

<select name='car1'>
<option value='1'>Toyota</option>
<option value='2'>Honda</option>
<option value='3'>Ford</option>
</select>
<input type='submit' name='submitform' />
if(isset($_POST['submitform'])){
$Getvalue = $_POST['car1'];
echo $Getvalue;
}
How do I get the values (Toyota, Honda, and Ford) not the numbers
In POST you receive only submitted value, so you should use
<option value="Toyota">Toyota</option>
Use it.
<select name='car1'>
<option value='Toyota'>Toyota</option>
<option value='Honda'>Honda</option>
<option value='Ford'>Ford</option>
</select>
Alternatively, if you could, you could use jquery in this one. You need another container for that 'Name'. Consider this example:
<?php
if(isset($_POST['car1'])) {
$id = $_POST['car1'];
$name = $_POST['selected'];
echo $name;
}
?>
<form method="POST" action="">
<input type="hidden" name="selected" value="" />
<select name='car1'>
<option value='1'>Toyota</option>
<option value='2'>Honda</option>
<option value='3'>Ford</option>
</select>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('select[name="car1"]').change(function(){
// as you select your pick,
// this will append the name inside the hidden input
var selected = $(this).val();
var value = $('select[name="car1"] option[value="'+selected+'"]').text();
$(this).prev('input[name="selected"]').attr('value', value);
$('form').submit();
});
});
</script>
Sample Fiddle
Only option values will be send in $_POST. If you don't need values in numbers, replace them with text values.
<select name='car1'>
<option value='Toyota'>Toyota</option>
<option value='Honda'>Honda</option>
<option value='Ford'>Ford</option>
</select>
Web-browser send to web-server post line like "car1=1&submitform=". Php script does not known about what inside options. Change values to:
<select name='car1'>
<option value='Toyota'>Toyota</option>
<option value='Honda'>Honda</option>
<option value='Ford'>Ford</option>
</select>

How to prevent the set of a get variable?

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>

Dynamically generate a single new drop down menu in a html form

I have a html form defined . I have a button for the user to select his occupation . If his occupation happens to be a student then i need to generate another new button dynamically . If the user selects anything other than a student then i dont want any new button . I am unsure how to do . Do i use jquery ? I have no idea to use jquery . Can some one help ? Any pointers
Thanks.
<?php
?>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});
</script>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<form>
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
</form>
</body>
</html>
Personally I accomplish this by placing the additional form element in the HTML, simply hidden like so:
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
Then you can use JS, as I prefer jQuery, to show the div or hide the div when applicable:
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});
Using jQuery would simplify this:
Let's say you have the following:
<form>
<select name="occupation">
<option value="Non-Student">Non-Student</option>
<option value="Student">Student</option>
</select>
</form>
Then the following would be used to append the button if the user selected 'Student':
$(function(){
$('select[name="occupation"]').change(function(){
var val = $(this).val();
if(val=='Student'){
$('form').append('<button>New Button</button>');
}
});
});

Categories