How to stop changing text inside textbox with same ng-model - javascript

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.

Related

How can I use the same fields for two different forms?

I'm trying to combine the login and register forms on a WooCommerce/WordPress site. The idea is that a single set of fields, username and password, could be submitted by two different forms. The first way I thought of is (simplified for clarity):
<form id="login">
<input id="username">
<input id="password">
<button type="submit">LOG IN</button>
</form>
<form id="register">
<div style="visibility:hidden!important;position:fixed!important;">
<input id="register_username">
<input id="register_password">
</div>
<button type="submit">REGISTER</button>
</form>
Basically, the layout hides the second pair of inputs but shows both buttons. Then, there's some JS that mirrors the values of corresponding fields:
var u = $('#username');
var p = $('#password');
var ru = $('#register_username');
var rp = $('#register_password')
$('#login').on('change blur focus click keyup',function(){
ru.val(u.val());
rp.val(p.val());
});
This seems to trigger a warning that an "invalid field is not focusable" - which I understand - but, can this be solved and done well? Is there a way to do this without JavaScript? Is there a better way altogether?
Let's assume I will show the hidden stuff in the case that there is no JS on the user's browser. Let's also assume I was given this design and asked to implement it, i.e. this is not a question about UX.
Just merge 2 forms into one and set 2 buttons
<form id="login">
<input id="username">
<input id="password">
<button name="submit" type="submit" value="login">LOG IN</button>
<button name="submit" type="submit" value="registration">REGISTER</button>
</form>
After submitting your form you need to check submit value like
if($_POST['submit'] == 'login')
then do code for login
else if($_POST['submit'] == 'registration')
then do code for registration
To reveal the hidden fields in the case of no javascript you would put the data between the following tags:
As far as the fields that are active when there is JavaScript, place that data within the JavaScript itself using document.write("fields here");.
The end result will be that these fields appear when JavaScript is enabled, and do not appear when JavaScript is disabled.
Hope this helps.

Several radio button groups in nested ng-repeat, but only last group shows the value

I have a page where I want to update a form with several radio buttons. I query an api, and use the returned array of objects to populate the current values for the radio buttons. The problem that I have is that only the last set of radio buttons actually shows the value. This is the code that I have (I am using [[ and ]] for the start and end symbols for angular):
<fieldset data-ng-repeat="s in sections">
<div class="form-group">
<div class="col-md-12">
<h2>[[ s.section.name ]]</h2>
</div>
</div>
<!-- Field Item -->
<div class="form-group m-b-20 bg-light" data-ng-repeat="f in s.fields">
<div class="col-md-12 m-b-30">
<h4>[[ f.field.name ]]</h2>
<input type="text" data-ng-model="f.comments" class="form-control input-md underline" placeholder="Comments">
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="pass" class="form-control" data-ng-model="f.field_condition">
<label class="eval-pass"><i class="fa fa-check-circle green"></i> Pass</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="fail" class="form-control" data-ng-model="f.field_condition">
<label class="eval-fail"> <i class="fa fa-exclamation-circle red"></i> Fail</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="n/a" class="form-control" data-ng-model="f.field_condition">
<label class="eval-na"> <i class="fa fa-circle blue"></i> N/A</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="caution" class="form-control" data-ng-model="f.field_condition">
<label class="eval-caution"><i class="fa fa-exclamation-triangle yellow"></i> Caution</label>
</div>
</div>
[[ f.field_condition ]]
<hr>
</fieldset>
So basically, I have several sections, and each section has several fields. Each field has it's own radio button group (I am using the section and field ids to name the radio group). What I currently see is only the last field in each section actually shows the selected radio button. The other fields don't have any selection, even though the value for ng-model definitely does (I am showing the value of f.field_condition just to make sure there is a value).
For each field, I can see that the model is set. And if I select a value manually, I can see that the model changes, so it seems to me that the model is setup correctly. I just don't know why it won't initially show as selected for all rows but the last one.
I should also mention that if I save the form even with the missing radio button selections, the database is updated properly (it doesn't set the values to null, and if I manually change the selected value, it is updated in the db as well).
Does anyone have any ideas? Thanks!
EDIT
Here is a fiddle for this, although, it is working as expected in the fiddle. http://jsfiddle.net/dq8r196v/367/
I tried using the static data that I used in the fiddle, but I am still having the same problem. Does anyone know if this could be a CSS problem? The radio buttons are styled, and I didn't write the HTML or CSS.
UPDATE
I am still having this issue, so I built a new angular app and only used the code that is included in the fiddle that I have created. I am having the same problem with this new app, even though the same code works in the fiddle. I really don't understand what's happening here, but if anyone could shed some light, I would really appreciate it.
I have literally copied and pasted the code from my fiddle into a new angular app, and only the last group of radio buttons in each section is showing the value in the app.
Here is my complete code for the new angular app if someone else wants to try it out and see exactly what is happening: https://pastebin.com/qSR33yfM
I created the app on a single page for simplicity.
Here is the link to a pastebin with the exact json that I am using in my app: https://pastebin.com/utfVVQfT
I fixed the problem you're having by simply adding an array of objects ($scope.values) representing the different radio button options, and using an ng-repeat to create your radio buttons. See the following for the updated code: https://pastebin.com/s3hNzaXX
I know there are semantics around ng-repeat creating new $scopes, and imagine there is a conflict in scopes with your nested ng-repeats where it's binding to the radio buttons incorrectly and at a scope different than you want (the section level ng-repeat).
To confirm this suspicion, you could convert all of your interpolations in the code to use functions and console.log s and f at different points and confirm that field_condition is being set at a level you didn't intend.
Either way, it' best practice to create your radio buttons through data (and using ng-repeat), as is done with the $scope.values array, and a good side effect to doing this is not only can you update the different value options using data through AJAX or however you would like, but you won't have weird angular scoping issues as you're experiencing in your current code above.

How to clone form fields without their values?

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('');
});

