Develop Reference

Sending "this" radio button element parameter to function in Google Apps script

I have a custom sidebar generated via Apps Script on a Google Sheet.
The custom sidebar html contains a form and fieldset with 5 radio input elements, all with onchange events:
google.script.run.viewOptionsFormRadioChange(this);
Here's the full form HTML:
<form id="viewOptionsForm">
<fieldset class="viewOptionsFieldset">
<input type="radio" id="all" name="viewOptionsRadio" value="All" checked="checked" onchange='google.script.run.viewOptionsFormRadioChange(this);' >
<label for="all">All</label><br>
<input type="radio" id="firstImport" name="viewOptionsRadio" value="First Import" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
<label for="firstImport">First Import</label><br>
<input type="radio" id="secondImport" name="viewOptionsRadio" value="Second Import" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
<label for="secondImport">Second Import</label><br>
<input type="radio" id="compositionLinking" name="viewOptionsRadio" value="Composition Linking" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
<label for="compositionLinking">Composition Linking</label><br>
<input type="radio" id="underTheHood" name="viewOptionsRadio" value="Under the Hood" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
<label for="underTheHood">Under the Hood</label>
</fieldset>
</form>
I then have a function "viewOptionsFormRadioChange":
function viewOptionsFormRadioChange(checkbox) {
if(checkbox.checked == true){
if(checkbox.attr('id') == "underTheHood") {
SpreadsheetApp.getActive().toast("underTheHood Selected", "Title", 15);
}
}
}
I'm trying to get it so the toast notification appears when I select the Under the Hood radio button, however the "this" element parameter doesn't appear to be coming through as parameter variable: checkbox since the above doesn't work.
Any ideas where I'm going wrong?
Thanks either way

I think that in your script, how about modifying this to this.value or this.id? It seems that in this case, this cannot be parsed. So, when your script is modified, how about the following modification?
Modified script:
In this modification, your HTML is modified.
<form id="viewOptionsForm">
<fieldset class="viewOptionsFieldset">
<input type="radio" id="all" name="viewOptionsRadio" value="All" checked="checked" onchange='google.script.run.viewOptionsFormRadioChange(this.value);' >
<label for="all">All</label><br>
<input type="radio" id="firstImport" name="viewOptionsRadio" value="First Import" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
<label for="firstImport">First Import</label><br>
<input type="radio" id="secondImport" name="viewOptionsRadio" value="Second Import" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
<label for="secondImport">Second Import</label><br>
<input type="radio" id="compositionLinking" name="viewOptionsRadio" value="Composition Linking" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
<label for="compositionLinking">Composition Linking</label><br>
<input type="radio" id="underTheHood" name="viewOptionsRadio" value="Under the Hood" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
<label for="underTheHood">Under the Hood</label>
</fieldset>
</form>
But, in this case, the returned value is the string value like First Import, Second Import,,,. So, your Google Apps Script might be required to be modified as follows.
function viewOptionsFormRadioChange(checkbox) {
if(checkbox == "Under the Hood") {
SpreadsheetApp.getActive().toast("underTheHood Selected", "Title", 15);
}
}
By this modification, when you check "Under the Hood", toast() is run.
Note:
If you want to use the value of id, please moidify this.value to this.id. By this, you can use the value of ID in your HTML tag. It's like if(checkbox == "underTheHood") {,,,} instead of if(checkbox == "Under the Hood") {,,,}.

Can't pass extra form data with radio button data to php via ajax

I have a simple form I have a radio button and 2 hidden fields. I want to pass the radio button value and the hidden fields value via ajax to a php page. The radio button value passes fine but not the hidden fields do not. I have hard coded the the values for table and id in the php page to make sure the value of the radio button is being passed for testing.
<input type="radio" name="contract" value="0" class="custom-switch-input">
<input type="radio" name="contract" value="1" class="custom-switch-input">
<input type="radio" name="contract" value="2" class="custom-switch-input">
<input type="hidden" name="table" value="timber_sales">
<input type="hidden" name="id" value="177">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var contract = $(this).val();
$.ajax({
url:"edit_do.php",
method:"POST",
data:{contract:contract,id:id,table:table},
});
});
});

