Generating and deleting a dynamic textbox using jquery/javascript - javascript

Currently the below piece of code gives me a textbox and an "add" button. While clicking on add button, a new textbox gets generated below the first textbox. clicking on "add" again adds another textbox and so on. But currently the new textbox does not have "add" button. i want an "add" button to each textbox as well. I also want a delete button for each textbox and clicking on it will delete that particular textbox in that row. Also, i want a validation that more than 10 textboxes will not be allowed on the click of "add" button.
Could aNY of you please help !! Coding in both jquery and javascript would be appreciable.
HTML CODE :
<div id="inputs">
Name : <input type='text' name='name'>
<button onclick="getinput()">Add</button>
</div>
Javascript code :
function getinput()
{
var name="<br> <input type='text' name='name'>";
$("#inputs").append(name);
}

you could do something like this : http://jsfiddle.net/yq670z0d/1/
<div id="inputs">
<div class="input">
Name : <input type='text' name='name'/>
<button class="addbox">Add</button>
</div>
</div>
$("#inputs").on('click','.addbox',function(){
if($('.input').length < 10){
$(this).parent().clone().appendTo('#inputs');
}
});
Only jQuery, but quite short. the idea is to copy the div with your input and button, and then add it to your div inputs.
for your delete button, you just have to add a button with a delete class, and in another click listener, call the jQuery function remove() for the specified div. for instance :
<div id="inputs">
<div class="input">
Name : <input type='text' name='name'/>
<button class="removebox">Remove</button>
</div>
</div>
$("#inputs").on('click','.deletebox',function(){
$(this).parent().remove();
});

Related

How to change display none input inside form?

I have a button this name is manuel. When I click this button I want to change display:none property. Actually, its works but my element inside a form. When I click button form posted. I can't stop the post.
<div class="form-group">
<input type="text">
<button onclick="myFunction()" class="btn btn-primary btn-sm">Manuel</button><br>
<input type="text" style="display:none;" id="hide1">
</div>
function myFunction() {
document.getElementById("hide1").style.display = "block";
}
How to create input without form post?
Just change button type="submit" to type="button", so you can do display: none function and if you want to submit the form you can do it with javascript.

How to change Text field to Buttons

Can any body tell me the best practice or way to change Text field to the Button with value 0 or 1.
Let me clear what I want so i have here(see below) django form with the 2 field called Up_vote and Down_vote and when I submit it stores pretty nicely into the Votes table.
But what I what is to have two buttons like stacoverflow have for up_vote and down_vote and when someone press on the up_vote it should submit value 1 automatically to the database and when someone press the down_Vote it sould submit the value 0 to the database table.
see like this:
so basically how i can convert text fields to the two buttons, I dont now how i can do with the javascript or with other method.
It's basically a CSS style I will assume that you will not use AJAX
Create 2 forms one for up and other for down vote
Put the type attribute on the input to hidden and the value is 1 for the up vote and 0 for down vote and use CSS to style the submit button to appear like what you want
this how it should be in html
<!-- Up vote form -->
<form>
<input type="hidden" name="vote" value="1">
<button type="submit" class="up-vote-btn"></button>
</form>
<!-- Down vote form -->
<form>
<input type="hidden" name="vote" value="0">
<button type="submit" class="up-vote-btn"></button>
</form>

Form Control by URL Query