validate and capture selected button-group checkbox

i am using bootstrap button-group checkbox with toggle. To easily identify selected option, using the toggle function (courtesy - one of the post here). Working example here.
<div class="form-group">
<label class="sr-only" for="Test">Boxes</label>
<div class="controls" name="Test">
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-default" class-toggle="btn-info">AA</div>
<div class="btn btn-default" class-toggle="btn-info">BB</div>
<div class="btn btn-default" class-toggle="btn-info">CC</div>
</div>
</div>
</div>
stumped with:
1) how to validate that user has to select at least 1 button and
2) how to capture value(s) of selected buttons to be sent to PHP (form).
very novice with web development. Need help. Thanks.
Suppose you have three buttons as shown below:
<input type="button" class="button" value="Button1">
<input type="button" class="button" value="Button2">
<input type="button" class="button" value="Button3">
You can make a hidden field there with an array as given below:
<input type="hidden" class="newField" name="buttonValue[]">
Now, use it in Jquery:
$(document).ready(function(){
$('.button').click(function(){
var values = $(this).val();
$('.hidden').val(values);
});
});
and now when you submit a form then you can easily get value from that field and make a validation accordingly.
there is many ways to do this if you want to submit a form with PHP than its very simple you can add a class and use a hidden fields on the click you can add a class and put a value on hidden field and after the submit you can easily get all the value form hidden fields. you can easily check value of hidden fields, so with this you can validate as well that user select any button or not..

JQuery .replaceWith() suddenly putting new element in the wrong place?

This one is really baffling me. I'm using replaceWith() to "clear" a file input field. However, when it replaces it, it puts it back in the wrong place, and I have no idea why. I used the term "suddenly" in the title because what's even more mysterious is that when I stopped working for the weekend the replacement was working exactly as expected. Now I get back to work and suddenly it's not.
Here's the source HTML before calling replaceWith():
<label>Audio</label>
<i style="color:#888888;">MP3 or OGG format recommended</i>
<br>
<button id="clear_audio_input" style="display:none;">Clear</button>
<input type="file" value="" name="source_audio" style="width:300px;">
<br>
<div style="margin-top:15px;">
<b>Current: </b>
<i id="current_audio_source">1360954394_121RuleOfRosePianoEtudeI.mp3</i>
<br>
<input id="source_audio_value" class="required_media" type="hidden" value="1360954394_121RuleOfRosePianoEtudeI.mp3" name="source_audio">
<span id="current_audio_info_a"><input type="checkbox" style="position:relative;top:3px;margin-left:0px;" value="yes" name="source_audio_delete">
Delete current audio?
Current audio will be replaced
Note the location of the FILE input field, named "source_audio". It's immediately after the "Clear" button.
Now, after I call replaceWith(), the HTML looks like this:
<label>Audio</label>
<i style="color:#888888;">MP3 or OGG format recommended</i>
<br>
<button id="clear_audio_input" style="display: none;">Clear</button>
<br>
<div style="margin-top:15px;">
<b>Current: </b>
<i id="current_audio_source">1360954394_121RuleOfRosePianoEtudeI.mp3</i>
<br>
<input type="file" value="" name="source_audio" style="width:300px;">
<input id="source_audio_value" class="required_media" type="hidden" value="1360954394_121RuleOfRosePianoEtudeI.mp3" name="source_audio">
<span id="current_audio_info_a" style="display: inline;"><input type="checkbox" style="position:relative;top:3px;margin-left:0px;" value="yes" name="source_audio_delete">
Delete current audio?
Current audio will be replaced
Notice that it is now several lines down and inside another DIV.
Here is the script that controls the "Clear" button's actions:
$("#clear_audio_input").live("click", function() {
$("input[name='source_audio']").replaceWith($("input[name='source_audio']").val('').clone(true));
$("#source_audio_value").val($("#current_audio_source").text());
$(this).hide();
$("#current_audio_info_a").show();
$("#current_audio_info_b").hide();
checkRequiredMedia();
return false;
});
Here's the basic intended workflow. On load, the clear button is hidden because there is nothing yet to clear. After the user has selected a file, the clear button appears. Clicking the button will clear the file input (by replacing it) and then the button will hide again, essentially returning the form to the same state it was in on load.
Any reason why this oddity is happening (especially since it wasn't happening a few days ago, and I haven't changed anything since then)?
The issue is because you have two inputs with the name source_audio. To get around this, you will need to either give the two inputs fields an id, or change the name.
For example:
$('#my_file_input').replaceWith('<input id="my_file_input" type="file" name="source_audio" />');
$('#my_hidden_file_input').val('');

Categories