Passing variables from js to php using ajax - php

Question

I have this form
<form name="main" id="main" class="form-horizontal" method="post">
<div class="form-group">
<label for="value" class="col-sm-2 control-label">Enter Value</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="value" id="value" placeholder="Enter value">
</div>
</div>
<div class="form-group">
<label for="value" class="col-sm-2 control-label">Result</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="result" id="result" placeholder="result" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button type="submit" class="btn btn-default" id="Convert" name="Convert" value="Convert">Submit</button>
</div>
</div>
</form>
and the jquery file is:
$( document ).ready(function() {
console.log("ready");
$('#main').submit(function(e){
e.preventDefault();
$.ajax({
type: "GET",
url : "index.php", //your processing page URL instead of ???
data: "&example=2",
success: function(){
alert("success");
$("#result").html("Example content");
}
});
});
});
I want to display the example content string on the #result field when the form submits. It seems simple but I have tried everything and nothing works. I get no http and console errors and the alert shows "success"

Answer 1

You are making a mistake when you are writing $("#result").html("Example content"); because it is a input not an element holder.
Change your code to
$('#result').val("Example Content");