We Keep Coding

How to get nearest previous input checkbox with name "checkthis" using queryselector on an element?

<input name="checkthis" type="checkbox">
<span>text here</span>
<input type="text" name="checkthis">
<input type="text" name="another">
<input type="text">
<input type="checkbox">
<input type="text" id="eventTarget" oninput="findPreviousInputcheckboxCheckthis">
How to get previous input checkbox with name "checkthis" using queryselector on an element?
function findPreviousInputcheckboxCheckthis(ev) {
checkboxCheckthis = ev.target.querySelector( "input[name='checkthis']);
}
Edit: There are many more input checkboxes with name="checkthis" before and after the snippet I posted. They are nested in other element also.
I simply want the nearest previous checkbox in the html-source starting from the target, nested or not.

Based on your below comment, I have updated the answer snippet where you need to add parent div structure and then you can find the checkthis name attribute quickly. Please check below working snippet:
function findPreviousInputcheckbdfoxCheckthis(ev) {
var selectElement = document.getElementById(ev);
selectElement.querySelector('input[name="checkthis"]').style.visibility = "hidden";
}
<div id="div1">
<input name="checkthis" type="checkbox" value="previous">
<span>text here</span>
<input type="text" name="checkthis">
<input type="text" name="another">
<input type="text">
<input type="checkbox" value="next">
<input type="text" id="eventTarget" oninput="findPreviousInputcheckbdfoxCheckthis(this.parentElement.id)" placeholder="Previous checkbox">
</div>
Here, I have added div1 id and you can repeat the same by using using ID and rest the JavaScript will be same and it will find your first previous "name=checkthis" checkbox.
Hope this solution will be work for you!
Also, below is the link where I have used multiple repeat structure. Please refer it also:
https://jsfiddle.net/kairavthakar2016/3d8g49nm/96/

Set/bind input values using SPAN values

I have a working Code-pen, the calculated results are showing on next to input fields SPAN. I tried to get that calculated value from SPAN and overwrite the input fields.
<!-- Include this line of code --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtx1" /><br />
<span id="txtSpan"></span>
<input type="button" value="Appended-textBox" id="Btn3" />
and the JS
$(document).ready(function() {
$('#Btn3').click(function() {
var txtvalue = $('#txtx1').val();
$("#txtSpan").text(txtvalue);
console.log(txtvalue);
});
});
The above works I just want to other way around setting the Input with changing SPAN value.
Is there any way I can overwrite the input box with calculated SPAN values and for the final SPAN result to write to input (ID=GrandTotal),
<div>
<label class="description" for="Coconut">Coconut</label>
<input id="Coconut" name="Coconut" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/>
</div>
<div>
<label class="description" for="GrandTotal">Grand Total</label>
<input id="GrandTotal" name="GrandTotal" class="element text medium" type="text" maxlength="255" value="" readonly="true"/>
</div>
Many thanks and sorry to consume your time. many thanks in advance
https://codepen.io/dunya/pen/mojKNz

I managed to fix it by adding below line:please check the working version above pen.
$('#GrandTotal').val(parseInt($(this).html()));
when I tried the
$('#GrandTotal').val(sum);
it gave me the wrong calculation.

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.

Create dynamic div with jquery

Im trying to create a button that generates already formated divs everytime it is pushed.
The divs are composed by forms and their fields should already be filled with data that is stored in variables in javascript.
eg.
<div id="myDiv_#">
<form id="myForm">
<input type="text" id="start_date" name="start_date" value="someJavascriptVariable" />
<input type="text" id="end_date" name="end_date" value="someJavascriptVariable" />
<select name="type" id="type">
<option value="1">"someJavascriptVariable"</option>
<option value="2">"someJavascriptVariable"</option>
</select>
<input type="button" id="new_button" value="Show">
</form>
</div>
<script>
$('#button_push').click(function()
{
//creating myDiv_#
}
</script>
I was searching arround web, but never found good results :s
Im asking you help with this, maybe a guide line or a start point.
The point is, everytime user push the button, a new div is created with parameters above.
Cheers

With markup as complex as that it's probably easier if have a hidden version of it which you can clone, amend attributes of then append to the page as required.
Something like this:
<div id="container"></div>
<div style="display: none;">
<div id="myDiv_#">
<form id="myForm">
<input type="text" id="start_date" name="start_date" value="someJavascriptVariable" />
<input type="text" id="end_date" name="end_date" value="someJavascriptVariable" />
<select name="type" id="type">
<option value="1">"someJavascriptVariable"</option>
<option value="2">"someJavascriptVariable"</option>
</select>
<input type="button" id="new_button" value="Show">
</form>
</div>
</div>
$('#button_push').click(function() {
var $div = $("#myDiv_\\#").clone(true); // keep events'
$div.attr('id', '').addClass('clone'); // example of amending attributes
$("#container").append($div); // append
});
Example fiddle
You can easily replace the someJavascriptVariable strings with the specific variable relevant to that clone instance too.

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();
}
}; });