I got a form, and I want to send hidden input by javascript, how to do it?
F.ex:
<input id="total" type="hidden" value="" name="total" />
And when someone click submit I want to set it value
Are you trying to instantaneously change the value of the hidden input? Something like that can be achieved with the onsubmit event, of course.
var submit = document.getElementById("submit");
var hidden = document.getElementById("hidden");
var eventListener = function(el, type, listener) {
if(el.addEventListener) {
el.addEventListener(type, listener, false);
} else if(el.attatchEvent) {
el.attatchEvent("on"+type, listener);
} else {
el['on'+type] = listener;
}
};
var onsubmit = function() {
var newVal = "value to set for hidden input";
hidden.value = newVal;
};
eventListener(submit, "submit", onsubmit);
The above code will listen to the submit event on the submit button and when triggered, it will change the value of the hidden input. To go into further detail with any answer, we'd need a more descriptive question. Otherwise, I really don't know what you want.
You can try following:
document.getElementById("total").value = "value you want to set";
document.formname.submit();
If you're trying to create a unique id so that you can add this person into some db with a unique key or you want to create some sort of session id or a similar id and store it in memory then I suggest using php or perl not javascript. I'm a newbie too but i've had that sort of dilemma come up with some stuff i was trying to do and php did the trick for me. I ended up using js to validate the form data and pass it to the php once it checked out. js is great if you want to check to see if the data is present and doesn't contain anything that you don't want or need in the form. it's not great for security.
Related
I have a series of dynamically generated inputs with the same class, eg:
<input class="addressitem" type="text"/>
<input class="addressitem" type="text"/>
<input class="addressitem" type="text"/>
After the user inputs data into each field I want to take that data and place it in the value field of a hidden input.
However, I am having trouble figuring out the best way to do this. So far I've tried:
$(".addressitem").focusout(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
and
$(".addressitem").change(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
But I cannot get anything to appear in console.
Could anyone point me in the right direction?
Both of your approaches should work as long as you define them inside the document.ready event and you do not have any other script errors in your page.
$(function(){
$(".addressitem").change(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
$(".addressitem").focusout(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
});
You may use your browser console to verify the existence of other script errors in the page.
Also remember that, change event occurs on the text input fields when the focus is out. So you will see the console.log when user changes the focus from the textboxes. If you want instant updates, you should consider using keyUp event
Here is a working sample.
EDIT : As per the comment : I had the fields generated by a Jquery click function. I had to move my code within the click function for it to work.
No you don't need to. You can simply use the jQuery on delegation method. When you register an event handler with jQuery on, It will work for current and future elements(dynamically injected) in the DOM.
So your code will be
$(function(){
$(document).on("change",".addressitem",function() {
var addressinput = $(this).val();
console.log(addressinput);
});
});
This might be the best option, as you said they are dynamically generated inputs.
$(document).on("blur",".addressitem",function() {
var addressinput = $(this).val();
console.log(addressinput);
});
WORKING FIDDLE
Check your console
On focusout in HTML5 as following:
<input type="text" onfocusout="makeITUpperCase(this)">
And in javascript as following:
function makeITUpperCase(e) {
console.log(e.value);
e.value = e.value.toUpperCase();
}
The function takes 'this' object as e which can be used to get value or alter
I have the following input:
<input name="video" value="" type="text">
And attached js event:
input.focusout(function(){
loadThumbnail();
});
The problem is it triggers always when focus leaves field. Actually it's goods behavior, but didn't fit my needs, because if user didn't changed the field the event will be triggered and the request will be made on server.
I've tried to replace it with change event, but it doesn't triggers when user clean's field.
So what I need is event that will be triggered after user finished editing the field and detect cases when user cleans field or moves focus to/from it, but don't change anything.
Would you suggest a solution?
Try something like this to save the old value and compare it with new value:
var oldVal = ''
input.focusout(function () {
var newVal = input.val();
if (oldVal != newVal) {
oldVal = newVal;
loadThumbnail();
}
});
Try the below part. You will have to tweak this. I just wrote a raw code for U.
var temp='';
input.focusin(function(){
temp = input.val();
});
input.focusout(function(){
if temp != input.val() then
loadThumbnail();
});
I am absolutly new in JQuery development and I have the following problem.
I have a form that contains this JQuery button:
<!-- RESET BUTTON: -->
<td>
<button class="resetButton" name="submitReset" onclick="return resetSearch(); return false;">Reset</button>
</td>
Clicking this button the user reset to null two input that are into my form performing this JavaScript function:
function resetSearch() {
var f = document.getElementById('dataDaAForm');
f.dataDa.value = null;
f.dataA.value = null;
event.preventDefault();
}
The script is performed but the problem is that after that it go out from the previous function the form is submitted anyway and I don't want that this behavior happen.
How can I prevent that the form is submitted when the user click on the reset button? As you can see I also try to add this statment but it don't work:
event.preventDefault();
What am I missing? How can I fix this issue?
Another question is: is it the correct way to reset the values of the input tag of my form?
Give this a shot - you need to pass the event into the function. In addition, I've removed the need for inline JS.
$(".resetButton").click(function(e) {
var f = document.getElementById('dataDaAForm');
f.dataDa.value = null;
f.dataA.value = null;
e.preventDefault();
});
In addition to preventing the default, Javascript provides a method to reset your form:
$(".resetButton").click(function(e) {
document.getElementById("dataDaAForm").reset();
e.preventDefault();
});
Note: You tagged jquery, so I provided a jquery solution (although there is no jquery in your question).
The simplest way to create a reset button is an input type reset:
<input type="reset" value="Reset" />
Though if you really want to do it in javascript, the answer of James Hill will suffice
Try this
var form = $('#dataDaAForm')
$(".resetButton").on("click",function(e) {
form.reset()
e.preventDefault()
e.stopPropagation()
})
I can't find any documentation that is helping me figure this out. It seems like a very straightforward thing for Parsleyjs to do.
What I want is until my form is valid, to disable the submit button - this is my default in my HTML:
<input id="new-node-form-submit" type="submit" value="done" disabled>
When the form knows it's valid, it should remove the disabled attribute from the submit button. If the form becomes invalid again as the user is filling it out, the disabled attribute should be added back.
I am trying to use the Parsley documentation to add a listener to the form and then check if the form is valid, but I can't seem to get this working. Any suggestions? This seems like a really straightforward thing that somehow I am just not getting.
$( '#new-node-form' ).parsley( 'addListener', {
var isValid = $( '#new-node-form' ).parsley ( 'validate' );
if(isValid == true) {
console.log("Your form is valid!");
}
}
Your javascript is invalid in the example you gave. The second argument to the parsley('addListener') call should be a javascript object where the properties of the object are the parsley events to add the listener to:
var $form = $('#new-node-form');
$form.parsley('addListener', {
onFieldValidate: function() {
console.log('form valid=', $form.parsley('isValid'));
}
});
The question is old and probably parsley updated its API but I can't get addListener working, here's an alternative:
$(function() {
window.Parsley.on('field:validate', function() {
var form = this.$element.closest("form"),
submit = form.find('.xbtn-submit');
if (form.parsley().isValid()) {
submit.removeAttr("disabled");
} else {
submit.attr("disabled", "disabled");
}
});
});
I have a single input form:
<form id="my_form">
<input id="my_input" type="text" />
</form>
In most browsers, when a user types text in this single input and hits 'enter' the form is submitted. That's great but I want to go one step further and make it so that if the user types something and focus is lost, the form is submitted.
I've currently tapped into jQuery's change event like so:
$("my_input").change(function() {
$("my_form").submit();
});
This works for the case when I change the input value and focus out but if I change the input value and hit 'enter' then the form is submitted twice (once for 'enter' and once for change).
I was starting to go down the path of lower level listening to keys and managing a submit state but figured I'd throw it out to the community to see if anyone knows of a cleaner way.
Instead of messing with error-prone checks, you can also attach a submit event to the form. If the value is equal to the old value, don't submit the form by using ev.preventDefault().
var oldvalue = "";
$("#my_form").submit(function(ev){
var newvalue = $("#my_input", this).val();
if(newvalue == oldvalue) ev.preventDefault(); //Same value, cancel submission
else oldvalue = newvalue;
})
Have you tried the blur event http://api.jquery.com/blur/
This will fire when the input loses focus.
Just an improvement to Rob W's solution.
$('#my_form').submit((function () {
//Enclose variables as to not pollute the global namespace
var oldValue,
input = $('#my_input'); //cache your input
//Same concept as Rob W's solution
return function (e) {
var newValue = input.val();
if(newValue === oldValue) {
e.preventDefault();
}
oldValue = newValue;
};
})());