My form has different fields for each type:
<form>
<select ng-model="message.type">
<option>SMS</option>
<option>Email</option>
</select>
<div ng-if="message.type=='sms'">
<textarea ng-model="message.body"></textarea>
</div>
<div ng-if="message.type=='email'">
<input type="text" ng-model="message.subject" />
<textarea ng-model="message.body" class="ckeditor"></textarea>
</div>
</form>
It works great BUT when the user selects email first, writes something in the subject field, then changes back to sms type, then when I send the message object in $http.post, it sends the object with subject child, even though the dom element was deleted.
How do I fix it? I want to send only the data that is linked to existing dom elements.
Thanks
I can imagine several solutions:
Delete the inappropriate attribute
You can do this when the selected option change:
$scope.deleteInappropriateAttribute = function () {
if ($scope.message.type !== 'email') {
delete $scope.message.subject;
}
};
<select ng-model="message.type" ng-change="deleteInappropriateAttribute()">
<option>SMS</option>
<option>Email</option>
</select>
It's even better to make this action just before you post the form, in order to not force the user to rewrite the message.subject if he's switching frequently between the different options.
Associate a different variable to each part of the form
<form>
<select ng-model="message.type">
<option>SMS</option>
<option>Email</option>
</select>
<div ng-if="message.type=='sms'">
<textarea ng-model="message.global.body"></textarea>
</div>
<div ng-if="message.type=='email'">
<input type="text" ng-model="message.email.subject" />
<textarea ng-model="message.global.body" class="ckeditor"></textarea>
</div>
</form>
And then, only post the appropriate variable:
$http.post(
'myUrl.php',
angular.extend(
{},
$scope.message.global,
$scope.message[$scope.message.type]
)
);
Related
In my google app script, i have an html page with a form whose action attribute is created dynamically based on the input values (with javascript) and i create the action url with parameters. After that i insert some input value , the action url is correctly created (i inspected code), but when i click on submit button , the action url open but without parameters.
i tried with method get, post but i have the some result, new url is opened but without parameter, only with "?" character. But if i do the same procedure with a link and href attribute, it works fine. I noticed that parameter not arrive to doget function
include file index.html and app.gs
<form id="myForm" action="#">
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Numero" id="numero">
</div>
<div class="col">
<div class="form-group">
<select id="tipologia" class="form-control">
<option selected>Tipologia supporto</option>
<option >concorsi</option>
</select>
</div>
</div>
</div>
<button type="submit" class="btn-get-started scrollto">Richiedi assistenza Form</button><!--NOT WORK-->
</form>
Richiedi assistenza<!--WORK-->
<script>
document.getElementById("tipologia").addEventListener("change", redirect);
function redirect(){
var nome =document.getElementById("nome").value;
var numero =document.getElementById("numero").value;
var opzioni = document.getElementById("tipologia");
var selezionato = opzioni.options[opzioni.selectedIndex].value;
document.getElementById("btn").href="https://script.google.com/macros/s/AKfycbxia-_rMYlvVjrlyGGd7zRcb1CD5hSYe6W-mLldzxY__8I2b3Q/exec?supporto="+selezionato+"&controllo="+numero+"&nome="+nome;
document.getElementById("myForm").action ="https://script.google.com/macros/s/AKfycbxia-_rMYlvVjrlyGGd7zRcb1CD5hSYe6W-mLldzxY__8I2b3Q/exec?supporto="+selezionato+"&controllo="+numero+"&nome="+nome;
}
</script>
function doGet(e) {
Logger.log(e.parameter.supporto);
var supporto = e.parameter.supporto;
var numero= e.parameter.controllo;
var nome= e.parameter.nome;
}
i don't understand why the parameters disappear
When you submit a form with method="GET" (the default), the URL specified in the action is used as a base.
The query string (which you added using JavaScript) is removed from it and it is replaced with one constructed with the data from the successful form controls.
Since none of your form controls have a name, none are successful, so there is no data. This gives you a blank query string.
Don't try to set the action with JavaScript (which you are doing incorrectly: The DOM action property expects a plain URL, not an HTML encoded one).
Just set the base URL in the action attribute and give the form controls names.
<form id="myForm" action="https://script.google.com/macros/s/AKfycbxia-_rMYlvVjrlyGGd7zRcb1CD5hSYe6W-mLldzxY__8I2b3Q/exec">
<div class="form-row">
<div class="col">
<input type="text" class="form-control" name="controllo" placeholder="Numero" id="numero">
</div>
<div class="col">
<div class="form-group">
<select id="tipologia" name="supporto" class="form-control">
<option selected>Tipologia supporto</option>
<option>concorsi</option>
</select>
</div>
</div>
</div>
<button type="submit" class="btn-get-started scrollto">Richiedi assistenza Form</button>
</form>
NB, your code includes var nome =document.getElementById("nome").value;
but there is no matching id in your HTML. This would cause your JS to error.
I am currently working on a bootstrap-styled form that allows a person to enter a handler and a comment.It has a button that, when clicked, will call a jquery event handler that saves the handler,comment, and Date.now() in an object that will be pushed in the array users.
However, I keep getting
"Uncaught TypeError: Cannot read property 'handler' of undefined at HTMLButtonElement.,at HTMLButtonElement.dispatch,at HTMLButtonElement.v.handle."
The error is from the .js file line : $("#display").val......
Form and display area code
<form>
<div class="form-group">
<label for="exampleFormControlInput1">handle</label>
<input type="text" class="form-control" id="handle" placeholder="#joe">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="comm" rows="3" placeholder="Bad match last night, Joe sucked"></textarea>
</div>
<button id="button1" type="submit" class="btn btn-primary">Post</button>
</form>
<h1 id="display"></h1>
jquery .js file
$(document).ready(
function(){
var users = [];
$("#button1").click(function(){
var person={
handler:$("#handle").val(),
comment:$("#comm").val(),
postDate:Date.now()
};
users.push(person);
$("#display").val(users[0].person.handler+"<br>"+users[0].person.comment);
});
});
I am new to jquery and thus I am not sure how to fix this error.
users[0].person.handler should be users[0].handler. The variable is named person, but the array itself doesn't care about that. Same thing for users[0].person.comment.
Edit: Also, you might need an preventDefault() call to stop the page from refreshing (unless that's what you want.
$("#button1").click(function(e){
e.preventDefault();
var person = {
handler:$("#handle").val(),
comment:$("#comm").val(),
postDate:Date.now()
};
users.push(person);
// i changed this to .html() because val() felt wrong
$("#display").html(users[0].handler+"<br>"+users[0].comment);
});
Use users[0].handler instead of users[0].person.handler. Although the variable is named person, what is actually pushed into the users Array is just a reference to the person Object.
Also, use the .html() method to set the innerHTML of the #display h1 as a h1 does not have a value attribute.
$(document).ready(
function(){
var users = [];
$("#button1").click(function(e){
var person={
handler:$("#handle").val(),
comment:$("#comm").val(),
postDate:Date.now()
};
users.push(person);
e.preventDefault();
$("#display").html(users[0].handler+"<br>"+users[0].comment);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label for="exampleFormControlInput1">handle</label>
<input type="text" class="form-control" id="handle" placeholder="#joe">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="comm" rows="3" placeholder="Bad match last night, Joe sucked"></textarea>
</div>
<button id="button1" type="submit" class="btn btn-primary">Post</button>
</form>
<h1 id="display"></h1>
i have a form which sends the following data to the server:
<!-- This form pulls, using JS event handlers, data from the table record selected -->
<form id="edit_form" action="" method="POST" role="form">
{{ csrf_field() }}
{{ method_field('PATCH') }}
<div class="form-group">
<label>ID do Cartão</label>
<input type="text" class="form-control" name="idcartao_edit" placeholder="ID do Cartão" value="" />
</div>
<div class="form-group">
<label>Nome do aluno</label>
<input type="text" class="form-control"
name="nome_aluno_edit" placeholder="Nome do Aluno" value="" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email_edit" placeholder="E-mail" value="" />
</div>
<div class="form-group">
<label>Curso</label>
<select id="curso_edit" class="form-control" name="curso_edit">
<option>Seleccionar curso...</option>
#foreach($curso_list as $curso)
<option value="{{$curso->encrypted_id}}">{{$curso->curso}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label>Triénio</label>
<!-- Trigerred by a JS event handler when a curso_edit option is selected -->
<select id="trienio_edit" class="form-control" name="trienio_edit">
<option>Seleccionar triénio...</option>
</select>
</div>
<!-- Triggered when user opens a bootstrap modal. Pulls the value from the table record selected -->
<input type="hidden" id="idcartao_original" name="idcartao_original" value="" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Editar aluno</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</form>
on the server side, the data inputed by the user is processed like this:
public function update(Request $request, Aluno $aluno)
{
$id_aluno = $aluno->where('id_cartao', '=', $request->input('idcartao_original'))->first()->id;
$aluno = $aluno->find($id_aluno);
$aluno->id_cartao = $request->input('idcartao_edit');
$aluno->nome = $request->input('nome_aluno_edit');
$aluno->email = $request->input('email_edit');
$aluno->trienio_id = decrypt($request->input('trienio_edit'));
$aluno->save();
return redirect()->route('alunos');
}
the problem with this form is that the user can change the id to a different one, and the query will load an entirely non-intended different user. like changing the value from 1 to 2, for example, on this input field:
<input type="hidden" id="idcartao_original" name="idcartao_original" value="" />
so instead of loading a model like this:
ID: 1
ID Cartão: 1011000
Nome: Joseph Wilson
E-mail: joseph.67#gmail.com
it will load a model like this:
ID: 2
ID Cartão: 1011001
Nome: John Black
E-mail: johnblackwilliams#gmail.com
and proceed to change the data of a, like i said, an entirely non-intentional different model.
i've already tried to send encrypted ids using an ajax call to the server but considering the inputs can end up like this:
curso_edit option (the encrypted values are the encrypted ids of the "TAI" option, for example)
<option value="eyJpdiI6ImJqZGJKOGVBOFMyQ0huUXdKVHhFMXc9PSIsInZhbHVlIjoidWpROWRrSUFYREszbTF2Q24zTkVoZz09IiwibWFjIjoiM2QxYWViNzU0NWIyN2M2ZGQzMmMwYWJjYWUxZTAyYzBkOGNlNWQ0MDAzMjIyNzA1YWExNzg5ODA2MmNhYjBiMCJ9">TAI</option>
<option value="eyJpdiI6IjRVMWowT0cwYWxVeWpOXC9YaW0yRlJnPT0iLCJ2YWx1ZSI6IkF1VmZoTGdPT3BsTnR3MWV0bXhGdkE9PSIsIm1hYyI6ImY2ZDRiOGIyZDFmMjdmNjhkYzA4ZDMzNGVmNzY2NWZkYzhiMzA1ODljMmM1Njk3ODA1ZGFkZjQ4MWI5ZGM4MzcifQ==">TAL</option>
and so on...
trienio_edit option
<option value="eyJpdiI6ImpmTjBHSk8zTzQ0NmFLR0t1SkxhVXc9PSIsInZhbHVlIjoiOTFYOEluYXFWQk4xMVYxYk1JUHZ0Zz09IiwibWFjIjoiMWZhZDU0NmE2MWQwODliYzg3ZDEzM2Q5NTM3NWJiYTUxMzM5ZTQyMjMwMDBjZDI2OGE4ODEyZjAzNjk3MTVlYyJ9">2015-2018</option>
<option value="eyJpdiI6IjhvUTNGbnNZbG1Ja0d0NktFZFRNaGc9PSIsInZhbHVlIjoicGdKeWtZa1VEeHpDTzQ5QVFhRHcrdz09IiwibWFjIjoiM2EwM2IzZDY3Y2VmZWI4N2QzNTUyZGVlMTUxNjVkZjFiOWUzNGViYjdiNTFiMGZmMDEwMjBhY2JlYTg3ZDg3MiJ9">2014-2017</option>
and so on...
even if the user doesn't have access to the ids in their raw state, he can still inspect the element using chrome or other browser and pull the encrypted id corresponding to the curso/trienio they want to maliciously change (those present in the options)
so even if i send an ajax call to the server in order to pull an encrypted id corresponding to the item being altered in the form like this:
query by corresponding encrypted curso_edit id/value, encrypted trienio_edit id/value, unique email
the user can inspect the javascript code, replace the encrypted curso_edit, trienio_edit value, and e-mail by another one present in the options above.
how can i fix this ?
p.s - dont be too harsh on me. this problem is somewhat difficult to explain and i've tried my best to explain it, if you need more details say
by the way: i've organized the model by id, id cartao, nome, email and by using relationships, trienio and curso. this is somewhat a school management system, and by virtue of that, anybody that knows this info: course (curso), year (trienio), card id (id cartao, those are school cards with an id on it) ,name (nome) and email of a student will easily guess the columns values. i need something stronger and unguessable. and considering a school environment, those informations are very easily obtainable
So, I'm a bit in unfamiliar territory with json and remote calls but the url and datatype is correct and... it is clearly arriving at target. BUT.!
It's a very simple form with 3 visible and 2 hidden fields.
<form id="subChange" action="#" method="POST">
<div style="clear:both;">first name</div>
<div>
<input id="fart" type="text" style="margin:4px;width:90%;" name="newFirst" value="" data-validetta="required,characters,remote[check_update]">
</div> last name<BR>
<div>
<input type="text" style="margin:4px;width:90%;" name="newLast" value="" data-validetta="required,characters,remote[check_update]">
</div> eMail<BR>
<div>
<input type="hidden" name="oldName" value="Conor" data-validetta="remote[check_update]">
</div>
<div>
<input type="hidden" name="oldEmail" value="cburkeg#gmail.com" data-validetta="remote[check_update]">
</div>
<div>
<input type="text" style="margin:4px;width:90%;" name="newEmail" value="" data-validetta="required,email,remote[check_update]">
</div>
<div style="margin-top:12px">
<input type="submit" name="sub_change" value="change it" data-validetta="remote[check_update]">
</div>
</form>
Here is the js
<script type="text/javascript">
$(function(){
$("#subChange").validetta({
realTime : true,
bubbleLoc:"right",
onValid : function( event ){
event.preventDefault();
$("#changeDIV").html("thanks Conor <P>Your subscription has been updated");
},
remote : { check_update : { type : "POST", url : "checkNewsUpdate.php", datatype : "json" }}
});
})
</script>
With fields filled we test Submit; name='sub_change' value='change it'
if (isset($_POST['sub_change'])) {
$count = count($_POST);
$postdata = file_get_contents("php://input"); //... write to file, etc.
}
output -
$count: 1
$postdata: sub_change=change+it
What happened to the other fields?
My only current working solution is to set each field with the remote call and set a $_POST validation (done auto., in real time) for each input which writes to a remote file. On submit we then call the contents of that file. Only trouble is it misses the 2 hidden files - there is no auto trigger :(
This is a clumsy work-around (that doesn't even work).
I thought about setting the hidden fields as an ID but getting the value with PHP is a trial. There must be something real simple I am missing here.
I have to forms on my website, when second form is filled up (after click save button) im copying this form and inserting it into first form. Unfortunately when I submit this form, data in inserted elements are empty.
My code:
var objToCopy = $('.partnersForm').find('.modal-body').clone();
objToCopy.find('[name]').each(function(){
var objThs = $(this);
objThs.prop('name', '_' + objThs.prop('name'));
objThs.prop('id', '_' + objThs.prop('id'));
});
$('.partnersData').html(objToCopy);
And data looks like this:
[contact_county] => Hampshire
[country] => GB
[contact_title] => 4
[contact_name] => gfhf
[contact_surname] => fghfgh
[_partner_mobile] =>
[_partner_nationality] =>
[_partner_dob] =>
[_partner_email] =>
Where empty data come from inserted elements.
When I remove second form manually after insertion, then everything seems to work.
But I don't understant why I cant send this data even when I change names of inputs.
Simplified HTML structure:
<form id="form1">
<input type="text" name="contact_county" id="contact_county">
<input name="country" id="country">
<input name="contact_title" id="contact_title">
<input name="contact_name" id="contact_name">
<input name="contact_surname" id="contact_surname">
<div class="partnersData" id="partnersData">
<!-- inserted elements goes here -->
</div>
<button type="submit">Submit</button>
</form>
<form class="partnersForm" id="form2">
<div class="modal-body">
<input type="text" name="partner_mobile" id="partner_mobile">
<input type="text" name="partner_nationality" id="partner_nationality">
<input type="text" name="partner_dob" id="partner_dob">
<input type="text" name="partner_email" id="partner_email">
</div>
<div class="modal-foter">
Save
</div>
</form>
Instead of $('.partnersForm').find('.modal-body').clone();, you should use $('.partnersForm').find('.modal-body').clone(true);. When you are making the clone, only the form and associated controls are getting cloned, but the values are getting emptied. Passing "true" as the parameter to clone, the values inside the control will also get cloned.
For details, Check the JQuery Documentation to clone().