Get form data from webdialogs?

Chris Fullmer · 7 Nov 2011, 07:19

Hopefully this is simple, but I don't know how to get form data from a webdialog. All the examples show it sending the data to some .asp file, which is not what I want. So say I have a simple list like this:

<form name="input" action="html_form_action.asp" method="get">
What kind of shirt are you wearing? <br />
Shade; 

<input type="radio" name="shade" value="dark">Dark
<input type="radio" name="shade" value="light">Light <br />
Size;
<input type="radio" name="size" value="small">Small
<input type="radio" name="size" value="medium">Medium
<input type="radio" name="size" value="large">Large <br />
<input type="submit" value="submit">
</form>

So how do I get the submit button to do something to the values so I can use them? Can I send them to a js method somehow?

tbd · 7 Nov 2011, 08:11

JavaScript Get or Set Checked Radio Value

(www.somacon.com)

EDIT - added code to parse the form (scroll down)


<form name="input" action="html_form_action.asp" method="get">
What kind of shirt are you wearing? <br />
Shade; 

<input type="radio" name="shade" value="dark">Dark
<input type="radio" name="shade" value="light">Light <br />
Size;
<input type="radio" name="size" value="small">Small
<input type="radio" name="size" value="medium">Medium
<input type="radio" name="size" value="large">Large <br />
<input type="submit" value="submit">
</form>   

<!-- added by TBD -->

<div id="output"></div>
<script type="text/javascript" charset="utf-8">
	var output = document.getElementById("output");
	var form = document.forms[0]
	var radios = form.elements

	form.onsubmit = function(){
		output.innerHTML = ""
 		for (var i in radios) {	  	
			var current = radios[i]
			if (current.hasOwnProperty("checked"))
	  		output.innerHTML += current.value + ";" + current.checked + "<br>"
		}
		return false;
	}
</script>

thomthom · 7 Nov 2011, 08:16

<input type="submit" value="submit" id="cmdSend">

( Assuming jQuery )

