So I'm new to Javascript and after searching a long time I did not find the answer I was looking for (maybe because I don't have the right terms)
So here's my script:
function changeStyle() {
var type = $('select[name=style_website]').val();
var numwebsite = $('select[name=style_website]').attr('data-numwebsite');
$.post("getstyle",{'type': type,'numwebsite': numwebsite},
function(retour){
$('.websitestyle_js').val(retour);
});
}
And here's my html:
<strong><?php echo "Modify your style";?></strong>
<select onchange="changeStyle()" style="float: right;" name="style_website" data-numwebsite="<?php echo $numwebsite;?>">
<option value="style" selected>Your style</option>
<option value="mini">Mini</option>
<option value="bmw">Bmw</option>
</select>
<form method="post" action="<?php echo base_url();?>websites/modificationStyle?numwebsite=<?php echo $numwebsite;?>">
<div class="well">
<p><strong><?php echo "Code Editor";?></strong></p>
<textarea name="websitestyle" class="websitestyle_js" id="code1"><?php echo $websitedata['websitestyle'];?></textarea>
</div>
<button type="submit" class="btn btn-success form-control m-b"><?php echo "Modify Style";?></button>
</form>
What I wanted to do is change the content of my textarea depending on the select, every time the user click on a different option it is suppose to change the textarea. The problem is that it doesn't change anything, so I was wondering if my syntax was wrong or if I was missing something.
I printed "retour" with alert() and it contains the data that I want to append to the textarea, so it doesn't come from that. And I also try to add this line:
$('.websitestyle_js').val('test');
Jut alone at the end of my html to see if it was a syntax error, but it changes the textarea.
Thank you for your answers.
EDIT1 (result of console.log as asked):
EDIT2 (what it looks like at the end for those of you who are confused):
Try workaround via jquery on change. Here is a demo that changes textarea when you change select
<strong><?php echo "Modify your style";?></strong>
<select style="float: right;" name="style_website" data-numwebsite="numwebsite">
<option value="style" selected>Your style</option>
<option value="mini">Mini</option>
<option value="bmw">Bmw</option>
</select>
<form method="post">
<div class="well">
<p><strong><?php echo "Code Editor";?></strong></p>
<textarea name="websitestyle" class="websitestyle_js" id="code1"></textarea>
</div>
<button type="submit" class="btn btn-success form-control m-b">Modify Style</button>
</form>
JS
$('select[name=style_website]').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$('.websitestyle_js').val(valueSelected);
});
Maybe this is not really that you need, but it generally answers your question "What I wanted to do is change the content of my textarea depending on the select, every time the user click on a different option it is suppose to change the textarea".
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function changeStyle() {
var type = $('select[name=style_website]').val();
var numwebsite = $('select[name=style_website]').attr('data-numwebsite');
$.post("getstyle.php",{'type': type,'numwebsite': numwebsite},
function(retour){
$('.websitestyle_js').val(retour);
});
}
</script>
<strong><?php echo "Modify your style";?></strong>
<select onchange="changeStyle()" style="float: right;" name="style_website" data-numwebsite="<?php echo $numwebsite;?>">
<option value="style" selected>Your style</option>
<option value="mini">Mini</option>
<option value="bmw">Bmw</option>
</select>
<form method="post" action="websites/modificationStyle?numwebsite=<?php echo $numwebsite;?>">
<div class="well">
<p><strong><?php echo "Code Editor";?></strong></p>
<textarea name="websitestyle" class="websitestyle_js" id="code1"><?php echo $websitedata['websitestyle'];?></textarea>
</div>
<button type="submit" class="btn btn-success form-control m-b"><?php echo "Modify Style";?></button>
</form>
Try this...It is working..
Try console logging retour, maybe you should use responseText, another option is to try html(retour) instead of val
It was CodeMirror which is what I use to have the Code style that was creating a conflict. I fixed my problem, thank you all for you anwers