We Keep Coding

How to duplicate form field text input in another field simulaneously

Essentially what I'm trying to achieve here is a client brief form, where our company manager can type in the clients name at the top in the quick glance section, and then it's replicated below under the client details section. Ideally i'd like it to replicate it out as he's typing.
I had a look at this discussion, and unfortunately it hasn't helped me. Then again it might be because my Jquery scripting is very poor.
So input in #client_name replicated in #client_name_output in real time is what I'm trying to achieve :)
Any help will be appreciated!
<fieldset>
<legend><span class="number">1</span>At A Glance</legend>
<label for="name">Manager</label>
<select id="manager" name="manager">
<optgroup id="OTA" label="OTA">
<option id="vernon_penny">Vernon Penny</option>
<option id="nick_heygate">Glenn Collie</option>
<option id="nick_heygate">Nick Heygate</option>
</optgroup>
</select>
<input type="text" id="client_name" name="client" placeholder="Client">
<input type="text" id="project_name" name="project_name" placeholder="Project Name">
<label for="date">Deadline</label>
<input type="date" id="date" name="date">
</fieldset>
<fieldset>
<legend><span class="number">2</span>Client Info</legend>
<p id="client_name_output"></p>
<input type="url" id="website" name="client_website" placeholder="Website">
<textarea id="bio" name="client_bio" placeholder="bio"></textarea>
</fieldset>
<button type="submit" class="large btn">Send</button>

I'm not quite sure what you want.The ideas is, you need to capture the #client_name value then assign it value into #client_name_output. Try this code, hopes it help:
$(document).ready(function(){
$('#client_name').on('keyup',function(){
var c_val = $(this).val();
$('#client_name_output').text(c_val);
});
});

$(function() {
$('#client_name').on('keyup', function() {
var text = $(this).val();
$('#client_name_output').text(text);
});
});
Would be the simplest way.
https://jsfiddle.net/jsj7nh6f/2/

You can use JQuery to check if there is a keyup on the input. If so, just update the client_name_output.
$(document).ready(function() {
$('#client_name').keyup(function () {
$('#client_name_output').text($(this).val());
});
});
The document.ready makes sure you wait till the DOM is being loaded before you bind a function on a non-existing id.
Make sure you have a reference to the jquery code in your html.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

Update Div Hidden Field on jQuery Sortable Drag and Drop Update

I am using an HTML5 jQuery Sortable library. Not jQuery UI Sortable but this one here http://farhadi.ir/projects/html5sortable/
I have used it on many projects in the past and generally I use AJAX to save the sort order as a string of ID's into a database field.
On my current project, I need to do things completely different though. I am not using AJAX to save the order this time.
Basically I have the Sortable library running on a Form edit screen which will have a list of DIV's, inside these div's will be form fields. At the bottom of the page is a save button that submits the form to save all the data on the page. So I would like to instead store the sort order of each DIV into a hidden form field for each item.
I have set up a demo to work with on CodePen.io here http://codepen.io/jasondavis/pen/ztirw?editors=101
I could use some help to update a Form filed under each Div to update the fields with the Sort order each time a Drop occurs. So instead of saving a string of ID's in the correct sorted order, I would instead like to update every record on a Drop event into a Form filed with the current sort position.
Any help please?
The demo HTML structure looks like this...
<div id="project_tasks" class="tasks_block sortable">
<div id="task_13" class="task_row">
<span class="handle"></span>
<input name="taskid_13" id="taskid_13" size="15" type="text" value="taskID 1">
<input name="projectid_13" id="projectid_13" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="1">
<br style="clear:both;">
</div>
<div id="task_14" class="task_row">
<span class="handle"></span>
<input name="taskid_14" id="taskid_14" size="15" type="text" value="taskID 2">
<input name="projectid_14" id="projectid_14" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="2">
<br style="clear:both;">
</div>
<div id="task_15" class="task_row">
<span class="handle"></span>
<input name="taskid_15" id="taskid_15" size="15" type="text" value="taskID 3">
<input name="projectid_15" id="projectid_15" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="3">
<br style="clear:both;">
</div>
<div id="task_15" class="task_row taskheading">
<span class="handle"></span>
<h2>List Heading 1</h2>
Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="4">
<br style="clear:both;">
</div>
<div id="task_16" class="task_row">
<span class="handle"></span>
<input name="taskid_16" id="taskid_16" size="15" type="text" value="taskID 4">
<input name="projectid_16" id="projectid_16" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="5">
<br style="clear:both;">
</div>
</div>
A little JavaScript to start things off...
$( document ).ready(function() {
$('#project_tasks').sortable({
handle: '.handle',
onStartDrag: function() {},
onEndDrag: function() {},
onChangeOrder: function() {}
}).bind('sortupdate', function() {
$('.sortable div').each(function() {
// Update a HIDDEN Field under each DIV with the current sort order
// So when my Form is submitted/saved, it can save the sort order for
// each record into the database.
});
});
});