<span class="syntaxdefault"><br /></span><span class="syntaxkeyword">$(</span><span class="syntaxstring">'#cmdSend'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">click</span><span class="syntaxkeyword">(&nbsp;function()&nbsp;{<br />&nbsp;&nbsp;</span><span class="syntaxcomment">//&nbsp;Do&nbsp;whatever&nbsp;-&nbsp;send&nbsp;commands&nbsp;to&nbsp;Ruby&nbsp;or&nbsp;make&nbsp;a&nbsp;cake.<br />&nbsp;&nbsp;</span><span class="syntaxkeyword">return&nbsp;</span><span class="syntaxdefault">false&nbsp;</span><span class="syntaxcomment">//&nbsp;This&nbsp;blocks&nbsp;the&nbsp;event&nbsp;from&nbsp;going&nbsp;further.<br /></span><span class="syntaxkeyword">});<br />&nbsp;</span><span class="syntaxdefault"></span>

draftomatic · 7 Nov 2011, 23:56

Instead of sending delimited strings to Ruby from the address bar like this:

window.location.href = 'skp;some_action@' + var1 + "!@%!%!%$delimeter" + var2;

You can use:

WebDialog#get_element_value('element_id')

This gets the value attribute of the element with the given id. This is often the easiest way to get form data from a webdialog:

myWebDialog.add_action_callback('act_on_form_data') { |wd, params|
  field1 = wd.get_element_value('my_form_field_1')
  # Now do something with it...
}

And in JS:

$('#mySubmitButton').click(function() { window.location.href = 'skp;act_on_form_data@'; });

Also make sure to do this after DOM has loaded using $(document).ready(function() {});

thomthom · 8 Nov 2011, 07:07

Though, I don't think you can get the checked state of checkboxes or radio boxes with get_element_value ... if I remember correctly...

jolran · 8 Nov 2011, 09:59

@unknownuser said:

Though, I don't think you can get the checked state of checkboxes or radio boxes with get_element_value ... if I remember correctly...

Bummer! Was axpecting that for upcoming tests.

Anyway with some Jquery I got this to show (with get_element_value()) if a checkbox is checked.
Assuming we have a hidden <div> with id="flipxcontainer".And a checkbox with id="flipx".

function checkboxess(){
		$('#flipx').change(function(){
		
			if ($(this).checked){
				$("#flipxcontainer").val("flipxoff");
			} else{
				$("#flipxcontainer").val("flipxon");
			}
		});
	}

$(document).ready(function(){ //ONLOAD.
  checkboxess()
});

Then in the action callback(in ruby)

flipx=@my_dialog.get_element_value("flipxcontainer") 
			
			if flipx=="flipxon"
			 puts "it is checked"
				else puts " it's not checked"
			end

It's higly unsofisticated, and I would like some comments if it's not a recommended method.
I reckon this can be done with radiobuttons as well.

Is there any issues making multiples get_element_values in a single callbackmethod?

AdamB · 8 Nov 2011, 10:04

I have nothing to add other than Chris's avatar image makes me feel distinctly unwell.

thomthom · 8 Nov 2011, 10:39

Dan Rathbun · 8 Nov 2011, 10:50

Has anyone tried using:
WebDialog.post_url ??

driven · 8 Nov 2011, 10:54

Have a look at TextureResizerOptions.htm, it returns all user input on input[type=radio, checkbox or text] using 'name' and 'value' attributes and returns either TRUE/FALSE or string.
I replaced a 'text box' with a block of radio buttons for setting 'goldilocks-resolution' yesterday.
works a charm, [with a little guidance from Aerilius...]

Comment out the existing goldilocks code and drop this in to see the results, uses the existing JS unmodified.

<style type="text/css" id="style0">.goldilocks{display;none!important}</style>
        <br class="goldilocks"/>
        <input class="goldilocks" type="radio" name="method" value="goldilocks" id="method-goldilocks" />
        <label class="goldilocks" for="method-goldilocks" title="Calculates the dimensions depending on the current viewport using the plugin Goldilocks.">Goldilocks resolution;</label>
        <ul class="goldilocks">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <li class="flt-r">
            <label for="goldilocks-resolution" id="goldi-bg">low 
			<input name="goldilocks-resolution" id="goldi-1" class="num goldilocks" type="radio" value="1">
			<input name="goldilocks-resolution" id="goldi-2" class="num goldilocks" type="radio" value="2">
			<input name="goldilocks-resolution" id="goldi-3" class="num goldilocks" type="radio" value="3">
			<input name="goldilocks-resolution" id="goldi-4" class="num goldilocks" type="radio" value="4">
			<input name="goldilocks-resolution" id="goldi-5" class="num goldilocks" type="radio" value="5">
			<input name="goldilocks-resolution" id="goldi-6" class="num goldilocks" type="radio" value="6">
			<input name="goldilocks-resolution" id="goldi-7" class="num goldilocks" type="radio" value="7">
			<input name="goldilocks-resolution" id="goldi-8" class="num goldilocks" type="radio" value="8">
			  high</label>
          </li><br />

john
PS. you'll need TextureResizer and Goldilocks for it to show.

jolran · 8 Nov 2011, 11:29

So sending 1 large string object(JSON or whatever)in 1 go, to SKP ruby , is the way to go in all circumstances?
(Like texture resizer is doing). And not several get_element_values in callback.

It seams to me there are 2 ways of doing it, and that is confusing which one to choose.
I've seen topic about the subject in this forum and its not easy determin whoose right..

Get_element_value method is more straightforward and easier to understand than converting JSON.
Maybe thats why JS noobies tend to go with this method first.

@Dan

@unknownuser said:

WebDialog.post_url ??

Is it a question if someone tried it? Or do you know it will work

Dan Rathbun · 8 Nov 2011, 13:23

@jolran said:

@Dan

@unknownuser said:

WebDialog.post_url ??

Is it a question if someone tried it? Or do you know it will work

A Question.

It may need to use the standard CGI lib from a full Ruby install.

jolran · 8 Nov 2011, 15:55

Common Gateway Interface (CGI)?

@unknownuser said:

It may need to use the standard CGI lib from a full Ruby install.

Ouch. That could be a lot to ask of users.

yet another thing to get into.

Thanks for the head up anyway, Dan.

Chris Fullmer · 8 Nov 2011, 16:34

@adamb said:

I have nothing to add other than Chris's avatar image makes me feel distinctly unwell.

What about my avatar could possibly make you feel unwell?

For some unknown reason, suddenly the whole board was inundated with masks for new user icons one day, and one permanently left its mark on me. Actually I do need to redo my avatar and trim down the belly a little. I lost 50lbs recently, so it shouldn't bulge quite so much

Oh yeah, and I did finally get what I needed working. It took me a while to figure out what it was that I needed. But I did decide to use jquery. I needed a multiple select list, and when the user clicks the submit button, I've got an onclick='submit_form1' that calls my js function. Then the js function uses jquery to gather all selected values into a string and sends it to SketchUp. This works well for my mind to be able to follow the logic of it.

function submit_form1(){
  var myarr = [];
  var str = ''
  myarr = $("select option;selected");
  $("select option;selected").each(function () {
    str += $(this).text() + ",";
  });						
  alert(str);
  query = 'skp;select_scenes@' + str;
  window.location.href = query;							
}

jolran · 8 Nov 2011, 18:46

Aha! Scene manager

Glad you sorted it out

draftomatic · 9 Nov 2011, 18:44

@chris fullmer said:


>   $("select option;selected").each(function () {
>     str += $(this).text() + ",";
>   });						
>

Be careful that your options don't contain commas.

Chris Fullmer · 9 Nov 2011, 23:27

Ah, that did not cross my mind. All my "options" values are scene names. So I'll have to check if scene names can contain commas - if so, I'll have to re-think my delimiter. Thanks!

EDIT - yes, scene names can contain commas. What delimiter do I use then? I'm stumped. Do I forcibly remove commas from the user's scene names before processing? That seems like a bad idea.

thomthom · 10 Nov 2011, 07:35

@chris fullmer said:

Do I forcibly remove commas from the user's scene names before processing? That seems like a bad idea.
No, that's not good. That's making the user work for the computer instead of the computer working for the user.

How about || ?
Much more unlikely to appear in a tab.
Though, there is still a risk of it.

You could make a escape character scheme. Escape | with | - then off course you also need to escape \ with \ .

This example is all Ruby, but you can easily port it to JS.

Escape a string:

string = page.name string.gsub!('\\', '\\\\') string.gsub!('|', '\\|')

Restore it:
string.gsub!('\\\\', '\\') string.gsub!('\\|', '|')

If you do it for all input - output then you will be safe that there will never be any conflict.

TIG · 10 Nov 2011, 10:58

Could you use 'tab' as the delimiter - these are never going to appear in a Scene name ?

      $("select option;selected").each(function () {
        str += $(this).text() + "\t";
      });

Then on the Ruby side use chosen=str.split("\t") to make an array of the items ???

thomthom · 10 Nov 2011, 11:16

@tig said:

Could you use 'tab' as the delimiter - these are never going to appear in a Scene name ?

Actually they can. Paste a string containing Tab and it'll be there. Or it can be added via some Ruby script... pages[0].name = "Foo\tBar"