I am creating multiple text area, radio button field and drop down list by click on a plus button. Here I need when user will click on minus button the last all 3 type item should delete but it's not happening like that.
Here is my code:
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" type="text">
<label>Questions</label>
<input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
<div id="container">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<textarea class="form-control" name="questions0" id="questions0" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea>
</div>
</div>
<div class="col-md-9">
<div style="margin-top:37px;">
<div style="float:left; margin-right:10px;">
<input type="radio" name="answer_type0" id="answer_type0" onClick="selectScale(this.value,'0');">
</div>
<div style="float:left; margin-top:-10px;display:none;" id="scaleid0">
<select class="form-control" id="nscale0" name="noofscale0">
<option value="">Select Answer Type</option>
<option value="1">Cuttuck</option>
<option value="1">BBSR</option>
</select>
</div>
</div>
</div>
The JavaScript code is given below.
function addQuestionField(){
var get =$("#ques").val();
if(get===null || get===''){
alert('Please add no of questions');
}else{
for(var i=1;i<get;i++){
$('#container').append('<div class="row"><div class="col-md-3"><div class="form-group"><textarea class="form-control" name="questions'+ i +'" id="questions'+ i +'" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea></div></div> <div class="col-md-9" ><div style="margin-top:37px;"><div style="float:left; margin-right:10px;"> <input type="radio" name="answer_type'+i+'" id="answer_type0" onClick="selectScale(this.value,'+i+');"></div><div style="float:left; margin-top:-10px;display:none;" id="scaleid'+i+'"><select class="form-control" id="nscale'+i+'" name="noofscale'+i+'"><option value="">Select Answer Type</option><?php foreach($feeddatascale as $v){ ?><option value="1" >Cuttuck</option><?php } ?></select></div><div style="clear:both;"></div></div></div><div>');
}
}
}
function deleteQuestionField(){
var get =$("#ques").val();
var textareas = $('#container textarea');
if (textareas.length !== 0) {
textareas.last().remove();
$('#ques').val(textareas.length - 1);
}
}
Here when I am clicking - button only the last text area is removing. But I need to delete the respective radio button and drop down list(if exist) with text area. Here the total plunkr code is present.
Add a wrapper class for the input set all together and remove it on delete, always in templating, try to use wrapper selector to isolate blocks of html code
$('#container').append('<div class="row dyn">
https://plnkr.co/edit/kBWcs6zUmMndB3RwXMcF?p=preview
Try this and please close your div properly i think You forgot to put one div closing tag.
function deleteQuestionField(){
var get =$("#ques").val();
var textareas = $('#container').find('textarea');
if (textareas.length !== 0) {
$('#container div.row:last-child').remove();
$('#ques').val(textareas.length - 1);
}
}
you can delete the last row which you added dynamically and which contains the textarea, radio button and dropdown list.
function deleteQuestionField(){
$("#container>row").last().remove();
}
This worked for me,
HTML :
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" type="text">
<label>Questions</label>
<input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-">
<div id="container">
</div>
JS (jQuery) :
$(document).ready(function(){
$('#plus').click(function(){
var get =$("#ques").val();
if(get===null || get===''){
alert('Please add no of questions');
}else{
for(var i=1;i<=get;i++){
$('#container').append('<div class="row"> <div class="col-md-9" ><div style="margin-top:37px;"><div style="float:left; margin-right:10px;"> <input type="radio" name="answer_type'+i+'" id="answer_type0" onClick="selectScale(this.value,'+i+');"></div><div style="float:left; margin-top:-10px;display:none;" id="scaleid'+i+'"><select class="form-control" id="nscale'+i+'" name="noofscale'+i+'"><option value="">Select Answer Type</option><?php foreach($feeddatascale as $v){ ?><option value="1" >Cuttuck</option><?php } ?></select></div><div class="col-md-3"><div class="form-group"><textarea class="form-control" name="questions'+ i +'" id="questions'+ i +'" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea></div></div><div style="clear:both;"></div></div></div><div>');
}
}
});
$('#minus').click(function(){
var get =$("#ques").val();
var textareas = $('#container textarea');
var radiobtns = $('#container input');
if (textareas.length !== 0) {
textareas.last().remove();
radiobtns.last().remove();
$('#ques').val(textareas.length - 1);
}
});
});
See the jsfiddle
Related
Below is the code I tried so far.
<div class="form-group row insert" id="form-group-insert0">
<label style="text- transform: capitalize" for="column" class="col-md-2 col-form-label">Column</label>
<div class="col-md-9">
<select class="form-control" name="id (int)" id="id0"></select>
<select class="form-control" name="name (varchar)" id="name0"></select>
<select class="form-control" name="primary_details_schema (text)" id="primary_details_schema0">
</select>
<input type="button" class="btn btn-primary insert_more" value="Insert more" id="insert_more">
</div>
</div>
I want to clone the above div each time when click on Insert more button with unique id.
Also clone div have a Remove button instead of Insert button.
It will be like below:
<div class="form-group row insert" id="form-group-insert1">
<label style="text- transform: capitalize" for="column" class="col-md-2 col-form-label">Column</label>
<div class="col-md-9">
<select class="form-control" name="id (int)" id="id1"></select>
<select class="form-control" name="name (varchar)" id="name1"></select>
<select class="form-control" name="primary_details_schema (text)" id="primary_details_schema1">
</select>
<input type="button" class="btn btn-danger remove" value="Remove" id="remove">
</div>
</div>
My javascript code:
$sharerCount=1;
$(document).on('click', ".insert_more", function (){
$('#form-group-insert0').clone().attr('id', 'form-group-insert_' + $sharerCount).insertAfter('.insert:last').find("*[id]").attr('id', 'input_' + $sharerCount).val("").clone().end();
$sharerCount += 1;
});
I removed the id's because really, they step on each others toes and add unnecessary complexity. For example, you would create 5 form-groups and then delete the 3rd one. Do you have to then cycle through and adjust everyone else's id? The id's are essentially indexes and that is easy enough to get dynamically. The best way to approach dynamically created elements and their properties are through relative paths. If there were actual IDs involved, that would be a consideration, but for something like this...
$(document).on('click', ".remove_clone", function() {
$(this).closest('[data-cloned-insert]').remove()
})
$(document).on('click', ".insert_more", function() {
let clone = $('[data-master-insert]').clone();
clone.insertAfter($('.form-group:last')).removeAttr('data-master-insert').attr('data-cloned-insert', '').find('input[type=button]').val('Remove').removeClass('insert_more').addClass('remove_clone')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row insert" data-master-insert>
<label style="text- transform: capitalize" for="column" class="col-md-2 col-form-label">Column</label>
<div class="col-md-9">
<select class="form-control" name="id (int)"></select>
<select class="form-control" name="name (varchar)"></select>
<select class="form-control" name="primary_details_schema">
</select>
<input type="button" class="btn btn-primary insert_more" value="Insert more">
</div>
</div>
I have an option field with by default 2 option. I have a button "Add more Option", this will add a input field (containing minus button to remove) dynamically.
I want to remove the particular input field when user clicks minus button.
<div class="col-sm-4 col-sm-offset-4">
<form class="form-horizontal" action="index" method="post">
<div id="optionsList"class="form-group">
<label for="options">Options</label>
<input type="text" class="form-control" id="option1" placeholder="M S Dhoni">
<input type="text" class="form-control" id="option2" placeholder="Virat Kohli">
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-default" id="moreOptions">Add More Options</button>
</div>
</form>
</div>
Here is the script -
$(document).ready(function(){
var optionNo = 2;
$("#moreOptions").click(function(){
optionNo = optionNo + 1;
$("#optionsList").append
('<div class="input-group" id="inputField' + optionNo +'"><input type="text" class="form-control" placeholder="New option field" id="option' + optionNo +'"><i class="input-group-btn"><button class="btn btn-danger" type="button" id="removeBtn' + optionNo +'"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
});
// here i want to write code to remove that input field
});
I tried this -
$(".input-group").click(function(){
const id = this.id;
$("#id").remove();
});
Please suggest. Any other way to do this will also be fine.
Use classes instead of worrying about incrementing ID's. That approach gets too complicated to manage sometimes and it isn't needed at all
Simplified append html with new class remove-btn instead of id on button:
$("#optionsList").append
('<div class="input-group"><input><button class="btn btn-danger remove-btn" type="button"></button></div>');
Delegated event listener for any .remove-btn added to dom in future
$(document).on('click', '.remove-btn', function(){
// "this" is current button event occurs on
$(this).closest('.input-group').remove()
})
Firstly don't use id's in dynamically created elements if you are not going to change it's value and end up with multiple elements with the same ID instead use classes. ie.
class="removeBtn'
Next for dynamically created elements use event bubbling to attach events
$("body").on("click", ".removeBtn", function(){
$(this).closest(".input-group").remove();
});
Because you add on the fly the new button you need to delegate the click event to the document:
$(document).on('click', ".input-group button", function(e) {
$(this).closest('.input-group').remove();
});
This part: ".input-group button" means: listen for click event related to button element inside an input-group
The closest used to get the parent div to be removed.
The snippet:
$(document).ready(function(){
var optionNo = 2;
$("#moreOptions").on('click', function(e) {
optionNo = optionNo + 1;
$("#optionsList").append
('<div class="input-group" id="inputField' + optionNo +
'"><input type="text" class="form-control" placeholder="New option field" id="option' + optionNo +
'"><i class="input-group-btn"><button class="btn btn-danger" type="button" id="removeBtn' + optionNo +
'"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
});
// here i want to write code to remove that input field
$(document).on('click', ".input-group button", function(e) {
$(this).closest('.input-group').remove();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-sm-offset-4">
<form class="form-horizontal" action="index" method="post">
<div id="optionsList"class="form-group">
<label>Options</label>
<input type="text" class="form-control" id="option1" placeholder="M S Dhoni">
<input type="text" class="form-control" id="option2" placeholder="Virat Kohli">
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-default" id="moreOptions">Add More Options</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-success" name="button">Submit</button>
</div>
</form>
</div>
Try with the below code. Hope it helps.
var counter = 1;
$(document).on('click', 'button#moreOptions', function(){
$("#optionsList").append
('<div class="input-group" style="padding:5px;"><input type="text" class="form-control" placeholder="New option field '+ counter +'"><i class="input-group-btn"><button class="btn btn-danger btn-minus" type="button"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
counter++;
});
$(document).on('click', 'button.btn-minus', function(){
$(this).parents('div.input-group').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4 col-sm-offset-4">
<form class="form-horizontal" action="index" method="post">
<div id="optionsList"class="form-group">
<label>Options</label>
<input type="text" class="form-control" id="option1" placeholder="M S Dhoni">
<input type="text" class="form-control" id="option2" placeholder="Virat Kohli">
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-default" id="moreOptions">Add More Options</button>
</div>
</form>
</div>
Add a onclick handler when you generate your button as following :
$("#removeBtn" + optionNo + "").click(function()
{
$("#inputField" + optionNo + "").remove();
});
I am unable create multiple text field dynamically using JavaScript and jQuery. My code is below:
<div class="col-md-3">
<div class="form-group">
<label for="ques">No of questions</label>
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" type="text">
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label>Questions</label>
<input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();">
<input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
</div>
<div class="text-left" id="intro-add" style="display:none">
<input type="button" name="" class="btn btn-sm btn-info" value="Add">
</div>
</div>
</div>
<div id="container">
<div class="form-group" style="margin-top:5px;display:block" id="introBox0" >
<div>
<input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox0" id="scaleans00" name="labelname" placeholder="Answer" value="">
<input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-">
<div class="text-left" id="intro-add" style="display:block">
<input type="button" name="" class="btn btn-sm btn-info" value="Add" onclick="addMore(0,0)">
</div>
</div>
</div>
<hr>
</div>
Here user will create multiple question section and each question section user has to create multiple field using add button and will delete using minus button . Each question field should unique id.Suppose in section one there are 3 input field then its ids should be like this scaleans00,scaleans01,scaleans02... and for section two these should be scaleans10,scaleans11,scaleans12... and so on.
Here is my JavaScript code:
<script>
function addQuestionField() {
var get = $("#ques").val();
for (var i = 1; i < get; i++) {
$('#container').append('<div class="form-group dyn" style="margin-top:5px;display:block" id="introBox'+i+'"><div><input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox'+i+'" id="scaleans'+i+'0" name="labelname" placeholder="Answer" value=""><input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-"><div class="text-left" id="intro-add" style="display:block"><input type="button" name="" class="btn btn-sm btn-info" value="Add" onclick="addMore('+i+',0)"></div></div></div><hr>');
}
}
function deleteQuestionField() {
var textareas = $('#container .dyn');
if (textareas.length !== 0) {
textareas.last().remove();
$('#ques').val(textareas.length - 1);
}
}
function addMore(parent,child){
var mainDiv='#introBox'+parent;
$(mainDiv).append('<div><input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox'+parent+'" id="scaleans" name="labelname" placeholder="Answer" value="">'+'<input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-"></div>');
repopulate(parent);
}
function repopulate(k){
var mainId='.inptbox'+k;
var j=0;
$(mainId).each(function(i, e) {
if(i==0){
$(this).attr('id', 'scaleans' + i+j);
$(this).next().attr('onClick', function(old, n) {
return 'removeThis(' + i + ','+j+')';
})
$(this).next().attr('id', function(old, n) {
return 'labelminus' + i+j;
});
}else{
$(this).attr('id', 'scaleans' + i+(j+1));
$(this).next().attr('onClick', function(old, n) {
return 'removeThis(' + i + ','+(j+1)+')';
})
$(this).next().attr('id', function(old, n) {
return 'labelminus' + i+(j+1);
});
}
})
}
function removeThis(r,t) {
$("#scaleans" + r+t).remove();
$("#labelminus" + r+t).remove();
repopulate();
}
</script>
Here I can not create as per my requirement. Here is my full code.
I will be explaining to you what is going on with the current code you have put in Plunker
function addQuestionField() {
var get = $("#ques").val();
for (var i = 1; i < get; i++) {
In Your method addQuestionFiled(), the value retrieved into get variable is not truthy, if you are not entering any value into the
number of questions
textfield. Hence the html will not get appended
Fill in the number of question as 2, and then click add it will keeping on appending the html to container div as the 'var get' will have the value 2 and 'var i' is less than 'var get'
so I have an issue with trying to figure out how to get this to work. I want to make a dropdown selection, and I want all the selections in the dropdown to show up in the main input box along with the original input value.
Here is my form that I am using to send the values to ajax to send to my php file.
<div class="input-group" id="adv-search">
<input type="text" name="input1" class="form-control" id="filter" id="searchbox" placeholder="Something..."/ required>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<h4 class="text-center">Advanced Search</h4>
<label for="filter">Option</label>
<select class="form-control" name="place" id="myList">
<option selected></option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
</div>
<div class="form-group">
<label for="contain">Location</label>
<input class="form-control" name="something1" type="text" id="list2">
</div>
<div class="form-group">
<label for="contain">Something2</label>
<input class="form-control" name="contain" type="text" id="list3">
</div>
<p><br/>
<button type="submit" id="insideButton" name="submit" class="btn btn-primary">Advanced Search</button>
</form>
</div>
<button type="submit" id="buttonClass" name="submit2" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>
</div>
</div>
</div>
</div>
</div>
Now I'm trying to get the values from the select dropdown(#myList) and the other inputs(#list2, #list3) and display them in the main input(#filter) along with the value that was entered in (#filter). My code below will display them per keypress but it repeats it since its in the function. How do I get each input to display in the #filter input.
$('#list2').on("input", function(){
var filter = $(this).val();
var myList = $('#filter').val();
$('#filter').val(filter + " " + myList);
});
Here is a picture of what I would like to accomplish. Any and all help is greatly appreciated. Thank you.
hello If I am understanding correctly according to your image and your piece of code that you want to get the all option input value into the main search box if that so you can try this Jquery code
<script>
$(document).ready(function() {
$("#insideButton").click(function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
I just used one button as submit option you can change it as your wish
you can also write the same code if you want form submit option then there will be a slightly change
<script>
$(document).ready(function() {
$(".form-horizontal").on('submit',function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
hope it helps you can also check this fiddle
fiddle demo
<script>
function run() {
document.getElementById("ip").value= document.getElementById("Ultra").value;
}
</script>
<script>
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="'+frm.add_ip.value+'" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow('+rowNum+');" class="remove" style=" width:9%;"></p>';
jQuery('#itemRows').append(row);
frm.add_ip.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="myformp">
<form method="get" class="myformp2" id="ipForm">
<div id="itemRows">
<span class="lb">Ip Address:</span><input class="form-control wid2 " type="text" name="add_ip" size="4" required placeholder="192.168.0.1:80" title="ip address" id="ip"/> <input type="button" value="+" class="add" style=" width:9%;" />
</div>
<button type="submit" class="btn btn-default mybtn2">save</button>
<div class="clear"></div>
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option onclick="addRow(this.form);"value="0">Select</option>
<option onclick="addRow(this.form);"value="8">text1</option>
<option onclick="addRow(this.form);"value="5">text2</option>
<option onclick="addRow(this.form);"value="4">text3</option>
</select>
</form>
</div>
i want when click on option input add and option value replace with input value but when click on the option more than one it dont replace and i must click on another option then click it can work!
You are setting the value of the newly created input to frm.add_ip.valuŠµ which is the value of the input, not the select.
Since it's in a form you're already using, you can access the select (and it's value) using
form.Ultra.value
which gives you the actual value (0,8,5,4), or you can access it via jquery with
$("#Ultra").val()
which gives you the same thing.
That said, you're generating all the other text-boxes with the same id of ip. Since you already give specific id's to the paragraph tags, you should use the exact approach with the text-boxes as well.
<script>
function run() {
document.getElementById("ip").value= document.getElementById("Ultra").value;
}
</script>
<script>
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="'+$("#Ultra").val()+'" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow('+rowNum+');" class="remove" style=" width:9%;"></p>';
jQuery('#itemRows').append(row);
frm.add_ip.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="myformp">
<form method="get" class="myformp2" id="ipForm">
<div id="itemRows">
<span class="lb">Ip Address:</span><input class="form-control wid2 " type="text" name="add_ip" size="4" required placeholder="192.168.0.1:80" title="ip address" id="ip"/> <input type="button" value="+" class="add" style=" width:9%;" />
</div>
<button type="submit" class="btn btn-default mybtn2">save</button>
<div class="clear"></div>
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option onclick="addRow(this.form);"value="0">Select</option>
<option onclick="addRow(this.form);"value="8">text1</option>
<option onclick="addRow(this.form);"value="5">text2</option>
<option onclick="addRow(this.form);"value="4">text3</option>
</select>
</form>
</div>
remove addRow and run methods and add this event handler. You don't need to handle click on option separately, onchange on select is enough. You are not using the values of options anyways.
$( "#Ultra" ).change( function(){
$( "#ip" ).val( $( this ).val() );
var row = '<p id="rowNum'+rowNum+'"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="'+frm.add_ip.value+'" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow('+rowNum+');" class="remove" style=" width:9%;"></p>';
$( '#itemRows' ).append(row);
} );
function run() {
document.getElementById("ip").value = document.getElementById("Ultra").value;
}
var rowNum = 0;
function addRow(frm) {
rowNum++;
var row = '<p id="rowNum' + rowNum + '"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="' + frm.add_ip.value + '" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow(' + rowNum + ');" class="remove" style=" width:9%;"></p>';
jQuery('#itemRows').append(row);
frm.add_ip.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="myformp">
<form method="get" class="myformp2" id="ipForm">
<div id="itemRows">
<span class="lb">Ip Address:</span><input class="form-control wid2 " type="text" name="add_ip" size="4" required placeholder="192.168.0.1:80" title="ip address" id="ip"/> <input type="button" value="+" class="add" style=" width:9%;" />
</div>
<button type="submit" class="btn btn-default mybtn2">save</button>
<div class="clear"></div>
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option onclick="addRow(this.form);"value="0">Select</option>
<option onclick="addRow(this.form);"value="8">text1</option>
<option onclick="addRow(this.form);"value="5">text2</option>
<option onclick="addRow(this.form);"value="4">text3</option>
</select>
</form>
</div>
Some thing wrong !