I have this form http://jsfiddle.net/thiswolf/XDsSt/ with four identical inputs and buttons.The problem is,each section is updates its own unique data in the database so when updating,its important the submit button i click updates the database with the input from that section only.
My function is
$(document).ready(function() {
$(".xx").live('click', function(){
alert('clicked');
});
});
How do i make sure the button click is unique to that section?.
Use an ID value instead for each input button. This way, jQuery can identify it like so:
$('#button_tag');
HTML:
<html>
<head></head>
<body>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn1" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn2" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn3" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn4" type="submit" class="xx" value="Submit">
</section>
</body>
</html>
Javascript:
$(document).ready(function () {
$(".xx").live('click', function () {
alert('clicked ' + $(this).attr('id'));
});
});
JsFiddle:
http://jsfiddle.net/XDsSt/7/
Get the corresponding section that button belongs to . Then access the elements inside that. You may use the jQuery closest()/parent()(if only one layer of hierarchy of controls) function for that.
$(document).ready(function() {
$(".xx").live('click', function(e){
e.preventDefault(); //if you want to prevent normal form submit
var item=$(this);
var sectionClicked=item.closest("section");
//Let's alert the first text box
alert(sectionClicked.find("input").first().val());
//do whatever with the items belongs the current section
});
});
Sample : http://jsfiddle.net/XDsSt/8/
I recommend you to switch to jQuery on instead of live as it is deprecated.
$(document).ready(function() {
$(".xx").live('click', function() {
$('section').has(this).find(':input:text').each(function() {
alert( this.value ) ;
});
});
});
Demo
If possible then instead of .live(), use .on() with jQUery 1.7+, because live() is deprecated.
$(document).ready(function() {
$("body").on('click', '.xx', function() {
$('section').has(this).find(':input:text').each(function() {
alert( this.value ) ;
});
});
});
Demo
if id is not an option - I don't understand that , but you can put multiple classes in buttons
<input type="button" class="xx btn1" ... >
$(document).ready(function() {
$(".xx").live('click', function(){ // look into on instead on live
if $(this).hasclass('btn1');{
alert('clicked');
}
});
});
Related
i have 3 textfield which i want to clone with one remove icon on add button click ...upto this my code works fine.
Now i want to remove the last 3 textfields of that particular div on remove button click...but my code removes all the dynamically added textfields of my form..
please help me to resolve this....
$('#add_exercise').on('click', function() {
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>');
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>');
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><button class="remove">x</button></div>');
return false;
});
$('#exercises').on('click', '.remove', function() {
$(this).parents("#exercises").remove();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="exercises">
<div class="exercise">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
</div>
<button id="add_exercise">add exercise</button>
<button class="remove">x</button>
</fieldset>
The issue is with your use of .parents('#excercises') as this selects the top level container and removes it.
A better solution would be to wrap all the 3 inputs you append in their own div and then remove that using closest(), like this:
$('#add_exercise').on('click', function() {
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><button type="button" class="remove">x</button></div>');
});
$('#exercises').on('click', '.remove', function() {
$(this).closest(".exercise").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="exercises">
<div class="exercise">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<button type="button" class="remove">x</button>
</div>
<button type="button" id="add_exercise">add exercise</button>
</fieldset>
Note that I added type="button" to your <button> elements as it would make sense for them not to submit any parent form elements.
How can I know which form I clicked? Is it possible with a button class instead of buttons with id?
$(document).ready(function () {
$(".form-buttons").click(function () {
//I only want the form which corresponds to the button I clicked
var formDates = $(form).serialize()
alert ("You clicked "+formDates)
})
})
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
Yes use class instead of id for similar elements. Please try this.
Note: form-button is the class name in your HTML and not form-buttons
$(document).ready(function () {
$(".form-button").click(function () {
var formDates = $(this).closest('form').serialize();
alert ("You clicked "+formDates)
})
})
I think you be looking for
$('.form-button').on('click', function () {
alert($(this).parents('form').attr('id')); // Check the ID of the form clicked
});
something Maybe Like mentioned above.
You can get the name of the element by using the this keyword which refer, in a DOM event, to the cibled element :
$(document).ready(function () {
$(".form-buttons").click(function () {
alert('You clicked the form' + this.parentElement.getAttribute('id'));
})
})
You can do this in a few different ways. You can traverse up the DOM and see which form is used or -and this is my favorite- you can submit the form!
Solution 1: Traversing up the DOM
<script>
$(document).ready(function () {
$(".form-button").click(function () {
var clicked_form = $(this).parent();
var formDates = clicked_form.serialize();
alert ("You clicked "+formDates);
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
</body>
Solution 2: Submit the form
You already are using the form, so why not submit it? Change the buttons to input elements with type submit and intercept the submit event, like this. This is how I think it should be done. It is also better for user experience because the user can just submit the form by pressing enter.
<script>
$(document).ready(function () {
$("form").on('submit', function (e) {
e.preventDefault();
var formDates = $(this).serialize()
alert ("You clicked "+formDates)
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
</body>
Check this fiddle on how I would do it.
https://jsfiddle.net/xtfeugav/
Simple use
$("form").submit(function(e) {
to listen for every submit on all the forms you have. To get the ID of the form you use
var formid = $(this).attr('id');
I used e.preventDefault(); to prevent the form don't update the page.
Remember to use <input type="submit" value="Submit"> on your forms to make this work.
Its a simple code, hope it helps.
I am trying to create a button that onclick adds some new html elements to page but jQuery doesn't attach to does new objects.
<script>
jQuery(document).ready(function(){
jQuery("input[type='button']").click(function(){
var ask=confirm('Are you sure');
if(ask){
var n=jQuery(this).parent();
var s=jQuery(this).prop('id');
n.html('Select Picture: <br><input type="file" name="'+s+'" id="'+s+'" required>');
}
}
});
jQuery(":file").change(function() {
var na=jQuery(this).val();
alert(na);
});
});
</script>
now here is a form Example for that code:
<form>
<div><img src="image/source"><br>
<input type="checkbox" required value="1" name="product1">image is ok<br>
<input type="button" value="change image" id="product1" name="product1b"></div>
<input type="file" name="product2">
</form>
So when I click on button the form changes to this:
<form>
<div>
Select Picture: <br>
<input type="file" name="product1" id="product1" required>
</div>
<input type="file" name="product2">
</form>
the problem is that jQuery function jQuery(":file").change(function() { works for product2 but not for product1, because it was not there on page load and jQuery is not attached to it.
You have to use a delegated event when your elements are dynamic:
jQuery(document).on('change', ':file', function(){
// do stuff
});
I am trying to add a input text just before the submit button using jquery
<form>
<input type="text" id ="text1" />
<input type="text" id ="text2" />
<input type="submit" name="submit">
</form>
I want to dynamically add another textbox just above the submit button
You can do this way:
$('form').find('input:submit').before('<input type="text"/>')
FIDDLE:
http://jsfiddle.net/ehsansajjad465/r4o09rdd/
Give your button an id attribute like so:
<input type="submit" id="submitbtn" name="submit">
Then, this should do it
$( '#submitbtn' ).before( '<input type="text" id="text3" />' );
I'm assuming you wish to append the text box on button click.
<input type="submit" id="btn">
Jquery code
$("#btn").click(function(){
$("#btn").before("<input type='text' id='text3' />");
});
If you wish to keep adding input tags and keep each id dynamic
var i = 3;
$("#btn").click(function(){
$("#btn").before('<input type='text' id="text'+id+" />');
i++;
});
If you give an id to your form, It would be asier to select only the form you want.
In jQuery there is a method called before:
$("input[type=submit]").before("<input type='text' id='text3' />");
Here is an example for both adding and removing elements dynamically using jQuery:
http://jsfiddle.net/EdsonF/pax9jqte/
This is the HTML:
<form role="form" action="/wohoo" method="POST">
<label>Stuff</label>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<input type="text" name="stuff[]">
<button type="button" class="remove-field">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
</form>
This is the Javascript:
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
the final result allows you to do the following:
Try this
<input type="button" onclick="addInput()" value="Add input" />
<script>
function addInput(){
var _input = '<input type="text" name="anInput" value="Hola" />';
_input.insertBefore('.submit');
}
Also replace your submit input by
<input type="submit" name="submit" class="submit">
I am extremely new to JavaScript, so bear with me.
I have the following code:
<input id="test" name="test" type="text" value="" />
<input id="test" type="button" value="Go!" />
<script type="text/javascript">
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
</script>
I would like the code to only be executed upon a button click. The function is to add the user input data to the end of the url and then upon the button click, load that url.
As of now, when I load the page, it automatically executes and goes to the url.
You have two input fields with the same ID, that's a no go!
Change the second one to something different!
Put your current javascript code into a function
function clickHandler(event) {
// Your code...
}
Attach an event listener to your container
var myContainer;
// assign element from DOM
myContainer = document.getElementById(ID_OF_CONTAINER);
// attach event handler
myContainer.addEventListener('click', clickHandler);
That should do the trick
<input id="test" name="test" type="text" value="" />
<input id="test2" type="button" onclick="fnc()" value="Go!" />
<script type="text/javascript">
function fnc(){
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
}
</script>
You need to wrap your code in a function, and then call the function based on an event. Here, the onclick event of the button. NOTE that IDs must be unique. Change your code to:
<input id="test" name="test" type="text" value="" />
<input id="test2" type="button" value="Go!" onclick="foo()" />
<script type="text/javascript">
function foo(){
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
}
</script>
jsFiddle example
Note that ID's are unique, and that you would use an event listener for that
<input id="test" name="test" type="text" value="" />
<input id="button" type="button" value="Go!" />
<script type="text/javascript">
document.getElementById('button').addEventListener('click', function() {
var val = document.getElementById('test').value;
window.location.href="http://www.thenewendurancefitness.com/" + val;
}, false):
</script>
<form onsubmit="return submit()">
<input id="test" name="test" type="text" value="" />
<input id="submit" type="submit" value="Go!" />
</form>
<script type="text/javascript">
function submit() {
location.href="http://www.thenewendurancefitness.com/"+document.getElementById('test').value;
}
</script>