How to force #change in vuejs - html

I have :
<input type="radio" :name="activity"
v-model="activity"
:value="1"
v-on:change="callProc(data, data2)"
required>
.....
when the value is already filled from the database, ie the div was shown even if it was not onchanged. It would be something like forcing the onchange. it's possible?

#change is better used to be triggered just when the user acts. Seems like you need call callProc before user's action.
You can just call this method after fetch data from database (or inside created() hook if you can). Then v-on:change will be triggered if user actually changes the value.

Related

How to disable a rails form input without creating vulnerability.

So I have an input field that I have set to be disabled on the front end using the code below. The issue is that if the user modifies the code in the browser they can change it to be whatever they want. How to I prevent this on the backend?
<input type="text" class="text party_name disabled-textfield" id="party_name" name="party_name" disabled="disabled" value="<%= #current_user.name %>" />
Normally you handle this with strong parameters where you don't blindly accept anything you're given. You write a method like this:
def input_params
params.permit(:editable_name, :favorite)
end
There you'd enumerate the allowed fields and the rest are simply ignored. I'm not sure what other parameters you have, but you can split them out in to "required" and "permitted" groups. These can even vary depending on privilege or ownership of the record in question.
http://jsfiddle.net/vfvsLj0n/
$('.party_name.disabled-textfield').attr('disabled', 'disabled');
Is this a possibility for you?

Turn off autocompletion without affecting session history caching

I would like to
(1) not show any suggestions to the user while typing in an input field.
This can be done like this:
<input autocomplete="off">
However, I noticed that this also
(2) disables the history chaching, e.g. when you go to another site and click on the history back button the input field will be empty.
You can try it here:
http://jsfiddle.net/LC53F/
Only text inserted into the first field will survive going to a new page and back again.
Is there a way to only have effect (1), but not (2)?
This solution should work, but is not ideal: just sharing an idea.
I don't think you will be able to preserve history with 'autocomplete', so let's try to fiddle out something.
Here's an idea: the history is based on input names, so you can turn off the autocompletion from other sites by using an uncommon name (but still constant, for example: 'email_fakeSuffix_194h5g48').
Then, to turn off autocompletion from this input previous values, you can change its name everytime the page is loaded (ie. append a random number). The problem is that, doing this, you will also turn off the history.
So, the main idea is to use an uncommon input's name and to change it just before submitting the form:
The value won't be saved by the browser because the name has changed
If you navigate to another page without submitting, the value will
still be set because you haven't change the name yet.
Here's an example using JQuery (you can use anything else, or even vanilla JS)
JSFiddle: http://jsfiddle.net/vse9jx3r/
HTML
<form>
<input id="input1" name="email_fakeSuffix_194h5g48">
<input name="input2">
<input type="submit">
</form>
JS
$('form').submit(function() {
$('#input1').attr('name', 'email_fakeSuffix_194h5g48_' + Date.now());
//SUBMIT THE FORM (MAY DO NOTHING AT ALL)
});
You can tell me if I'm not clear enough.
This works for me (using jQuery 1.9.1):
$(function(){
$('input[type=text]').prop('autocomplete','off');
$('#formid').on('submit', function(e){
$('input[type=text]').removeProp('autocomplete');
});
});

How to choose a radio button using RCurl in an ajax event

Hi I have isolated an tag containing a radio button and would like to select one of the options. Here is the full input path:
<input type="radio" id="gen" name="gen" value="Male" onclick="ajaxSetAge(this.value);" />
and I am using the following:
postForm("http://www.archersmate.co.uk/",
radio = 'Female')
however this returns:
Error in nchar(str) : invalid multibyte string 1
What am I doing wrong here?
You need to refer to the name of the form field, not the type, like:
postForm('http://www.archersmate.co.uk', gen='Female')
That said, you won't be able to fill out the form on that website because it does not work as an HTTP POST request. Instead, it triggers an AJAX event. So, you're either going to have to go through the javascript and figure out if there's an underlying document you can access directly OR you'll have to use something like PhantomJS to trigger the relevant form fields and record the resulting javascript-generated contents.

Is there a way for HTML form to submit default value?

Is there a way (without JS) to make input fields POST a default value in case some input fields were blank when the submit was executed?
In other words: I want to avoid on server side reciving stuff like
"ID=&PW="
<form>
<input name="ID" value="stuff"/>
<input name="PW" value="stuff"/>
</form>
setting the value doesn't really help as the user still can clean the input field by him self.
There is no way to do so in pure HTML. Even if you use JS to setup defaults, someone can intercept and modify HTTP Request.
Never trust input values. You can't assume their values.
No. Not without JavaScript.
...but it would be so easy with JavaScript. Not that I advocate inline scripts, but how about:
<input name="ID" value="stuff" onBlur="this.value=this.value==''
? 'default'
: this.value;" />
The Javascript you see is a simple ternary operator, following the pattern:
myVar = condition ? valueIfTrue : valueIfFalse;
So it's checking if the input is blank. If so, set it to a default; if not, let it be.
You should simply enforce the default value server-side. Otherwise the user will always have the ability to trip you up. You can use javascript to reduce the chance of this happening but javascript will always be exposed to the user. Html doesn't have a method for this and even if I'm wrong and it does, or does in the future - such a thing is ALSO exposed to the user.
You're talking about using strtok. I'd recommend simply breaking the tokenizing out twice. Once for the &, and then within each of those results again for the = (obviously if the second result of each pair is blank or null, substituting the default). Otherwise, tokenize it yourself, still on the server.

Creating a dynamic html form

I would like to create a form that changes dynamically.
I have a form for creating a project (with fields such as: project_name, project_description...) and the project can have any amount (bigger or equal to 0) of categories.
What i want is to display a button which would give the user the option to add another category field. In addition I would also like the option for category fields to be "deleteable" by the user (if he changes his mind or made a mistake). What would be the best way to do so. I would like an Ajax type solution.
My solution so far is to leave an empty div beneath the last category and onclick of the button to load another field into that div with yet another div which will be used for the next div. Not to happy with this solution since i now have to count how many fields I have and give each div it's own id which complicates the matter even more.
Is there a more simple solution to this?
If you are trying to add fields dynamically with a button, you can easily do so by doing something like the following:
HTML:
<form>
<p>
<label>Name:</label> <input type="text">
<label>Age:</label> <input type="text">
<span class="remove">Remove</span>
</p>
<p>
<span class="add">Add fields</span>
</p>
</form>
JS:
$(".add").click(function() {
$("form > p:first-child").clone(true).insertBefore("form > p:last-child");
return false;
});
$(".remove").click(function() {
$(this).parent().remove();
});
Demo: http://jsfiddle.net/UeSsu/1/
I started to write a form generator is based on a definition in JSON a while back. It works but could use some enhancements. It's written using Prototype.js but it wouldn't be a huge effort to port it over to jQuery.
You're welcome to steal the code. (just view source)
I've done something similar. To delete fields I didn't really removed fields. I just hidden them with a display:none and had a hidden input "delete" that I trigger to true. Then, the page receiving the result knows which field is to be deleted in the database.
They are not deleted before the form is submitted. It's like a "two pass" conception. But if you don't really need a true ajax, it works fine. Otherwise you need your JS remove function to call the server and tell to delete the field with its id. A little bit more complex to code.