I've tried searching for any possible solutions to my question but none of what I've seen so far works. Anyway, I'm using MVC 3 and I have a form called Add Event. On that page, I have a dropdownlist that contains a list of locations that the user can choose from. I have a link just below that dropdownlist that would allow a user to add a new location. Now, I have the textboxes, dropdowns, etc for creating a new location in a partial view which would appear below the dropdownlist when I click on the link.
Anyway, I need to refresh, just the dropdownlist so that when I add a new Location, it goes right on the list. What happens right now is after I click on save, the partial view hides itself and I still need to refresh the entire page to get the new location on the dropdown list which would then, remove everything I typed in on texboxes and dropdownlists on the same page.
How can I do this using javascript/ajax?
With jQuery you can reload only the element you want:
$('#menu').load("myServerScript.php #menu");
http://api.jquery.com/load/
This might help you..
var opt = document.createElement("option");
// Assign text and value to Option object
opt.text = Text;
opt.value = Value;
// Add an Option object to Drop Down
document.getElementById("YourDropDownID").options.add(opt,null);
this can be done with jQuery.
My way of doing it would be like this. Assuming that you have a form that looks something like this:
<form method="post" action="#">
<select id="myList" name="myList">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<input type="text" id="newValue" name="newValue" />
add new value
<input type="submit" value="Submit">
</form>
Where myList is dropdown you want to add a new value and refresh, newValue is the text field to receive the new values to be added to the dropdown (myList) and the link with id btn is the add button. You can add a jQuery that would look something like this:
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function (event) {
event.preventDefault();
$.post("/home/addvalue", { value: $("#newValue").val() }, function (result) {
if (result != null) {
$("#myList").append("<option value='" + result.id + "' selected='selected'>" + result.text + "</option>");
}
});
});
});
</script>
What I'm is when you click on the link (btn) I collect the value (and just that value) from the text box and do POST (a form submit) to the server.
I'm guessing you're expecting the server to give some sort of answer that includes the newly inserted value's id.
If the server sends back that new id, I then append the the new result to list (and set it as the selected one)
On the server side you code could look something like this
[HttpPost]
public JsonResult AddValue(FormCollection collection)
{
//do database inser for the new value and get the id
var response = new Dictionary<string, object>();
response.Add("id", 3);//3 here represents that last id
response.Add("text", collection["value"]); //the value you sent for the new option
return Json(response);
}
you receive the the POST(ed) data and do save to the database. Once the value is saved and you have the new id save in into a dictionary that you'll then serialize and send back as json the javascript above.
This would update your form, so you when you actually hit submit myList value would be the new value.
Hope this helps (and if does, please accept the answer)
Related
I have a form when user select value from dropdown it can direct them to another page.but in the next page I want the selected value to be pass to another dropdown.
for instance: user select country; then go straight to the next page where there is a dropdown already selected the country value. then only they can do the next process...
note:(list item in the dropdown is same as the 1st)
hope anyone can help me.
thanks.
Simply you can store the first-page dropdown values in Session or Cookies. If you have less important things like country, cities, and address locations then you can simply use the Cookies to store the data.
You can use url parameter to pass the selected value from one page to another.
http://www.test.com/next_page.php?selected_value=12
Like above example you can pass the selected drop down value to another page in php.
You can use
$_GET['selected_value']
in next page to get selected value.
You have to get select value by doing onChange event via jquery.
After jquery, you need to pass that value to particular change event.
Lets say you have this select box
<select id="select1">
<option value"">Select</option>
<option value"1">A</option>
<option value"1">b</option>
<option value"1">C</option>
</select>
While if any value changes you need to navigate to that page taking that option value.
So this is how you can do it via jquery.
$("#select1").change(function(){
//alert();
var changedval = $(this).val();
var url = "pagename/countryname="+changedval;
window.location.href= url;
/* $.ajax({
url: url,
type: 'GET',
data: {'image_name': image_name, 'id' : id},
success: function (data) {
$("#profile_picture_display_outer").hide();
},
error: function (data) {
}
}); */
});
You can even get values via ajax as well or you can directly redirect to that particular url via appending current selected value.
Additional if you are using Codeigniter 3 then this is how you can mention routes in routes.php
$route['pagename/(:any)'] = 'Controller/methodname/$1';
My client has a huge list of contacts.
I created a form with a scrolling list, in order to select a contact. The issue is that the scrolling list is too long.
Is there a way (and if so, how?) for my client to start typing the first letters of a contact name, so the 'field area' (or other) fills in automatically the correspondant contact name?
Thank you in advance for your help.
Kind regards,
You can load the select with this javascript:
function updateSelect(vA)
{
var select = document.getElementById("sel1");//or whatever you select id is
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i],vA[i]);
}
}
The html select element:
<select id="sel1">
<option value="" selected></option>
</select>
I often load selects when the page loads with something like this:
$(function(){
google.script.run
.withSuccessHandler(updateSelect)
.getSelectOptions();//a gs function which passes an array to updateSelect via the success handler
});
That way I can use a spreadsheet to store the values that I want. In your case you may want to filter them alphabetically perhaps. And you might want to pass the getSelectOptioptions() function or whatever you call it a parameter to determine how to filter the list.
I have a pretty simple form I'm building out using PHP, AJAX and jQuery. The form consists of a select box of the existing people that is populated from the database. Underneath is common contact information (Address, City, Phone, etc.) When the page is loaded, the form is empty except for the select box containing the people.
The basic idea is that when the user selects a person, it should populate that person's contact info into the form. The form appears as a modal window, so I do not want the page to refresh, so I'm sending an AJAX request to the server passing the unique ID and in turn, the server responds with a JSON-encoded PHP array with that person's contact info. I am taking that information and populating the form.
All of this is working as I need except for the data that should go into select boxes (e.g. State). I am successfully retrieving the proper state value and have validated that value matches the options in the select, but I cannot get it to change the selected value in the select box.
Here are the highlights of my code:
<!-- abridged generated HTML -->
<select name="PersonID" id="PersonID">
<option value="1">Mike</option>
<option value="2">Jim</option>
<!-- etc... -->
</select>
<input type="text" id="City" />
<select name="AttState" class="selectpicker" id="AttState">
<option>State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<!--And so on... -->
</select>
<!-- etc... -->
And then the Javascript...
$(document).ready(function() {
// This will pre-select when the form is initially loaded
var selState = "TX";
$("#PersonID").on('change', function(e) {
personId = $("#PersonID").val();
$.getJSON('GetPersonInfo.php?q=' + personId, function(data) {
$.each(data, function(key, val) {
$("#City").val(val.City);
selState = val(val.State);
// Plus all of the others...
});
});
$("AttState").val(selState);
});
When the form initially loads, the State is getting preselected to Texas; however, when the person is chosen and selState changes (validated by an alert), it doesn't get set to the correct value. I have read some posts that seem to revolve around ensuring that the JavaScript code living inside of the $(document).ready(function() function, so I suspect that the AJAX call doesn't retrigger the function. I cannot figure out how to make it work.
You should placed this code $("AttState").val(selState); inside success callback of AJAX request like so :
$.getJSON('GetPersonInfo.php?q=' + personId, function(data) {
$.each(data, function(key, val) {
$("#City").val(val.City);
selState = val(val.State);
// Plus all of the others...
});
// its depend on your code whether inside .each() or not
$("#AttState").val(selState);
});
I have a html form with a dropdown list of car models and a blank frame below that. I'd like to display a url related to the selected car in the frame when the submit button is pushed. I have it working and displays the current cars value in the frame, but I don't know how to insert and have JS return a URL value.
the JS goes like this: (and it may be completely wrong as I'm new to this stuff...)
function carFormSelect (form) {
var Car = form.selCar.value;
if (Car == 'Camry'){
document.querySelector('.carSelected').innerHTML = (Car);
}
HTML like this:
<select id="selCar" name="selCar">
<option value="Camry">Camry</option>
<option value="Corolla">Corolla</option>
</select>
I'm assuming I need the URL to be placed where (Car) is. I tried putting the url in quotes but didn't work. Any help would be greatly appreciated.
Thanks!
You can do that by using a JQuery/Ajax request.
You just need to get the value when the user clicks on the Select element and send it to another page that will have a iframe with the treated with the SRC that you want (in that case the car site)
So my page has two columns. On the right column the results are displayed.
The results include all the elements. On the right column i have a and few check boxes. I am able to populate the checkboxes depending on the option selected in .
I have to click submit to get the data on the right column. I don't want AJAX. I want the page to be refreshed with the option in selected and the results to be displayed based on that. I am able to code the php part. To GET the value of the option selected in
So my code is :
<select id="theselect" onclick = "afterChange()">
<option value="0"> Select the Department </option>
<option value="11"> Department11 </option>
<option value="22"> Department22 </option>
<option value="33"> Department33 </option>
</select>
var url = location.href;
document.getElementById("mydiv").innerHTML = url;
function afterChange(){
var dept = document.getElementById("theselect").value;
if (dept && dept!= 0) {
var myline = url + "&dept=" + dept;
document.getElementById("mynewdiv").innerHTML = myline;
window.location= myline;
}
}
<p id='mydiv'> </p> <br />
<p id='mynewdiv'> </p>
<?php
if(isset($_GET['dept'])) {
$cat = $_GET['dept'];
echo "You are now searching in $cat";
//code to show content from database for that department
?>
I know that there is a better way to do this which m unaware of. So far the code works fine for the first time. I am able to get the results from the DB according to the SELECT option.
But when i change the select, it takes the entire URL again and adds the new value of SELECT to the URL, that confuses PHP.
So if my site URL is :
http://mysite.php?dept=22
After changing SELECT 2nd time, it changes to
http://mysite.php?dept=22&dept=33
I also have few checkboxes after the SELECT.
I want the results to be sorted based on the select and the checkboxes.
I know there must be an easy way to do it, but i am struggling to find it.
Please help me in understanding this concept. Thank you so very much.
With
var url = location.href;
You will always get the current url. Means on 2nd refresh the url will be http://mysite.php?dept=22 now you add your dept again:
var myline = url + "&dept=" + dept;
Which produces the error you described.
To handle this problem you have to strip the old parameter first or if you only need one parameter do something like:
var url = location.origin + location.pathname
instead of location.href for more information you can read this