You're setting the value of contract in your event listener, but not id or table.
To get this to work, the way you currently have it, you'll need to search the dom for the value of your hidden fields as well.
var contract = $(this).val();
var id = $('input[name="id"]').val();
var table = $('input[name="table"]').val();

You need to get the values from the hidden fields first. Just like you did with $(this).val() for the value of the radio button. So:
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var contract = $(this).val();
var id = $('input[name=id]').val();
var table = $('input[name=table]').val();
$.ajax({
url:"edit_do.php",
method:"POST",
data:{
contract: contract,
id:id,
table:table
},
});
});
});
It is probably better to give the hidden fields an unique ID attribute and get them through $('#myuniqueid').val(), but at least the above work as long as you don't have any other fields named ID or table.

Your jquery event does not know about hidden fields. Try this:
<form id="form1">
<input type="radio" name="contract" value="0" class="custom-switch-input">
<input type="radio" name="contract" value="1" class="custom-switch-input">
<input type="radio" name="contract" value="2" class="custom-switch-input">
<input type="hidden" name="table" value="timber_sales">
<input type="hidden" name="id" value="177">
</form>
<form id="form2">
<input type="radio" name="contract" value="0" class="custom-switch-input">
<input type="radio" name="contract" value="1" class="custom-switch-input">
<input type="radio" name="contract" value="2" class="custom-switch-input">
<input type="hidden" name="table" value="timber_sales">
<input type="hidden" name="id" value="177">
</form>
$(document).ready(function(){
$('form').change(function(){
event.preventDefault();
var send = $(this).data();
$.ajax({
url:"edit_do.php",
method:"POST",
data:send,
});
});
});

Change field value before submit

I want to convert the text from the textarea of form with js markdown converter before post
Now I have this code:
var message_textarea = $("#message_text");
...
$('#message-form').submit(function()
{
message_textarea.val(converter.makeHtml(message_textarea.val()));
})
It works, but I would like to change it so that the form isn't display changes in the text box before sending.
How can I do it?

Add a new input of hidden type to your form :
<input type='hidden' id='hidden_message_text' />
Then on submit fill it with converted data :
var hidden_message_textarea = $("#hidden_message_text");
hidden_message_textarea.val(converter.makeHtml(message_textarea.val()));
Hope this helps.

Changing the content of a textarea will display it on the DOM. You could try to use a separate hidden textarea. Meaning the displayed area contains the normal text and the hidden area contains the markdown.
You also could try to serialize the form, change the content and submit it using ajax all inside the submit event.

You can avoid Form submission and send data to server via AJAX call.
Here is example from Jquery docs
<pre>
<form>
<div><input type="text" name="a" value="1" id="a"></div>
<div><input type="text" name="b" value="2" id="b"></div>
<div><input type="hidden" name="c" value="3" id="c"></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f">
</div>
<div>
<input type="submit" name="g" value="Submit" id="g">
</div>
</form>
<script>
$( "form" ).submit(function( event ) {
var data = $( this ).serializeArray() ;
event.preventDefault();
$.ajax({
type: "POST",
url: '--some-url--',
data: data,
success: function(){/* callback*/}
});
});
</script>
</pre>

How to select a radio input on ajax callback

I'm going to make a auto complete form. In which the options of the form like address, telephone, fax and department are auto select after a username is selected by a drop down (auto suggest) list.
The whole process is completed. But only one thing - the radio button. I don't have any idea how to make it selected from a value return by ajax. Here is my code.
HTML
<form id="inst_name">
Address : <textarea name="addr" id="addr"></textarea>
Telephone : <input type="text" name="tel" id="tel" />
Department :
<input type="radio" name="dep" id="dep1" value="1" /><label>Dep 1</label>
<input type="radio" name="dep" id="dep2" value="2" /><label>Dep 2</label>
<input type="radio" name="dep" id="dep3" value="3" /><label>Dep 3</label>
</form>
Javascript
$('#inst_name').blur(function(){
$.ajax({
url: 'inc/autoform.json.php',
dataType:'json',
data: {name:$('#inst_name').val()},
success: function(data){
$('#inst_addr').val(data.addr);
$('#inst_tel').val(data.tel);
$('#hidden_dep').val(data.dep);
}
});
});
For example, if an ajax returned data.dep="1" so the Dep 1 should be selected.

