Adding inputs with AJAX? - javascript

Is there a way in AJAX or JS to add further inputs upon a button click?

In short, yes you can add more inputs on a button click.
For example, in jQuery, you could have something like this where the buttonID is the id attribute for the button and the formID is the id attribute for your form:
$("buttonID").click(function() {
//add new inputs here, something like:
$("formID").append('<input type="text" id="newInput" name="newInput" />');
});
You can also have the additional inputs hidden to start off with and then 'un-hide' them on a click if you want.

Further inputs? Run any JavaScript you want when a user clicks a button by adding an event listener to the button that listens for a click.

Once a user clicks on the button, if you have an event listener, you can change what they had entered, you can do anything anything you want.
I am not certain what you mean by 'further inputs' though. If you are sending data then you can append whatever you want, I frequently append a timestamp to help prevent caching issues, for example.

Related

Javascript to click button, choose options?

I am trying to create a JavaScript that chooses an option from a drop down, clicks that options and then clicks another button to add this option to cart, how would I create this in a JavaScript code?
Here's what I've tried:
browser.getelementbyid("id").invokemember("click");
Try using jQuery, it helps alot I find.
$('#YourElement').click()
It sounds like what you want to do is:
when something change in a drop down field
you want to trigger a click on another element
Because you want to listen to the change event here's a short example and an area to play with the code: https://jsfiddle.net/je5Lgne5/
$('#products').change(function() {
var selectedOption = $(this).val();
$('#cart').append($('<li />').html(selectedOption));
});

How submit only data changed in html with or without javascript?

I have a form (HTML) with some inputs (checkbox) and I want to submit only inputs that user has clicked ou unclicked and ignore the others inputs.
I'm thinking in add a class (javascript) to the input when user change value. But I don't know if it is a good ideia.
Any Suggestions?
You can have the form that submits onClick() and calls a Javascript. When that happens you then search what values have been unchecked and then use the Javascript to submit it to the next page to handle the response.
However not sure what you are trying to achieve doing this...
Class approach is working.
When user click on input I add class "envia":
$("INPUT[type='checkbox']").click(function(){
$(this).addClass("envia");
});
On submit I send only data with the class I want:
$.post("/financeiro/funcional/contasapagar.php", $(".envia").serialize(), function(data){
//code here
});
Only data the user changed is send to server.

Removing Form elements .hide() Removing Values?

I use this script to show an additional language menu additional, which works great however if the user selects a value then decided they don't want to add an additional language an clicks "Remove" the form field is hidden however the value is still there and is submitted with the form.
Is there away to change the field value to when the user clicks the "remove" button or remove the field completely?
$(document).ready(function(){
//Hide div w/id extra
$(".smalla").hide();
$("#langadtional").hide();
$("#langadd").click(function(){
$("#langadtional").show();
});
$("#langrem").click(function(){
$("#langadtional").hide();
});
If you want to remove the element, use remove:
$("#langadtional").remove();
If you want to disable a form element:
$("#langadtional").attr("disabled", "disabled");
To enable:
$("#langadtional").removeAttr("disabled");
You can clear the element's value with val() when hiding it:
$("#langadtional").hide().val("");
Removing the element is also possible, as Linus G Thiel demonstrates in his answer, but that would mean you'd have to completely recreate the element if your Add button is clicked further down the line.

how do i disable certain elements of a form using a radio button input?

here is the fiddle page:
http://jsfiddle.net/hgcTb/10/
in the form there is a radio button with id = "extra"
i was hoping to do this:
when user clicks that radio button all other inputs are disabled, the only inputs that would be enabled is the radio buttons and the submit/reset buttons, and when user click reset the form should reset to the original form, maybe using javascript?
please give some pointers or samples
EDIT: ive added a function to disable each element but it is giving me errors.
Yes, use javascript to do so.
Add an onclick event to your radio button that disables the other HTML elements. For example:
Here's your radio button:
<input type="radio" name="choice" value="consume" onclick="disableItems(this)" />
Here's your script:
function disableItems(obj) {
var el = document.getElementById('<your HTML element's ID>');
el.disabled = true;
// do this for other HTML elements in your form
}
Regarding Reset, you can attach a similar onclick handler for the RESET button, that enables the controls back (using el.disabled=false).
These are just snippets to get you started, and give you an idea of how to proceed (no spoon-feeding for the exact solution). There may be more code involved based on your form's logic.

Getting reference to form with no id or name

I am working on a project where I need to recall the fields entered in a form so I can repopulate them later. When a form has a name, I can remember it and then later use some JavaScript (document.getElementsByName(...)[0]) to access it. However, if there is no name...I'm at a loss for how to get a reference to it later.
I'm using jQuery, but am open to a JavaScript solution as well. One idea is to remember the index of the form. So, if it was document.forms[3] then later I can use the index. However, when someone submits a form, how do I know the index of the form that it is? (NOTE: I am blindly adding submit handlers to all forms when a page loads to capture the activity.)
Instead of attaching events to the submit buttons, attach it to the <form> elements directly, like this:
$("form").submit(function() {
//do something with this
//this == the form element being submitted
});
Or...in your current event handlers, use .closest() to get the closest parent <form> element:
$(":submit").click(function() {
var form = $(this).closest("form");
});
If you don't want to use an index on all form (flaky because someone may add a form in anywhere), you could use its surroundings as a reference... for example.
$('#content').parent().next().find('form')

Categories

Resources