I've been working on a script that lets a user set a setting using HTML5' <input type="range", I've got it to work and got it to show a value on my site, but the thing is that I want the user set setting to be posted as a form input $_POST['gearsdrag'].
For clearification I'm providing a JSfiddle.
http://jsfiddle.net/hqdesf70/
The input I want to be sent is
<input id="r" type="text" name="gearsdrag" value="6000" />
But what the script set's is <input id="r" type="text" name="gearsdrag" />6000</input> and that's not being sent with $_POST.So is there a way to do this or maybe with get parameters or something.I can't figure it out.
Changing the function to this will insert the value into the input and from there you can post it is that what your after?
<script>function showValue(newValue)
{
//changing the "innerHTML" to "value" is what inserts it into the text field
document.getElementById("r").value = newValue;
document.getElementById("rr").innerHTML = newValue;
}
</script>
Keisti pavarą prie: <span id="rr">0</span> / RPM
<form action="test.php" method="post">
<input type="range" min="0" max="7800" value="0" step="100" onchange="showValue(this.value)" />
<input id="r" type="text" name="gearsdrag" value=""/>
<input type="submit" value="Nustatyti" />
</form>
Related
I was wondering if it is possible to submit a form after a certain period of time (e.g. 2 minutes) even if not all the required fields are filled out, as I would like all the data entered by that fixed period of time to be submitted. Currently, although I'm using a timeout function that is javascript-based, it does not allow for the form to be submitted upon timeout as the required fields are not completed. I set all the fields to required as the autofocus function does not seem to work if it is not a required field (i.e. does not go into the next input field automatically upon pressing enter in the current field. Is there a way around this? Thanks so much for any help!
window.setTimeout(() => this.submit(), 120000)
<html>
<main>
<form>
<br><label for="response1"><b>Animals</b></label><br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus required></br>
<br><input type="text" id="response2" name="response2" autocomplete="off" autofocus required></br>
<br><input type="text" id="response3" name="response3" autocomplete="off" autofocus required></br>
<br><input type="text" id="response4" name="response4" autocomplete="off" autofocus required></br>
<button type="submit">Submit</button>
</form>
</main>
</html>
Sure, just put this logic in your function. You just remove required attribute from fields.
let form = document.querySelector('form');
let inputs = form.getElementsByTagName('input');
let i;
for (i = 0; i < inputs.length; i++) {
inputs[i].required = false;
}
there are a couple problems with your code:
you should not open and close br tags, you just put a <br> where you want the line break
the autofocus attribute should only be placed on one input, and that input will have the focus when the page loads.
depending on how you are calling your code, you might run in to problems with the this keyword, you might be better calling the form directly.
I changed those things in your code and succeeded with the following code (no need to remove the required attributes, but if they are not really needed just remove them):
window.setTimeout(() => document.forms[0].submit(), 1000)
<html>
<main>
<form>
<br>
<label for="response1">
<b>Animals</b>
</label>
<br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus required>
<br>
<input type="text" id="response2" name="response2" autocomplete="off" required>
<br>
<input type="text" id="response3" name="response3" autocomplete="off" required>
<br>
<input type="text" id="response4" name="response4" autocomplete="off" required>
<button type="submit">Submit</button>
</form>
</main>
</html>
I changed the timeout to one second just to be able to see the effect.
This question seem to be very silly! but I am looking for the best answer,
I have a input field and a hidden field. How to set the value of the input field as value of the hidden field?
<input class="class1" id="id1" name="name1" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">
Please try this
$(document).ready(function(){
$("#id1").change(function(){
$("#id1").val($("#hidden").val());
});
});
DEMO
You can use a change event handler to update the value of hidden field
//set the initial value
hidden.value = id1.value;
<input class="class1" id="id1" name="name1" value="06/30/2015" onchange="window.hidden.value=this.value" />
<input type=hidden name="hidden" id="hidden" value="I want the value of above field">
You can this by below why, i used onblur for set values from input to hidden. same why you can use different method for this.
Or if you strictly want to use javascript then add one onblur function and do code as i do with callthis() function.
$("#id1").blur(function(){
$("#hidden").val($(this).val())
console.log($("#hidden").val());
});
function callthis(inputobj)
{
document.getElementById("hidden").value = inputobj.value;
console.log(document.getElementById("hidden").value)
}
<input class="class1" id="id1" name="name1" onblur="callthis(this)" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">
I have a dummy form and the actual form in which at some point I want to copy all the input values from the dummy form across to the real form.
The dummy fields will have the same names as the real form (so I can match them up).
So in dummy form:
<input name="item1" value="field1" />
<input name="item2" value="field1" />
<input name="item3" value="field1" />
and in real form:
<input name="item1" value="" />
<input name="item2" value="" />
<input name="item3" value="" />
I assume I'll need to iterate over each input in dummy form (using jQuery .each() ?) while collecting the name and value in an JS object.
Then iterate over each input in the real form, matching the name as the selector and setting the value (perhaps this can be done in the one .each() function ???)
I've started with the following code which only grabs the values (and index) into an array, but because I need two values (name and value, and index is irrelevant) I assume I'll need an object not an array, but really not sure where to begin with that.
var inputValues = [];
$("#dummyForm input").each(function() {
inputValues.push($(this).val());
});
Any help or advice much appreciated.
Map them like
$('#DummyForm [name]').each(function() {
var name = $(this).attr('name');
$('#RealForm [name="' + name + '"]').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form id="DummyForm">
<input name="item1" value="field1" />
<input name="item2" value="field2" />
<input name="item3" value="field3" />
</form>
<form id="RealForm">
<input name="item1" value="" />
<input name="item2" value="" />
<input name="item3" value="" />
</form>
You could do something like below:
$('#dummy input').each(function(){
if($('#real input[name='+$(this).prop('name')+']').length == 1)
$('#real input[name='+$(this).prop('name')+']').val($('#dummy input[name='+$(this).prop('name')+']').val())
});
Here is my Fiddle...
I have this input:
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
and I want to get this input value in a hidden input, so I used this:
<input type="hidden" name="tag" value="tags" />
Instead of getting the true value of the first input, I only get the string "tags"! Can you please tell me how to obtain the true value of the first input in my hidden input? Thanks!
EDIT: Actually it's a submit page, the user enters tags in the #tag1 and when he clicks on submit I want to send these tags to my controller, that's why I'm using the hidden input...
My full code:
<form>
<p>
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue()"; /></p>
<script>
$('#tag1').tagsInput({
// my parameters here
});
</script>
<style>
#wrapper {
margin: 20px;
}
</style>
<p>
<input type="submit" value="Create" />
<input type="hidden" name="taggg" id="tag2" />
<script type="text/javascript">
function setValue() {
document.getElementById("tag2").value = document.getElementById("tag1").value;
}
window.onload = setValue;
</script>
</p>
</form>
I don't understand why you would want to copy the value of one input field to another (albeit, hidden). But if that is what you want to do, try using the below code.
The function attached to the onblur event of the input field would set the value of the input field to the hidden field whenever it loses focus.
The window.onload = setValue will do the same on page load.
HTML
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue();" />
<input type="hidden" name="tag" value="tags" id="tag1_hidden" /> <!-- Note the addition of an id attribute -->
JavaScript
function setValue() {
document.getElementById("tag1_hidden").value = document.getElementById("tag1").value;
}
window.onload = setValue;
Try this
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
<input type="hidden" name="tag" value="tags" id="tag2" />
Jquery:
$("#tag2").val($("#tag1").val());
or
$("#tag1").blur(function() {
$("#tag2").val($(this).val());
});
You can do like this (and you will need javascript for this).
Give a id to your hidden input also like:
<input type="hidden" id="hidden_input" name="tag" value="tags" />
and then use/paste this code when you need it:
var input_value = document.getElementById('tag1').value;
document.getElementById('hidden_input').value = input_value;
How can I submit the value of this slider to a CGI application (like you would a check box)?
Not sure if the input tag for the slider is messing something up?
<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1"
name="slider-input-1"/>
</div>
If I were you, I'd try tweaking the <input> tag's type attribute, setting it to text or hidden.
(I don't know enough about the framework/environment you're using to say for sure.)
OK got it:
<form action="/cgi-bin/Lib.exe" method=POST name="slider" ID="Form2">
<input type="hidden" name="user" value="" ID="Text1">
</form>
<input type="button" value="Delete" class="btn" onclick="setval()" onmouseover="hov(this, 'btn btnhov')" onmouseout="hov(this, 'btn')" ID="Button1" NAME="Button1"/>
function setval()
{
//alert(s.getValue());
document.slider.user.value = s.getValue();//set value of hidden text box to value of slider
document.slider.submit();
}