populating a form from an ajax call - javascript

Im retrieving some json data from an mvc controller and I want to edit it in a form. Imhaving trouble actually populating the form with the returned data. There is only one row of data, with three properites. Ive checked the data being returned and it is there but whenever I try to set the form value to the json data value, it just falls over. My ajax call compltes ok, i get data back, but I just cant seem to put it into the form. heres the bit in my ajax call that im trying to make work
success: function (data) {
var frm = $("#frmAddDisclaimer");
if ("Disclaimer_ID" in frm.elements) {
frm.elements["Disclaimer_ID"].value = data.ID;
}
if ("Disclaimer_DisclaimerRef" in frm.elements) {
frm.elements["Disclaimer_DisclaimerRef"].value = data.DisclaimerRef;
}
if ("htmlEditorDisclaimer_source" in frm.elements) {
frm.elements["htmlEditorDisclaimer_source"].value = data.DisclaimerText;
}
ive checked the form.elements contents at runtime, and those are the correct ID's and data has corresponding data in each 'property' as well

frm is a jquery object, it has no elements property.
What you're looking for is the fom element inside it, you can expose it via square bracket notation $("#frmAddDisclaimer")[0] or just use document.querySelector
var frm = document.querySelector("#frmAddDisclaimer");

Related

Javascript Associative Array cant post via php

Iam trying to post an Javascript Object via php, but i cant get the value in PHP, iam using laravel framework.
my array,
[type: "sadf", level: "sadfasdf"]
javascript code,
var data_push = Array();
$('form').on('change', 'select, textarea, input', function(t,s){
var key = $(this).attr('id');
var value = $(this).val();
data_push[key] = value;
});
$("#submit").click(function(){
$.post("{!! URL::to('test') !!}", {
_token : tempcsrf,
req_data : data_push
},
function (resp, textStatus, jqXHR) {
alert(resp);
});
});
php code,
public function workbook_save(Request $request_data)
{
$require_data = $request_data->req_data;
print_r($require_data);
}
Tried also JSON.stringfy(data_push) ,json_decode but no luck, i cant get the Javascript object in php, donno what iam doing wrong here, pls advice.
This is what your JS does:
Creates an array
Sets up an event handler to populate the array when things change in the form
Posts the (empty) array to the server
Later on, things will change in the form and data will be put in the array.
The server knows nothing about this because you already sent its contents.
You need to change your logic so you only make the POST request when you are ready to send the data.

Simplify ajax Object

I have this function to write the inputs from a form to the database and i'm trying to simplify the data being passed by the ajax call to the php. Currently i have this function:
function writeDB(stage){
var userData = $("#cacheDB").find("input").get();
var ajaxData = []
for (var n=0;n < userData.length; n++){
item = {};
item[userData[n].id] = userData[n].value;
ajaxData.push(item);
}
$.ajax({
url: "x.php",
data: {ajaxData},
});
}
Which sends out this object:
http://url.php?ajaxData[0][pageid]=1&ajaxData[1][input1]=John&ajaxData[2][input2]=Doe
I would like to send only the original data key, like:
http://url.php?[pageid]=1&[input1]=John&[input2]=Doe
Or
http://url.php?pageid=1&input1=John&input2=Doe
Is it posible? I've tried several methods and havn't found one suitable yet.
I would try to serialize the form instead of that for loop. It basically sends all input fields from your form as a JSON object to the server.
$.post('server.php', $('#theForm').serialize())
For larger form, HTTP POST method should be prefferd, you can send complicated object.
Check this for more help: jQuery AJAX submit form
Hope its what you need.

How to get the value of an object present inside a div with id using AJAX

I have a view page where i have an object inside a div like :-
<div id="booking_id"><%#booking_id%></div>
I want to get the value of #booking_id to be passed in AJAX data params and my ajax function is like this :
<script type="text/javascript">
$(document).ready(function(){
$("#selecthotel2").change(function(){
var room = $(this).children(":selected").val();
var params = $('#booking_id').filter('#booking_id').val();
$.ajax({
url: "/rooms/assign_room",
data: {
room,
params
}
})
});
});
</script>
But i am not getting the #booking_id value to be passed to another action.
I think i am going somewhat wrong in the ajax syntax,kindly help.
change
$('#booking_id').filter('#booking_id').val();
to simply
$('#booking_id').text();
Currently your code is trying to look inside $("#booking_id") for another element with the same ID, instead of taking the value of $('#booking_id') itself.
Also since $("#booking_id") is a div and not an input, I think you need to get the contents using text(), not val().

Ajax/Jquery drop down menu, Javascript to get variable, variable is then used in PHP. Can't get it to work?

I am using Ajax/Jquery to display a dropdown menu with results from my SQL database. I'm using javascript to get a variable and then that variable is used within PHP. However it does not work.
I used Jquery .val() to get the variable from a select html tag when the user clicks the choices available.
Then, .on() to execute some php code depending on what the selected value from the dropdown box is.
My scenario is I have car classes (Sports, Hatchback) and cars available. What I am trying to do is, put the car classes in a dropdown box and then display the cars available dependent upon what the user has selected. I'm trying to do this using the above methods. (All this information is taken from a SQL database).
Has anyone got any solutions?
This is my my javascript code here:
<script>
var carid = $("#carid").val();
$("select[name='carid']").on("select",function(){$.post( "sDn.php", x, function( data ) { $( ".availablecar" ).append( data );});});
</script>
You probably want something like this
JavaScript
$("select[name='carid']").on("change", function() {
$.post(
"sDn.php",
{ carId: $("#carid").val() },
function(data) {
$(".availablecar").append(data);
}
);
});
PHP
$carId = $_POST['carId'];
You need to send the car id in the request and you probably need to bind to the change event, not select
You also need to get the car id value when the id has been changed, otherwise it will always remain the same value and never get updated when you change it
It appears to me that you are not using the carid variable anywhere. I think you mean to use carid instead of x
<script>
var carid = $("#carid").val();
$("select[name='carid']").on("select",function(){$.post( "sDn.php", carid, function( data ) { $( ".availablecar" ).append( data );});});
</script>
Also I would suggest parsing you form input if you don't already on the php side.
Try this:
$("#carid").on("change",function(e){
e.preventDefault();
var value = $(this).find("option:selected").val();
var $avaliable = $( ".availablecar" );
$.ajax({
url:'sDn.php',
type:'post',
data:{
'carid':value
},
dataType:'html',
success:function(result){
$avaliable.append( result );
}
});
});
Changed the $.post to $.ajax, passing the 'cardid' value.
Getting the selected option, on 'change'.

Change value of dynamic inputs

I have a modal window that has a lot of new dynamic elements (inputs, buttons, etc.). I want to see if a certain element(or in this case, and input) gets created and if it does, then change its value.
The scenario is that if I make an ajax request for populating data, and as the user browses the modal window I can reuse some of that data. When the input field I'm looking for gets created, I can just put the value of the ajax call I made previously.
I have tried: $("#myinput_id").val(sellerData['id']);
obviously the above wont work because the element doesn't exists, yet. I'm also trying to avoid new ajax calls for the same data :/
Any thoughts?
$( "#add").bind('click', function() {
$.ajax({
url: '/seller/get',
type: 'POST',
success: function(response) {
sellerData = jQuery.parseJSON(response);
//other code here
//this doesn't work
$("#myinput_id").val(sellerData['id']);
}
});
});
Then the above gets triggers. The input field doesn't exist yet. How can I make it "look for it" if in the future the input field gets created?
Try using .length http://api.jquery.com/length/
if($("#myinput_id").length) //There is at least one element selected
//Do something
a bit confusing question you are saying u want to populate the data and your are using POST

Categories

Resources