I have multiple dynamically generated forms. When a form is submitted I need jQuery to pick out certain pieces of information from the form that was clicked.
Right now, I am trying to use the this object which is generated after a click event. I am trying to extract the information from the this object because it appears to have the HTML values that I want. Is there a better way to go about this?
It's pretty simple. Just get the field value like so:
var fieldValue = $('#field_id').val();
var email = $('#email').val();
var name = $('#name').val();
Do it inside your event handler.
After a click event, this should hold the DOM-element that was clicked. Assuming that element was inside a form, you can do this:
$(this).closest("form").serializeArray()
Fiddle:
http://jsfiddle.net/mqe3u3oe/
Please use the code below
function get_value() {
var fieldValue = $('#field_id').val();
}
Related
I have 2 forms on 1 page. I am trying to get the value of the name field from the first form using jQuery but jQuery is always getting the name value from the 2nd form. The code looks like this:
$('#registration-form').each(function(){
var $this = $(this);
$this.submit(function (event) {
var firstName = $(this).find('input[name="firstName"]').val();
console.log(firstName);
});
});
Why is this code not working? Your help is much appreciated!
Firstly you're selecting by id attribute, so you cannot have more than one element with the same id. This is why only one is found. The each() is also redundant in this case.
If you want to group elements use a class instead, although note that the each() is still redundant as jQuery will loop over each selected element internally so you can just attach the submit event handler directly, like this:
$('.reg-form').submit(function (e) {
var firstName = $(this).find('input[name="firstName"]').val();
console.log(firstName);
});
I created a function for the email.
Here is the code
$('#id_email.form-control').keyup(function(){
$('span.error-keyup-email').remove();
var inputVal = $(this).val();
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(inputVal)){
$(this).after('<span class="error error-keyup-email">Invalid Email Format.</span>');
}
});
But I have two fields for two different forms, so I don't want to write the same code for another field.
I know it's basic, but I don't know how to call this function for another field.
P.S. I work in django framework, if you have a solution in the view or template, I can give you more details
Drop the tag id #id_email and make it a class: .email, so that you can have more than one in the document.
$('.email.form-control').keyup(function(){
Within the handler, you have access to the DOM object where stuff happened via this. And you can access all its ancestors.
var form = $(this).parents('form');
That will walk through the ancestors of the element where the keyup happened, until it finds the <form> tag.
From there, you can access everything else, specific to the one form where the keyup happened.
$(form).find('span.error-keyup-email').remove();
So let us say i have a form with id #form which has two input fields, namely title & price.
I click on the Edit button somewhere in the application which has data attributes (e.g data-title="Apple" data-price="10")that are to be assigned to the #form upon clicking the button.
the obvious solution that works is
$("#name").val($(this).data('name'));
$("#price").val($(this).data('price'));
This obviously looks bad when you have too many fields. So I am trying to get something like this to work $('#form').data($(this).data());, more or less in a single like
Have tried this many ways with no success
Any help is appreciated
You could create a jquery plugin that you can call from the element that contains the data points and have it apply the data based on the key to elements within the form of that same name. Example below
$.fn.applyData = function(form) {
$form = $(form);
$.each($(this).data(), function(i, key) {
$form.find('#' + i).val(key);
});
};
JSFiddle: http://jsfiddle.net/LCM8S/43/
I have an input box, and a button and other random elements in the HTML document. my question is this: can JavaScript use an id that is entered into the input box and hide the element with that Id when the button is clicked? please let me know how to do this. I am making a program that creates elements based on certain button clicks, so the user can format html without knowing code. I am trying to add dynamic functions and I have absolutely no idea what to do, because the functions need to be flexible enough to use the input in them.
the reason I can't insert the functions directly is because I want the button to use a function that is specifically created to do what the user wants.
I also dont know jquery, inly HTML JavaScript and CSS
Yes, but you are on entirely the wrong track: you don't need to create a new function in response to user input to do that.
You just need to use user input in a function.
function myEventHandler(event) {
var user_input = document.getElementById('my_text_input').value;
var user_selected_element = document.getElementById(user_input);
if (user_selected_element) {
user_selected_element.style.display = "none";
}
}
document.getElementById('the_button').addEventListener('click', myEventHandler);
You'll need to create a function that is passed to the button's click handler. When the button is clicked, we can get the input's value and process it from there. Here's a working fiddle.
function hideById() {
var id = document.getElementById('id').value;
document.getElementById(id).style.display = 'none';
}
document.querySelector("button").addEventListener("click", hideById);
I am not sure how to phrase what I'm asking (or I would probably be able to find it). What is it called when you have an indefinite number of items to add to a webpage form for submission to a db? For example, if you have a resume web site, and you want to add experience. You may have a slot for one job, and an "Add more experience" to that. What is that called? How do you implement that (js, html, css)?
EDIT:
Thanks for the comments. This is called: dynamically add form elements.
this is a basic idea ,,
http://jsfiddle.net/3mebW/
var noOfFields = 2;
$('#addNew').on('click', function(e) {
e.preventDefault();
var newField = '<br><label for="experience'+noOfFields+'">experience'+noOfFields+'</label>';
newField += '<input type="text" name="experience'+noOfFields+'"class="field"/>';
$('.field:last').after(newField);
//adding a hidden input inside the form to know the number of inserted fields
//make sure that the input is not already here
//then adding it to handle the number of inputs later
if($('#noOfFields').length === 0){
$('#Frm').append('<input type="hidden" value="2" id="noOfFields"/>');
}else{
$('#noOfFields').attr('value',noOfFields);
}
noOfFields++;
});
you can also detect the number of fields using a class or any other method
You can do this using the jQuery function .clone().
Here's the jQuery doc about it : http://api.jquery.com/clone/
You can copy your Experience input field, and set its properties (ID, name, etc) before appending it where you want.
lots of ways to do this, here is is one
http://jsfiddle.net/uuKM8/
$('#myBtn').click(function(){
$( "#myInput" ).clone().appendTo('body');
});