Help - Post Dynamic Data

Overview:

I got a website that has sentences that people can post to facebook, but in each sentence there are input boxes, which people can change the default value. Kinda like an digital "Mad Lib".

EXAMPLE

I like __ and I think he is __.

• the underscores would be a text-field with a default value that would disappear once someone focuses on it.

Final string: I like JEN and I think she is HOT.

GOAL

Save final String and Post to Facebook (not worried about the facebook yet)

HTML

<span>I like</span>
<input name="post1_1" value="Tom" type="text" id="post1_1" />
<span>I think she is</span><input name="pos开发者_开发百科t1_2" value="Nice" type="text" id="post1_2" />

<a href="javascript:Post1()">POST NOW</a>

<span>My website is</span>
<input name="post2_1" value="Great" type="text" id="post2_1" />

<a href="javascript:Post2()">POST NOW</a>

SCRIPT

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

<script>
var post1_1 = null;
var post1_2 = null;
var post2_1 = null;

function Post1(){
var post1_1 = $('#post1_1').val();
var post1_2 = $('#post1_2').val();
var post1 = 'I like ' + post1_1 + ' I think she is ' + post1_2;
alert(post1);
}

function Post2(){
var post2_1 = $('#post2_1').val();
var post2 = 'My website is ' + post2_1;
alert(post2);
}

</script>

I am very new to web any help would be appreciated.

---

At a quick glance, there are a few things wrong with your script.

post1_1 = ('#post1_1').val();
post2_1 = ('#post2_1').val();
post2_2 = ('#post2_2').val();

I'm assuming you're using jQuery here. You need the $ in front of the ().

post1_1 = $('#post1_1').val();
post2_1 = $('#post2_1').val();
post2_2 = $('#post2_2').val();

Second, you set these after you set the post variables.

var post1 = 'Your are' + post1_1;
var post2 = 'You smell like' + post2_1 + 'and' + post2_2;

This will be "Your are null" (which, i'm assuming should be "You are"). You should set the variables to the input values before you use them.

var post1_1 = $('#post1_1').val();
var post2_1 = $('#post2_1').val();
var post2_2 = $('#post2_2').val();

var post1 = 'Your are' + post1_1;
var post2 = 'You smell like' + post2_1 + 'and' + post2_2;

alert(post1);
alert(post2);

I know this is just an example, but there is no post2_2 in your HTML, and the sentences in the HTML don't match those in the JavaScript.

---

I think you should consider only the two text fields and an ID of the current sentence. Like sentence_id[], field1[], field2[]. You can treat it as array:

<form action="javascript:;">

    <div id="sentence-0">
        <input type="hidden" name="sentence_id[0]" value="1" />

        John is at <input type="text" name="field1[0]" /> with <input type="text" name="field2[0]" />

        <button id="submit-sentence-0" class="submit">Send</button>
    </div>


    <div id="sentence-1">
        <input type="hidden" name="sentence_id[1]" value="2" />

        Mary is at <input type="text" name="field1[1]" /> working with <input type="text" name="field2[1]" />

        <button id="submit-sentence-1" class="submit">Send</button>
    </div>

</form>

Just an idea, hope it helps you.

---

I can think of many ways as to how this could be implemented, but the way this question is worded leaves a lot of ambiguity to what one exactly wants.

Consider the following:

Pre-generated statements such as: I like X and I think he is Y.

Where X and Y could be a dropdown or textbox control of choices.

I believe one said something like a textbox, so an html form would be appropriate.

Static example (to be handled by php/django/rails/etc):

<form action="/status/" method="post">
  I like <input type="text" name="noun" />
  and I think he is <input type="text" name="verb" />
  <input type="submit" value="Update" />
</form>

Now modify this to fit the server side language to handle the request.

Now for a Javascript example (I'm not very good with js):

<form name="status" action="handle-data.js">
  I like <input type="text" name="noun" />
  and I think he is <input type="text" name="verb" />
  <a href="javascript: submitform()">Update</a>
</form>

<script type="text/javascript">
  function submitform(){
    document.status.submit();
  }
</script>

In the handle-data.js one would likely manipulate the data or whatnot.

See http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

for more Javascript examples.