You can simply loop through them then check the one that matches the value.
$("[name=dep]").each(function(i,v){
var dep2 = $(this).val();
if(data.dep == dep2) $(this).prop("checked",true);
});

By calling val() in the success callback, you are simply assigning a value to the element.
You would want to manipulate the checked attribute of the element in the callback.
$('#inst_addr, #inst_tel, #hidden_dep').prop("checked",true);

$("#inst_name input[value="+data.dep+"]").prop("checked", true);
EDIT to add the explanation:
The radio inputs all share the same name but they are different html elements, therefore you need to select the input whose value matches the one you received and check it.
To select the radio button whose value is the one you're looking for you use this code:
$("#inst_name input[value="+data.dep+"]")
and then you just check it with this code:
.prop("checked", true);

by selecting nth radio
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="inst_name">
<input type="radio" name="dep" value="1" /><label>Dep 1</label>
<input type="radio" name="dep" value="2" /><label>Dep 2</label>
<input type="radio" name="dep" value="3" /><label>Dep 3</label>
</div>
<script>
var n = 0;
$($('#inst_name input:radio')[n]).prop('checked', true);
</script>
</body>
</html>

How to send an HTML array trought AJAX

I have these checkboxes :
<input type="checkbox" name="style[]" value="1" checked="checked" />
<input type="checkbox" name="style[]" value="2" />
<input type="checkbox" name="style[]" value="3" checked="checked" />
<input type="checkbox" name="style[]" value="4" checked="checked" />
<input type="checkbox" name="style[]" value="5" />
and this jquery handler :
<script type="text/javascript">
$(document).ready(function() {
$('.linkStyle').click(function(e) {
//
});
});
</script>
so, when I click on a checkbox, I'd like to send the array style[] to the server trought AJAX (with the actual values).
How can I do it?
EDIT
Tried :
$.post("list/browse_ajax.php", {id:"browseUpdate", actualArtist:browseArtist, actualEvent:browseEvent, actualData:browseData, style:$('#browseTableStyle:checkbox').serialize()},
function(data) {
$("#browseList").html(data);
}
);
but the style[] is not send...
EDIT 2 - Problem with serialize
This is the whole code :
<form id="browseForm">
<div class="wideinfo">
<div class="content">
<div class="tableList1">
Style
</div>
<div class="tableList2">
<span><input type="checkbox" name="style[]" value="Style1" checked="checked" /> Style1</span>
<span><input type="checkbox" name="style[]" value="Style2" /> Style2</span>
<span><input type="checkbox" name="style[]" value="Style3" checked="checked" /> Style3</span>
<span><input type="checkbox" name="style[]" value="Style4" checked="checked" /> Style4</span>
<span><input type="checkbox" name="style[]" value="Style2" /> Style5</span>
</div>
</div>
</div>
</form>
but with :
style:$('#browseForm').serialize()
it sends this (checked on Fiddler)
style: style%5B%5D=Style1&style%5B%5D=Style3&style%5B%5D=Style4
not :
style[]: Style1
style[]: Style3
style[]: Style4
The last is a real/comprensive HTML array...

What about :
$.post('my-url', $(':checkbox').serialize(), function(data, textStatus, jqXHR){
// my callback body
});
EDIT: Actually the serialize function only works on form (and thus serialize form fields). So you have to wrap your fields in a form. See bellow.

When you finnaly have your string submitted style%5B%5D=Style1&style%5B%5D=Style3&style%5B%5D=Style4 you can retrieve the comprehensive array like that:
parse_str($_POST['style'], $data);
The the $data variable contains:
array(
"style" => array(
0 => "Style1",
1 => "Style3",
2 => "Style4",
)
)
Does it solve your problem ?

First, your callback does not seem to be consistent :
function(data) {
$("#browseList").html(msg);
}
You might want to say :
function(data) {
$("#browseList").html(data);
}
Also have you check firebug or your explorer javascript debuger to see if there is any error. Also can you show us the actual submited data. Finnaly what is the result of a call to :
$(':checkbox').serialize()

Yes, this should work.
style:$('#browseForm').serialize()
At the end I strongly advise you to inclue all your post data in the form so that you can simply do:
$.post('my-url', $('form').serialize(), function(data){
$("#browseList").html(data);
});
It is cleaner, straightforward and easier to maintain. After that your PHP script should handle the rest.