I have a question about button control and form control. So, I wanted to show data inside field of the form according to the button clicked.
For example:
Button 1 clicked -> show the text field inside the form with text like "you clicked button 1".
Button 2 clicked -> show the text field inside the form with text like "you clicked button 2".
Maybe someone here can give an example.
Thank you.
Just Use jquery and capture the all button click event and get the name of clicked button and set the value to msg text filed like this .
$('button').click(function()
{
$('#msg').val("you clicked " +$(this).attr('name'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" >
msg : <input type="text" name="msg" id="msg" >
<button name="button1" id="button1" >button1</button>
<button name="button2" id="button2" >button2</button>
<span id="msg"> </span>
</form>

How to show different textbox depending on which radio button is clicked?

I am working with JSP and I have a html form in which I have a button at the top which is Process button. Now if I click on that Process button, it shows me a form which has two radio button - TestClient and TestServer.
It also has Submit button in that form.
Here is my jsfiddle
Problem Statement:-
Now what I am trying to do is - As soon as I click on TestClient radio button, I would like to show two text box and one radio button along with label just below that TestClient and TestServer like this -
TestClient TestServer
Name textbox
Id textbox
Sex Male Female
Submit button
In the same way if I am clicking TestServer button - I would like to show three text box and one drop down menu just below the TestClient and TestServer
TestClient TestServer
Address textbox
ClientId textbox
ServerId textbox
Country dropdownbox
Submit button
Is this possible to do using jquery in my current jsfiddle example? If yes, then any jsfiddle example will be of great help to me.
Very do-able. I've just added a quick example with a div for each radio button and some text in them. You can add your own inputs etc.
Hide these divs with CSS by default.
<div class="client" style="display: none">
Client fields here
</div>
<div class="server" style="display: none">
Server fields here
</div>
Then you can do something like this with your jQuery handler:
$('input[name="client"]').click(function() {
if($(this).attr('id') == 'client') {
$('.client').show();
$('.server').hide();
} else {
$('.client').hide();
$('.server').show();
}
});
if you do not want to code the html and show/hide it, but you prefere to generate it with jquery, you can also use this solution:
http://jsfiddle.net/fauv9/1/
<button id="primary">Process</button>
<form method='post'>
<h4>Process</h4>
<fieldset><legend>process</legend>
<input id="client" value="TestClient"type="radio" name="cli_srv">
<label for="client">TestClient</label>
<input id="server" value="TestServer" type="radio" name="cli_srv">
<label for="server">TestServer</label>
</fieldset>
<fieldset id="form_process">
</fieldset>
</form>
<button form="form_process">Submit</button>
and
$("#primary").click(function(){
$("form").show()
});
var form= $('#form_process');
$("#client").click(function(){
form.html(null);
form.append('<label for="cli_name">name</label><input value="name" id="cli_name"><br>')
form.append('<label for="cli_id">id</label><input value="id" id="cli_id"><br>')
// etc...
})
$("#server").click(function(){
form.html(null);
form.append('<label for="cli_name">address</label><input value="address" id="address"><br>')
form.append('<label for="srv_id">id</label><input value=" server id" id="srv_id"><br>')
// etc...
})

Input field with onchange fails to trigger when user click button in another form

I have a page with multiple small forms on it. Each form has one input field that has an onchange function which will submit it's form to a url that returns a no data status.
Things work fine, submitting form after form, until the user clicks on a small form that has ONLY a submit button in it. This click works, but abandons the change in the previous field resulting in its onchange not firing the click at the bottom of the changed function fails (still trying to understand the firebug trace).
What's going on? is there a fix for my structure?
UPDATE:
First I tried simply delaying the action of the submit, but no luck.
I have hidden the and added an <input button> to the chain of "events" so that the focus has a place to come to rest before the real submit tries to happen -- the code below has been updated. So the question now becomes:
Is this as simple as it can be?
Script:
$(function() {
$('input,select').change(changed);
});
function changed(){
...
$(this).parents('form').find(':submit').click();
}
function doSubmit(elt, id)
{
$(elt).focus();
setTimeout(function(){
$(id).click();
}, 400);
}
One of may small forms:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="submit" value="field" name="btn_update" style="display: none;">
<input type="hidden" value="000242" name="quote_id">
<input type="text" maxlength="15" size="3" value="" name="q[cost][4][1][unit]">
</form>
The offending click goes into this form:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="hidden" value="000242" name="quote_id">
<input type='button' name='btn_close' value='Close' onclick='doSubmit(this,"#CLOSE");'>
<input id='CLOSE' type='submit' name='btn_close' value='Close' style='display:none;'>
</form>
Might be totally irrelevant, but your selector for the change event includes your submit input too. Can you change it to:
$('input[type="text"],select').change(changed);
to see if anything changes?
The solution turned out to be to create a button tag, set the focus explicitly to a it, and then set a timeout to click the real, but hidden, submit input tag. This allows the change in focus to run the submit associated with it and then continue with the explicit submit of the page.
The question has been updated to show this solution.

Categories

Resources