I do not know how to obtain the information of the generated inputs through a dynamically generated form with javascript.
The idea is that from the form only the information of the inputs is sent to the function.
This is my code:
function createForm(formConfig){
var form = document.createElement("form");
for (prop in formConfig) {
var input = document.createElement("input");
if (formConfig[prop].type == "text"){
input.setAttribute('type',"text");
input.setAttribute('name',formConfig[prop].name);
}
else if (formConfig[prop].type == "Number"){
//
}
form.appendChild(input);
}
var submit = document.createElement("input");
submit.setAttribute('type',"button");
submit.setAttribute('value',"Save");
submit.setAttribute('onClick',"example(this.form)");
form.append(submit);
document.getElementById("formPlace").appendChild(form);
}
function example(form){
//Function to read the form inputs info
}
It would be better to set the click handler instead of using setAttribute. And pass in an anonymous function that closes over the form variable.
submit.addEventListener("click", () => example(form), false);
Then in the example function loop over the form children and grab the values.
Related
I am trying to make a username, ID and password linking form but i need to make sure that the program recognises that a username has been selected.
This is what I have done:
var usernameBox = document.getElementsByName("uop");
usernameBox.onclick = function(){
if (usernameBox.options[usernameBox.selectedIndex].value == false){
alert("Please choose your username");
}
}
This does not work for me and I am a beginner to javascript so I'm not very familiar with a lot of the concepts but that's what learning is for right.
You could add the onchange attribute in the HTML itself, which calls a function in the JavaScript.
Heres a example
<input type="text" onchange="inputOnChange()" id="input-username"/>
<script>
function inputOnChange() {
let usernameinput = document.getElementById("input-username");
let username = usernameinput.value;
// do whatever u want with the username now
console.log(username);
}
</script>
You could update a variable everytime the 'select' element is changed, then show the alert. You can use the username variable wherever you would like. Here is how you could do this...
var usernameBox = document.getElementById("uop");
let username = usernameBox.value;
usernameBox.onchange = (e) => {
username = e.target.value;
alert(username);
}
The textbox is dynamically generated using javascript
var txtLoop = 1;
function add(type) {
if (txtLoop !=23){
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "txtLine" +txtLoop);
element.setAttribute("id", "txtLine" +txtLoop);
txtLoop++;
}
The question is, how can you post this multiple textbox based on how many textbox created?
how can you post this multiple textbox
As long as the textbox has a name attribute, you can access the value:
$_POST['txtLine1']
$_POST['txtLine2']
$_POST['txtLine3']
// ... etc
If you want an array instead, use:
element.setAttribute("name", "txtLine[]");
Then in your PHP code, this will return you an array of values:
$_POST['txtLine']
for ($x=1; $x<=22; $x++) {
if (isset($_POST['txtLine'.$x]) && $_POST['txtLine'.$x] != ''){
$txtLine[$x] = $_POST['txtLine'.$x];
}
}
Please let me know if it's not this simple but just wrap the inputs in a form and submit the form.
I wanted to provide form feedback to users as they unfocus off inputs and when they submit the form. It works when I have just the focusout method but fails when i add the submit method.
(function(){
$('input').focusout(function(){
if($(this).val() == ""){
$('.jsError').html('<p class="alert alert-danger text-center">'+$(this).attr('name')+' is required.</p>');
}
});
//when the submit button is pressed
$("#register").click(function(event){
//var input = $(this).parent().find('input[value=""]');
if(!input.length){
event.preventDefault();
$('.jsError').html('<p class="alert alert-danger text-center">'+Please fill in the form+'</p>');
}else{
//set variables
var email = $('#email'),
emailConf = $('#emailConf'),
pass = $('#pass'),
passConf = $('#passConf'),
stageName = $('#stageName'),
mainClub = $('$mainClub'),
mainSkill = $('#ent_main_skill'),
termsAgree = $('#agreeToTerms');
}
});
})();
I was thinking it was the event.preventdefault but that itself doesn't seem to do anything.
From what I can see by looking at the commented line, you are trying to query all inputs that wont have a value. That means if input.length is greater than 0, there are errors but if it's 0 it means all the form fields have been filled.
The logic you implemented does the opposite, it should be:
if (input.length) {
//errors
} else {
//no errors
}
I'm having an issue where i'm trying to store the value of a form input so I can call it later, but on submit, the form is removed. The process of what I am trying to achieve is that once the form is removed on submit, it will populate a div with the form input value to deliver a message.
I have two functions:
The first function validates the input fields on window.onload, and has the input value
The second function processes the data to provide results onsubmit
these are the variables that are stored in the function performing the validation:
var fnamez = document.getElementById("last_name_id").value;
var ftext = document.createTextNode(fnamez);
this is the function that is performed on submit
function processForm(e) {
e.preventDefault();
if (q1_valid == true && q2_valid == true && q3_valid == true && q4_valid == true && q5_valid == true) {
var badge = document.getElementById("badge");
badge.setAttribute('class', 'badge');
var form_div = document.getElementById('form');
// remove all child nodes
while (form_div.hasChildNodes()) {
form_div.removeChild(form_div.lastChild);
}
var congrats = document.createTextNode('congratulations!');
badge.appendChild(congrats);
// issue occurs here; thinking its a result of the removal of form
var zfname = document.getElementById('first_name_id').value;
var fnametext = document.createTextNode(zfname);
badge.appendChild(fnametext);
}
badge is the name of the variable that locates the div id = badge
Thank you in advance!
I have this code:
if($('input[name=id]').length == 1 && $('input[name=submitted]').length != 1 )
{
var id = $('input[name=id]').val(),
name = $('input[name=staro_ime]').val();
img_upload(name, id);
}
When form is submitted, hidden input field with name submitted is created. How can I check when form is submitted and then disable code from above?(This function is outside submit_event).
just add a submit event to the form.
$('#your_form').on('submit',function() {
$('#your_form').append("<input type='hidden' id='hidden_form' name='submitted' value='something' />");
}
if you want to just run the function once, you can use a variable out side of the event that you set, or you can just check if the appended field exists in the form. using the variable method:
var formSubmitted = false;
$('#your_form').on('submit',function() {
if(!formSubmitted) {
$('#your_form').append("<input type='hidden' id='hidden_form' name='submitted' value='something' />");
//anything else you want to run one time
formSubmitted = true;
$('#your_form').submit();
} else {
//submit form
}