Search jQuery

jQuery Forum

Using jQuery

pete1

Update a form input value after ajax call

in Using jQuery • 8 years ago

I have an input field on a for that has an initial value set as follows

I want to change this value after a ajax call on the change of another field e.g.

$('#BU').change(function(){ $('# ZTotalDate ').load('Fetchmaxdate.asp?buid=' + $('#BU').val()); });

but this fails to change anything. I tried

$.get('Fetchmaxdate.asp?buid=' + $('#BU').val(), function(data){ $('#ZTotalDate').val(data); });

but for some reason, this doesn't pass the #BU value to the call.

What am I doing wrong?

Regards

Pete

Replies(7)

dsvick

Re: Update a form input value after ajax call

8 years ago

In the first one you posted you have a space in the selector between the # and the Z

$('# ZTotalDate ').load(..

And you can't use load on a text input, load changes the html of an element, you need to change the value. So $.get or $.post is your best bet.

Other than that there doesn't appear to be anything wrong with the code you've posted. Have you watched in a debugger to make sure the correct values are being passed and that you're getting a valid response and not an error?

Is there more than just the code you posted?

Dave

pete1

Re: Update a form input value after ajax call

8 years ago

Dave,

Here's the full code;

$('#BU').change(function(){

$('#Department1').load('Fetchdepartments.asp?buid=' + $('#BU').val());

$('#POPay1').load('FetchPOs.asp?buid=' + $('#BU').val());

$.post('Fetchmaxdate.asp?buid=' + $('#BU').val(), function(data){

$('#ZTotalDate').val(data);

});

The first 2 work fine, the third one is what I'm trying to change.

Using Chrome tools, it shows the call the fetchmaxdate.asp?buid=NULL

I've now tried get and post but they do the same

Regards

Pete

dsvick

Re: Update a form input value after ajax call

8 years ago

A couple of things, can you post the relevant markup? It would help to see what the jQuery is working with.

First, you have some missmatched braces, you never close the success handler of the post().

Are either of the first two statements changing, or removing, the BU element? Meaning, is BU a child of either the Department1 or POPay1 elements? If so then you'll need to hold the value of BU in a variable before you make the call that changes it. Or, it could be that, since you're using post, the server is expecting the value that way instead of in the query string.

$('#BU').change(function(){
var buVal = $('#BU').val();
$ ('#Department1').load('Fetchdepartments.asp?buid=' + buVal );
$('#POPay1').load('FetchPOs.asp?buid=' + buVal );
$.post(
'Fetchmaxdate.asp',
{buid: buVal },
function(data){
$('#ZTotalDate').val(data);
}
});
});

Dave

pete1

Re: Update a form input value after ajax call

8 years ago

Here is a section of the markup. The #BU is not a child of the other two, they work fine.

The markup is quite complex using several Jquery Templates, but as I say the first two calls work fine

I will try the solution above and let you know.

<form role="form" action="pO.asp" method="post">
	<fieldset>

	<!-- Form Name -->
	<legend>Enter Sales Data</legend>
	<div class="row">
	<!-- Business Unit -->
	<div class="col col-lg-4 col-md-4">
	<div class="form-group">
	<label class="control-label" for="BU">Business Unit</label>
	<select id="BU" name="BU" class="combobox form-control">
	<option value='5'>b Market</option>
	<option value='18'>c Town</option>
	<option value='11'>c Garden</option>
	<option value='19'>Duck-n-Roll</option>
	<option value='13'>eCommerce Sales</option>
	<option value='14'>External Events</option>
	<option value='15' Selected >g Market</option>
	<option value='21'>h Office</option>
	<option value='22'>Warehouse</option>

	</select>
	</div>
	</div>

	<!-- Date -->
	<div class="col col-lg-3 col-lg-offset-2 col-md-4">
	<div class="form-group">
	<label class="control-label" for="ZTotalDate">Takings Date</label>
	<input id="ZTotalDate" name="ZTotalDate" type="date" class="form-control" value="2014-09-22">
	</div>
	</div>

	</div>
	<script type="text/template" id="departmentTemplate">
	<div class="department" id="department{{ID}}">
	<div class="row">
	<!-- Till Category -->
	<div class="col col-lg-6 col-md-6">
	<div class="form-group">
	<label class="control-label" for="Department{{ID}}">Department{{ID}}</label>
	<select id="Department{{ID}}" name="Department[]" class="form-control">
	<option value='61'>01 - r Non-Vat</option>
	<option value='67'>02 - d VAT</option>
	<option value='60'>03 - f In VAT</option>
	<option value='68'>04 - p VAT</option>
	<option value='111'>a Retail</option>
	<option value='113'>e</option>
	<option value='108'>f</option>
	<option value='112'>f Retail</option>
	<option value='115'>Misc NonVAT</option>
	<option value='114'>Misc VAT</option>
	<option value='110'>o Alcohol</option>
	<option value='107'>p</option>
	<option value='109'>s Drinks</option>

	</select>
	</div>
	</div>
	<!-- helpful addition-->
	<div class="col col-lg-2 col-md-2 col-sm-2 col-xs-2">
	<!-- Text input-->
	<div class="form-group">
	<label class="control-label" for="Takings{{ID}}">Takings{{ID}}</label>
	<input id="Takings{{ID}}" name="Takings[]" type="number" class="form-control" value="0">
	</div>
	</div>
	<div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1">
	<!-- Text input-->
	<div class="form-group">
	<label class="control-label" for="another">New{{ID}}</label>
	<button type="button" name="another{{ID}}" class="btn btn-info btn-sm form-control departclone">+</button>
	</div>
	</div>
	</div>
	</div>
	</script>

dsvick

Re: Update a form input value after ajax call

8 years ago

I don't see anything wrong with the code or the markup. On the network tab in the debugger it is showing no value being sent for the buid? Did you try the method I posted above?

Dave

pete1

Re: Update a form input value after ajax call

8 years ago

I had the change the code to get from post, and the tools show the parameter being passed, But the date field looses it's value and shows the dd/mm/yyyy placeholder

Still scratching my head!

Pete

pete1

Re: Update a form input value after ajax call

8 years ago

It works!

Your code worked fine, and got me trying other things. The I realised that a Input Type Date needs a particular format, tried a few tests and formatted the date as yyy-mm-dd and it worked.

Thanks for your help

Pete

Top Reply

Response title

Attachments

jQuery Forum

Update a form input value after ajax call

Replies(7)

Re: Update a form input value after ajax call

Re: Update a form input value after ajax call

Re: Update a form input value after ajax call

Re: Update a form input value after ajax call

Re: Update a form input value after ajax call

Re: Update a form input value after ajax call

Re: Update a form input value after ajax call

Statistics

Tags

Actions

Related Posts