Basically I've made a form in Cakephp 2.1 with a jQuery button that appends an input field and adds a count to each of the newly created input like so:
<input type="text" name="data[foo][link]" /> // Original input
<input type="text" name="data[foo][1][link]" /> // Appended inputs
<input type="text" name="data[foo][2][link]" />
<input type="text" name="data[foo][3][link]" />
My question is if it's possible to get all of these inputs to save into the same [foo][link] table in the database (preferably as an array)?
Thanks heaps.
public beforeSave() {
if (isset($this->data['Foo'])) {
$this->data['YourModel']['realField'] = serialize($this->data['Foo']);
}
return true;
}
In the afterFind() you revert that by using unserialize();
data[foo][link] Should be data[foo][0][link].
Related
form field image
how do I receive identical form field separately so I can add them to the database. like 3 email input fields or so...
Your question requires more clarification.
If you are using single submit button it can be either of two things, if you are using controlled inputs, as soon as your form is submitted, you can use your state to pass all the data to the backend.
For controlled input you will need to pass onChange handler in each input. Since you are using identical fields I suggest using array of objects and use the index of the array to update the data in the specific index.
If you are using uncontrolled input then you can use form data to retrieve values from the form.
Do remember that you need 'name' in each input for this work.
<form onSubmit={savePassengerSeats}>
<label>
Full Name
<input type="text" id="fullName" name="fullName" />
</label>
<label>
Mobile
<input type="number" id="mobile" name="mobile" />
</label>
<! -- other input -->
<button>Save</button>
</form>
const savePassengerSeats = (event)=>{
const formData = new FormData(event.target)
//use this form data to save data in the db
}
pattern="[a-zA-Z ]*"
im trying to limit the input to be only letters no numbers or symbols should be allowed
but the given code is not working
<input
name="cardName"
type="text"
required
pattern="[a-zA-Z ]*"
defaultValue={kardName}
/>
i have also tried to use onChange method but it wasn't working too
anyhelp would be highly apperciated
The pattern attribute specifies a regular expression that the element's value is checked against on form submission.
You can see from the snippet below, that if you hit submit, the pattern is checked and it's actually working.
<form>
<input
name="cardName"
type="text"
required
pattern="[a-zA-Z ]*"
/>
<input type="submit" />
</form>
If you want to prevent the user from inserting some character, the pattern attribute won't help you.
What You can do is check the character inside the onKeyDown function, and prevent the insertion there. Something like this:
const onKeyDown = (event) => {
if (!event.key.match(/[A-Za-z ]/)) {
event.preventDefault()
}
...
<input
name="cardName"
type="text"
required
onKeyDown={onKeyDown}
/>
I have a form made with angular, one of the inputs is autocompleted with google maps. The problem is that if I write "Mad" and the autocomplete fills it with "Madrid" when the form is sent there is only "Mad" instead of "Madrid" and the same for longer addresses.
I had a similar problem autofilling the latitude and longitude obtained with the place of the autocomplete, but I solved it. I tried the same with the autocomplete input and is not working.
This is part of my form:
<fieldset class="form-group">
<input ng-model="newCtrl.event.formatted_addres" type="text"
ID="location-placheholder" class="form-control"
placeholder="Where will be the event?"
title="Location" required />
</fieldset>
<fieldset ng-show ="false" class="form-group">
<input ng-model="newCtrl.event.longitude" type="float"
ID="location-longitude" class="form-control"
title="Location-longitude" required />
</fieldset>
<fieldset ng-show ="false" class="form-group">
<input ng-model="newCtrl.event.latitude" type="float"
ID="location-latitude" class="form-control"
title="Location-latitude" required />
</fieldset>
and this is the autocomplete function for the formatted_address field:
function setupAutocomplete(){
var input = $('#location-placheholder')[0];
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function(){
var place = autocomplete.getPlace();
var infowindow = new google.maps.InfoWindow({
});
if (place.geometry.location) {
$("#location-longitude").val(place.geometry.location.lng().toFixed(7));
$("#location-longitude").trigger('input');
$("#location-latitude").val(place.geometry.location.lat().toFixed(7));
$("#location-latitude").trigger('input');
$("location-placeholder").val(place.formatted_address);
$("location-placeholder").trigger('input');
map.setCenter(place.geometry.location);
createMarker(place.geometry.location, place.formatted_address);
} else {
alert("The place has no location...?")
};
});
};
When I do
$("#location-latitude").val(place.geometry.location.lat().toFixed(7));
$("#location-latitude").trigger('input');
The input of latitude fills correctly and is sent correctly, but if I do:
$("location-placeholder").val(place.formatted_address);
$("location-placeholder").trigger('input');
It keeps sending only the part of the address that I have already written, not the rest of the address filled with the autocomplete.
Thanks
I add a fiddle with my code, I've been trying to make it work without the $http requests, but I couldn't. So I hope this is enough to evaluate my code.
http://jsfiddle.net/sjc7jtbp/1
Finally I solved it, for some reason ajax was not targeting the input. So I created a new input hidden with ng-show="false" and I labelled it as class="autofill".
So later I aimed at it as $('.autofill') and it worked. The rest is submit this input and not the original one. Maybe it is not an elegant solution, but it works.
I have this form with get set as method.
<form method="get" action="index.html">
<input type="checkbox" name="item" value="1" />
<input type="checkbox" name="item" value="2" />
<input type="submit" />
</form>
When I submit, i end up with the url
index.html?item=1&item=2
I wonder if it is possible to make a more neat format like comma-seperation, for instance
index.html?item=1,2
I have been searching for a while, but I cannot find how to obtain this. Do I really need to implement this with javascript?
function submitForm(){
var name=document.getElementsByName('item[]');
var str="";
for(i=0;i<(name.length);i++){
if(name[i].checked){
str+=name[i].value+",";
}
}
if(str.length>0){str=str.substring(0,str.length-1)};// remove the last comma
var url="actionpage.html?item="+str;
document.getElementById('formid').action=url;
document.getElementById('formid').submit();
}
Please rename the checkbox to item[], this will create an array. Then call this function in your button click event.
Folks,
I have a form with multiple input fields. When the form loads, I want the focus to go on a particular field.
So consider a form like this:
<form>
<input type="text" ng-model="fname" get-focus>
<input type="text" ng-model="lname">
</form>
I have written a basic directive as such:
.directive('GetFocus',function(){
return {
link: function(scope,element,attrs) {
//what function call to use here ?
}
}
});