So I am creating a form that has a feature(s) input. It starts off with only 1 but the number may increase. By clicking on a button I will append a new text box for new feature to be written into it via Jquery.
JsFiddle: https://jsfiddle.net/kmckeow/ewnetzqx/
Issue 1:error from java script saying that I cannot use input.attr().
Issue 2:When I do get this JavaScript to work, how am I supposed to reference a variable number of elements i.e. (feature1, feature2, feature3, ...) in PHP. When I submit a form with post I usually access the information in each element via it's name. How can I do that when I am not sure how many features there will be.
HTML:
<div id="new_product">
<form action="" method="post" enctype="multipart/form-data">
<p>
<label for="feature1"> Feature(s): </label>
<input type="text" name="feature1" />
<button type="button" class="btn btn-primary" id="add_feature">Add Feature</button>
<p>
<input type="submit" value="Submit" name="submit">
</form>
</div>
JQuery:
var feature_count=1;
var feature_count_old=0;
$( "#add_feature" ).click(function() {
feature_count_old=feature_count;
feature_count+=1;
var input = document.createElement("input");
input.attr('name', 'feature' + feature_count);
input.attr('type', 'text');
$("input[name='feature'+feature_count_old]").after(input);
});
Issue 1
You did not load jQuery, so $ is not defined. Simply add the jQuery library to your snippet and you're good to go!
Issue 2
attr() is a jQuery method and not vanilla JS, so you need to do something like this:
var $input = $('input');
$input.attr('name', 'feature' + feature_count);
Related
I'm doing a webserver with jsp, i'm validating the log in and i found a conflict.
I got:
<form action="Autenticacion" method="POST" class="form">
<input type="text" name="Username" placeholder="Username">
<input type="password" name="Password" placeholder="Password">
<button type="submit" class="loginbutton" name="login" >Login</button>
<button type="submit" id="usuario_nuevo">Nuevo Usuario</button>
</form>
On the button properties, i really need id and name.
id = Because it calls a JS who animates the tag.
name = Because do the validation on webservice.
My code on js is:
$(".loginbutton").click(function(event){
event.preventDefault();
$('form').fadeOut(500);
$('.wrapper').addClass('form-success');});
This calls another css, now i want to fix this, because i need to use both, the first "id" for the animation and then "name" for the validation and send to another jsp page (that already got coded and work).
EDIT 1: Already added the noconflict on Jquery, but only do the validation, not the id animation.
EDIT 2: changed id for class
What is works for me is -
$("#submit").click(function(event){
event.preventDefault();
$('#page').animate({opacity:0},400, function(){
$('form').submit();
});
});
It look like you didn't submit form after fadeout.
Add one more line
"$('form').submit();" after $('.wrapper').addClass('form-success') in your code.
It seems that you could change the id to whatever you want, and instead adding the click event with jQuery('#login').click(), you could use jQuery('.loginButton').click(). Don't forget to add the loginButton class for the button.
I want to remove some html as I don't actually have access to the HTML file. This is because it is a CMS so would it be possible to manipulate code via DOM?
Here is a code sample I have just written, how do I remove the frmMain [first form tag] but keep second from tag via DOM?
I know you cannot nest a <form> within a <form>.
<form id="frmMain" >
<form class="2ndform"></form>
</form>
You can save the reference of the second form:
var second_form = $( '.2ndform' ).remove()
Then remove the first form
$( '#frmMain' ).remove()
and finally reappend the second form wherever you want
$( '.other_wrapper' ).append( second_form );
As a last notes:
you CAN'T have html classes starting with a number.
See this
you CAN'T have nested form. See this
As already mentioned, you cannot have a form inside a form. When the browser parses the HTML, it will fix it to the best of its ability. This behavior is unspecified and is not necessarily the same cross-browser. Because I was curious, I made this:
<form id="frmMainA">
<form class="2ndForm">
</form>
</form>
<form id="frmMainB">
<form class="2ndForm">
<input type="text"/>
</form>
</form>
<form id="frmMainC">
<input type="text"/>
<form class="2ndForm">
<input type="text"/>
</form>
</form>
When run in Chrome, it spits out this:
<form id="frmMainA">
</form>
<form id="frmMainB">
<input type="text">
</form>
<form id="frmMainC">
<input type="text">
<input type="text">
</form>
It did the same thing in FF and IE10. This means that when JS is running in modern browsers, you will only have #frmMain and there won't be any .2ndForm to unwrap. If you need the form to have the class .2ndForm, you can add it to #frmMain.
var form = document.getElementById('frmMain');
form.className = form.className + ' 2ndForm');
Or
$('#frmMain').addClass('2ndForm');
Use .unwrap:
$('.2ndform').unwrap();
Docs
Or plain JavaScript:
var el = document.getElementById('frmMain');
var newcontent = el.outerHTML.replace(el.outerHTML, el.innerHTML);
document.body.innerHTML = newcontent;
I have a variable var somewhere along my js program. lets call it 'tempVar'.
I want to pass this variable when the button is being pushed. here is part of my code:
var TempVar=9;
<form id="boardButton" action="/test" >
<button id="joinBoardButton" >JOIN</button>
</form>
how can I pass to the page test the content of Tempvar?
You can use the onclick attribute. Then once in JavaScript you can then seek out the values you need. If they are on the page already you can use document.getElementById(someID) to get the element, then grab your value that way.
You can also use the this keyword to access the DOM element just clicked. See : what's “this” in javascript onclick?
EDIT :
As for getting a variable you alreday had, if it has a large scope you can just access it directly.
Another way of doing this, is to save the value you want to re-use in a hidden input of your site and re-use when needed.
Hope this helps!
Assuming var is defined globally (on the window object):
<form id="boardButton" action="/test">
<input type="hidden" name="var"/>
<button id="joinBoardButton" onclick="this.form.elements['var'].value=window.var">JOIN</button>
</form>
You can add an input hidden value to your form
<input id="var" type='hidden' name='country' value=''>
Then you can set the value with onclick when you submit the form :
<button id="joinBoardButton" onclick="this.document.getElementById('var').value=var" >JOIN</button>
This should submit the form with the TempVar in the query string: .../test?TempVar=ABC
<script>
var TempVar = "ABC";
function setVar() {
document.getElementById('TempVar').value=TempVar;
}
</script>
<form id="boardButton" action="/test" >
<input type="hidden" id="TempVar" name="TempVar" value=""/>
<input type="submit" id="joinBoardButton" value="JOIN" onclick="setVar();"/>
</form>
i would like to create two buttons, one where the user can press it and then appears a drop drown and a input text field and another to remove this one, if the user wishes.
I already searched it in Google but can't find it.
Best regards,
Valter Henrique.
[working demo here: http://jsfiddle.net/GNnSw/1/][1]
your html
<div id="box" style="display:none;">
<select>
<option value="test">Test</option>
</select>
<input type="text" value="" id="text1" />
<input type="text" value="" id="text2" />
</div>
<input type="button" value="show" id="show" />
<input type="button" value="hide" id="hide" />
in jQuery:
$('#show').live('click', function(){
$('#box').show();
});
$('#hide').live('click', function(){
$('#box').hide();
});
http://jsfiddle.net/GNnSw/4/
using jquery it would take something like:
<button onclick="$('form').show();">press it</button>
<form>
//input elements
</form>
Search harder in google btw.
Do it with jQuery.
HTML
<button id="buttonid" value="Click on me!">
jQuery
$("#buttonid").click(function(){
var $input = '<input id="inputid" type="text" value="value">';
// make the input field
var $select = '<select id="selectid"></select>';
// make the select
var $opt1 = '<option name="one">one</option>';
var $opt2 = '<option name="two">two</option>';
// make two options
$select.append($opt1).append($opt2);
// append to select the options
$(this).after('<form action="url" method="POST"></form>').append($input).append($select);
// append input and the select after the button
});
Oh yeah. :) Btw you need jquery library.
Create a "placeholder" for your fields:
<div id="placeholder"></div>
Add the buttons / links:
<a onClick="add()">Add Form</a><a onClick="remove()">Remove Form</a>
And this to your javascript-file:
function add() {
document.getElementById('placeholder').innerHTML = "Code for your form...";
}
function remove() {
document.getElementById('placeholder').innerHTML = "";
}
I guess the best way of achieving flexible and user friendly HTML layout it by using external JavaScript library, such as jQuery or mootools. The reason is - in traditional web frameworks after you send HTML content to web browser, server cannot manipulate with it. Also, I guess good principle is to use Java only for serving content, and using client-side framework to do all the magic with User Interface.
Moreover, You will find plenty of examples how to work with those libraries like this one.
If you would really like to stick to plain Java, since you might know anything about JavaScript, I suggest checking out Google Web Toolkit and Vaadin. You can write Java code almost without any restrictions, and it will be "converted" (compiled) to JavaScript automatically. But that decision should be considered deeply, since learning GWT or Vaading might be more time consuming and not always applicable.
I have a form generated dynamically with the method .append() of jQuery.
I can add any number of new input, textbox, cmbbox, etc...
But the problem is that when I do the sumbit of the form, the PHP target does not receive the new input added, but just the vars connected to the input already in the form before the append().
Any ideas?
The javascript:
$("#button").live('click',function add(){
$("#list").append(
'<li style="height:20px;">'
+'<input type="text" class="text" id="prova" name="prova[]" value="prova">'+
'</li>'
);
});
The Html:
<input type="submit" id="button" value="Add input">
<form name = "form" id="form" action="post.php" method="POST">
<ul style="width:670px;padding:0px 0px 30px 0px" id="list">
</ul>
<input type="submit" id="submit" value="Submit">
</form>
The PHP:
<?php
print_r($_POST);
?>
Problem 1:
Your #button should not be of type submit, since you just want to use it to add to the form and not submit the form. So you should have:
<input type="button" id="button" value="Add input">
Problem 2:
You are overwriting your variables. The name is the variable sent with the form, so each input addition must have a new name, or the variable must be an array.
Additionally, you can't have more than one element with the same id.
The simplest way to solve this is to make prova an array by using the form prova[]:
$("#button").live('click',function() {
$("#list").append(
'<li style="height:20px;">' +
// Removed repetitive ID and made prova an array
'<input type="text" class="text" name="prova[]" value="prova"></li>'
);
});
jsFiddle example
You are intercepting the click event and adding elements to the form, but the event has already started, and will complete its default action (submit the form) without re-checking the content of the form.
You should stop the event after adding the fields (preventDefault should be the right choice), and then re-submit the form.
Something along these lines:
$('#button').live('click', function add(event){
event.preventDefault();
$('#list').append(...);
$('#form').submit();
});
I haven't tested it, but I'm pretty confident that it should work :)
Just to clarify, and putting any other problems aside, #Claudio's note is the correct answer here. I just had the same problem, button type was 'button' and the new element's name was being dynamically incremented. Everything looked fine, but the added elements would not submit.
Then I noticed my form tags were inside the table tags. I moved them outside and it all worked as planned.
Have any code to show? In order for php to "see" the vars submitted, you have to ensure that it has the "name" attribute specified on the form elements. I have a feeling your issue is going to be with the jQuery not the php.
Best guess: You haven't set name attributes for your dynamically added elements.