How to clone following html without persisting the field values?
<form method=POST action="/url">
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[1][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[1][body]" placeholder="Possible answer">
</div>
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[2][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[2][body]" placeholder="Possible answer">
</div>
. . .
<button type="submit">Submit</button>
</form>
I can see only 3 possible choices here. However, all of them come with major flaws:
.clone() the .form-field normally and reset the field values.
Problem: resetting all the values one by one is cumbersome and is not a future-proof solution. For example, if more fields are added into the .form-group, their values will need to be cleared separately.
Include a hidden .form-group as a template on the page.
Problem: as you see, the input fields contain enumerated names like: answer[1][body]. It is convenient to clone the last .form-group and just increment the value by 1. Cloning the templated .form-group will be lacking this flexibility.
Read the fields as raw html and transform them into JQuery object
Problem: this seems to be a clear solution to me, however I couldn't get it working. The code $.parseHTML($('.form-group').html()) does not return a valid JQuery object, which I need to use .find() and other methods on.
What will be an effective and elegant solution to this problem?
Try this code:
$("button").click(function(){
var t = $("form").clone().appendTo("#clonedForm");
$(t).find("input[type=checkbox],input[type=text], textarea").removeAttr("checked").val('');
});
Related
I am getting the following warnings when we use with the same id names in two different form tags.
[DOM] Found 2 elements with non-unique id
Here is my HTML snippet:
<div class="modal-dialog">
<form action="" method="post" id="myid-1" name="myid-1">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
<div class="modal-dialog">
<form action="" method="post" id="myid-2" name="myid-2">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
How do I resolve "Found 2 elements with non-unique id" warnings?
you need to change id="Job_Name" to be unique e.g. id="Job_Name1" id="Job_Name2" etc. as ID must be unique in the DOM.
It will create conflict when you want to select elements using document.getElementById('Job_Name') or using jQuery $('#Job_Name') as you wont be able to get the second or other elements with same id. you will need to use index and querySelectorAll which will then defeat the purpose of using Id at first place.
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="" >
Duplicate input tag in two different forms
You have to use different id for different elements
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
You need to change de id for each input
Becouse You mentioned the two input element with same id ('Job_Name') in same page
You cannot give the same id in same page to two different element
id is an identifier that defines the identity of the element. It is designed to act like a key to the element and hence it needs to be unique.
Check this answer..
https://stackoverflow.com/a/2187788/8230086
Change the IDs on your inputs as they are what is causing your problem.
As a general rule you don't want to have the same id's on any of your elements.
id suggest using something along the lines of job_name1/job_name2
Just use new { id = "" } for one of the two fields:
#Html.HiddenFor(m => m.Name, new { id = "" })
if you are using react native web or expo pwa use nativeID in place of id
<input nativeID="someId"/>
I have a div with input fields.
<div class="tabs">
<div class="ru">
<input type="text" name="my_vals_ru[]">
<input type="text" name="my_keys_ru[]">
</div>
<div class="en">
<input type="text" name="my_vals_en[]">
<input type="text" name="my_keys_en[]">
</div>
<div class="de">
<input type="text" name="my_vals_ge[]">
<input type="text" name="my_keys_ge[]">
</div>
</div>
Also, I have a MySQL table, where I store some custom user data in 3 languages (English, German, Russian).
id
product_id
key_en
val_en
key_ge
val_ge
key_ru
val_ru
With javascript, I can create a lot of such constructions with inputs and send it to process by POST method.
Now the question: how can I find out, where the right key->value pair? If it's only one .tabs construction, there's no problem. But what if there are 5 or more?
Are there some methods in PHP or Laravel to manage it?
Hello everyone I need to create some dynamic forms so users can configure feeds to their specification.
I have used ng-repeat to do the following:
For each feed a user needs to configure a new tab is created
for each property a feed has a label and input textbox is created.
Markup:
<tabset>
<tab ng-repeat="feed in feeds" heading="{{feed.heading}}">
<form role="form">
<div class="row" ng-repeat="property in feed.properties">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<span>{{property.name}}</span>
</span>
<input type="text" class="form-control" value="{{property.value}}">
</div>
</div>
</div>
</form>
</tab></tabset>
This works just fine with the backing json that I have however I am wondering what the accepted way of capturing the data for this kind of use case, obviously I won't know how many feeds or properties each feed has so I suppose I need to bind this to an array in some way.
The question is how?
use ng-model
<input type="text" class="form-control" ng-model="property.value">
This way the textbox is bound to property.value. angular automatically updates property.value when you change the text in the textbox. You can use it in your JS just like any other variable. That's the beauty of angular.
I have more forms like this:
<form ng-submit="addReply(x)" class="dd animated slideInDown" >
<div class="form-group">
<text-angular ng-model="form.reply"></text-angular>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default pull-right" value="Send" />
</div>
</form>
Have problem with text area because of ng-model="form.reply" when I change some textarea all other text areas are automatically changed... How to prevent it?
Here is example:
http://jsfiddle.net/oLv61qtr/
I just need change one not both...
The answer is: You can't do it.
If you have multiple text fields using the same model variable, they will always display the same value. At the end of the day it is the same variable, so how can it have different values in different places?
Use different model variable on different forms if you need. That seems like the best solution.
I am trying to validate a single input to check numbers 1-99, I am wondering if I can do this in angular without having it wrapped in a form. Not a problem if it needs a form, just curious if it has to have it. Here's what I'm attempting -
<div class="errorMulti" ng-show="multiAdd.$error.maxlength">Error</div>
<input type='text' ng-model="multiAdd" placeholder='Number of levels to add 1-99' ng-maxlength="2">
Pretty straight forward, but doesn't seem to work. Any insight? thanks!
<div ng-app>
<form name="myform">
<div class="errorMulti" ng-show="myform.multiAdd.$error.maxlength">Error</div>
<input type='text' name="multiAdd" ng-model="multiAdd" placeholder='Number of levels to add 1-99' ng-maxlength="2">
</form>
</div>
Check the JSfiddle: http://jsfiddle.net/15ugz6j3/