1

I'm new with javascript so hopefully what I want would work. I checked a few forums and tutorials and most of them only teaches things like 

<p>Original name: <span id="origname"></span></p>
<p>New name: <span id="newname"></span></p>

<script>
var employees = [
{ "firstName" : "John" , "lastName" : "Doe" }, 
{ "firstName" : "Anna" , "lastName" : "Smith" }, 
{ "firstName" : "Peter" , "lastName" : "Jones" }, ];

document.getElementById("origname").innerHTML=employees[0].firstName + " " + employees[0].lastName;

// Set new name
employees[0].firstName="Gilbert";
document.getElementById("newname").innerHTML=employees[0].firstName + " " + employees[0].lastName;
</script>

which is pretty understandable but I just want to do something as simple as input a text field then submit and within the same page at the bottom will show whatever the text is being inputted.

I wonder if anyone can give me a hand with this.enter image description here

the above is what I want...

EDITED

This is what I have at the moment after getting the replies from all the nice people and the script makes sense to me but somehow it's still not working though :(

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <title></title>
  <script src="jquery-1.9.1.min.js"></script>



</head>
<body>

<form action=" " method="post">
<input id="myInput" type="text"/>
<input id="myButton" type="button" value="submit"/>
<p id="myOutput"></p>
</form>
<script>
    $("#myButton").click(function() {
        var data = $("#myInput").val();
        $("#myOutput").val(data);
    });
</script>

</body>

additional question out of the blue. let's say at the moment my code is

<p id="myOutput" style="color: yellow; background: black; width: 100px;"></p>

is jquery able to change the codes? let's say if somehow I type red then the code would be

<p id="myOutput" style="color: red; background: black; width: 100px;"></p>

and if I have another input text area and input 200 then the code would be

<p id="myOutput" style="color: yellow; background: black; width: 200px;"></p> something like that....

Improve this question

3 Answers 3

Reset to default
1

Based on the picture you supplied, I would approach this using AJAX for the data submission and then jQuery to update/reflect a <div> on the page (#3 in your pic).

You might already know how to do the above but if not, I found these tutorials extremely helpful when learning AJAX and updating div's with jQuery:

Handling a form with AJAX: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Then updating a <div> on your page using the success function when AJAX is done: http://api.jquery.com/jQuery.ajax/

However, if you don't actually need to process the data...then just use JQUERY to handle all of it! Normal form, then use the below to update the DIV with the data onclick of submit. 

 <div id="output"></div>
 <script>
    $("#submit").click(function() {
         var output = $("#new_name").val();
    $("#output").text(output);
    });
 </script>

UPDATED

Thanks for posting the code. I fiddled a working solution here http://jsfiddle.net/hwGde/4/

And here is the code with the comment on the line that had the issue:

 <form action=" " method="post">
      <input id="myInput" type="text" />
      <input id="myButton" type="button" value="submit" />
      <p id="myOutput"></p>
 </form>

  <script> 
    $("#myButton").click(function () {
       var data = $("#myInput").val();
       // $("#myOutput").val(data); this should be .text instead of .val
       $("#myOutput").text(data);
    });
 </script>

Let me know how this works. And don't forget to mark it as the answer (if it works) for future users. Thanks!

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

great this makes lots sense but I don't know why somehow it didn't run at all. I did <script src="jquery-1.9.1.min.js"></script> so the jquery should run properly isn't it? I pretty much copy and pasted mecek's reply since his is the same as yours then I added <form action=" " method="post"> for the inputs and </form> right before the <script> and somehow it doesn't run
sounds like you have done it properly, I would use Firebug to view the errors that occur when you click the submit button. It will show you what the exact error is...then we can go from there!
let me edit and post whatever code I have at the moment and I do have firebug but I'm not sure how to use the function you just said "clicking the submit button and it'll show the exact error" I don't seem to see errors or I don't know where to find in firebugs :( sorry
I updated my answer to reflect the changes, see above. Let me know how it works!
works perfectly! damn >.<" just one word...sigh that's how code works haha...but this brings up another question I want to ask hopefully it wouldn't be troublesome
|
1

you can do this by, 

<input type="text" id="name2" onclick="changeName()" />  
<script>  
function changeName(){  
    document.getElementById('newname').innerHTML=document.getElementById('name2').value;  
}  
</script>
Improve this answer

Comments

1

If you use jquery to write less do more,

<input id="myInput" type="text"/>
<input id="myButton" type="button"/>
<p id="myOutput"></p>
<script>
    $("#myButton").click(function() {
        var data = $("#myInput").val();
        $("#myOutput").val(data);
    });
</script>

Additionally take a look at knockout, you can do such things easier when there are lots of situations like yours in a page.

If you use knockout

<input type="text" data-bind="value:data"></input>
<p data-bind="text:data"></p>

<script>
function AppViewModel() {
    this.data= ko.observable("");
}

ko.applyBindings(new AppViewModel());
</script>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.