Ok - here you go:
http://codepen.io/anon/pen/IEKvA
$('.sortable div').each(function(idx) {
var inputField = $(this).find("[id^='sort_order']");
$(inputField).val(idx);
});
The idea is to everytime and item is dropped you run thru your divs, find all the input fields that start with the id sort_order and set the index accordingly.

foreach through div

I have got some trouble about doing an loop through the following construct:
<div id="items">
<p id="test1">
<select name="1" id="1"><option>A</option><option selected>B</option></select>
<input type="text" name="to" id="to">
<input type="text" name="away" id="awy">
</p>
<p id="test2">
<select name="2" id="2"><option>A</option><option selected>B</option></select>
<input type="text" name="to" id="to">
<input type="text" name="away" id="awy">
</p>
<p id="test3">
<select name="3" id="3"><option>A</option><option selected>B</option></select>
<input type="text" name="to" id="to">
<input type="text" name="away" id="awy">
</p>
</div>
I need to run through test1, test2 and test3 and read the selected option and the values of the text-fields (select, to,away). Doing this if i got only one thing in for example test1 is no problem with query:
$('#items').children('p').each(function () {...}
But if i add the two text-fields and want to do this for each test (1-3) I have no idea...
Any idea?
Thanks!

Ids should represent unique items within a DOM. Use classes instead, like so:
<input type="text" name="to" class="to">
<input type="text" name="away" class="awy">

How about this?
$('#items').find('select option:selected, input:text').each(function(){
alert($(this).val()); //Value of each selected option and text field within the div
});

Note: First of all give the unique id for all elements.
The following code might help you.
$(‘p’).each(function(index){
this.children().get(0).val();
//now do for second and third also
}

You dont even need to do the .children part.
Try this:
$('#items > p').each(function () {
// you can then use $(this) to reference the currently iterated p element.
// such as $(this).find('input[type="text"]:first');
// or
// $(this).find('input[type="text"]:last');
});

Serialize multiple select boxes for Ajax POST

I'll use a toy example to illustrate my problem:
I have a form which gets some details about a user:
<form action="#" method="post" id="myform">
<input type="text" name="fname" />
<input type="text" name="sname" />
<input type="text" name="birthdate" />
<select name="hobbies">
<option>Programming</option>
<option>Eating cats</option>
<option>Explaining string theory to my grandmother</option>
</select>
</form>
and I'm going to send it to my server with an ajax call so I can give some kind of response without a page refresh:
$.post("myserverscript.php", $('#myform').serialize(), function(){...callback...});
This works fine.
Now, I need to take the same information about multiple users on the same page. No problem, I just add [] to my input names:
<form action="#" method="post" id="myform">
<input type="text" name="fname[]" />
<input type="text" name="sname[]" />
<input type="text" name="birthdate[]" />
<select name="hobbies[]">
<option>Programming</option>
<option>Eating cats</option>
<option>Explaining string theory to my grandmother</option>
</select>
</form>
And again, all is well with the world.
Now, I want to allow the user to pick more than one hobby each:
<form action="#" method="post" id="myform">
<input type="text" name="fname[]" />
<input type="text" name="sname[]" />
<input type="text" name="birthdate[]" />
<select name="hobbies[]" multiple>
<option>Programming</option>
<option>Eating cats</option>
<option>Explaining string theory to my grandmother</option>
</select>
</form>
and this is where things start going a little pear-shaped. When I call serialize() now, all the hobbies are put into one array - so I'm unable to say which user has which hobbies.
I've tried using [][] instead of [] but that just puts each individual item into it's own array within the hobbies array so I still lose the user->hobby link.
The only way that I can see of doing this is writing my own serialize() which groups things as I need them.
Is there a better, simpler or more elegant way of doing this?

My standard approach is to append the UserID to the input name, with an underscore between them.
So, instead of this:
<input type="text" name="fname[]" />
it would be:
<input type="text" name="fname_23423" />
Then, server-side, you split the input names on _. The first element is the input name, the second is the UserID, and you're all set.

I've had a similar problem but the way I did it was to assign each user a specific array
for example this fiddle
<form action="#" method="post" id="myform">
<input type="text" name="user1[fname]" />
<input type="text" name="user1[sname]" />
<input type="text" name="user1[birthdate]" />
<select name="user1[hobbies]" multiple>
<option>Programming</option>
<option>Eating cats</option>
<option>Explaining string theory to my grandmother</option>
</select>
Submit
</form>

how to set form value with external select value

so i am using the play framework and I'm try to create multiple submit buttons that call the one form:
So what I have is a list of strings, and i would like to create two buttons that will go back to the server and complete an event, the first is send the second is cancel. What i would like to also do is set the source value equal to what is selected in the foo select object. How would I go about doing this? Do i need to create a javascript even that is fired from the form and then get the var inside that function and then fire off the submit? Im not 100% familiar with play framework and scala, so im not sure if i can get it somehow inside this code without using a new method.
#(myList: List[String], theForm: Form[Obj])
#import helper._
#main("myVar Controller") {
<select id="foo">
</select>
<table border="1">
<tr>
#for(myVar <- myList) {
<td>#myVar
#form(routes.Application.method()) {
<div id="hiddenForm" style="visibility:hidden">
<input type="text" name="commandID" id="commandID" value="10" /> //Send Code
<input type="text" name="source" id="source" value=**"Put selected value of foo here" />**
<input type="text" name="destination" id="destination" value="#myVar" />
</div>
<input type="submit" value="Send" />
}
#form(routes.Application.method()) {
<div id="hiddenForm" style="visibility:hidden">
<input type="text" name="commandID" id="commandID" value="18" /> //Undo code
<input type="text" name="source" id="source" value=**"Put selected value of foo here" />**
<input type="text" name="destination" id="destination" value="#myVar" />
</div>
<input type="submit" value="Undo" />
}
</td>
}
</tr>
</table>
}

First of all, the html isn't valid.
You should first make sure that there aren't elements that have the same id.
You have to use javascript to change a value in your form.
I'm not familiar with scalar or playframework, but if they allow you to use jQuery, I recommend the following solution.
$("#foo").bind("change", function(){$("#source").val($("#foo").val()));});​
example:
http://jsfiddle.net/RubenJonker/a8a8p/5
If they don't allow you to use jQuery, then you should put some javascript in the onchange event of the select.
<select onchange="document.getElementById('source').value = this.value">
</select>
example:
http://jsfiddle.net/RubenJonker/a8a8p/4

Incase anyone else has this problem I used the following to solve my problem: Thanks Ruup as your code was the reason why I solved the problem
html:
<select id="foo" >
<option></option>
<option value="test">test</option>
</select>
<input type="text" value="" name="field" id="field" />​
and javascript:
$(document).ready(function() {
obj = document.getElementById("foo");
obj.onchange = function()
{
var elements = document.getElementsByName('field');
for (i=0;i<elements.length;i++)
{
elements[i].value = $('#foo').val();
}
}; });