Its hard to say shortly.. but i'll try...
I have a form, that generated with jquery. In this form dynamicaly filled fields, what I need to send to PHP:
function openCropSettings (id) {
target = '<img src="'+'uploads/'+getCookie("fo_randomPath")+'/'+$("li[data-jfiler-index="+id+"]").find(".fo_item-name").text()+"?timestamp=" + new Date().getTime()+'" id="target" />';
settings_template =
'<div class="fo_target-container">'
+target+
'<form class="fo_submit_crop" id="fo_crop-form" onsubmit="return checkCoords();" action="#" >\
<input type="hidden" id="x" name="x" />\
<input type="hidden" id="y" name="y" />\
<input type="hidden" id="w" name="w" />\
<input type="hidden" id="h" name="h" />\
<input type="hidden" id="image_id" name="image_id" value="'+id+'"/>\
<input type="hidden" id="image_name" name="image_name" value="'+image_name+'"/>\
<input type="hidden" id="path" name="path" value="'+path+'"/>\
<textarea id="fo_add-crop-comment" name="textarea" placeholder="Can leave a comment here..."></textarea>\
<input type="submit" id="submitCrop" value="" />\
<input class="button_cancel" type="button" />\
<input class="button_rotate" type="button" value="" />\
</form>\
</div>';
$(".fo_crop-settings").html(settings_template);
$(".fo_crop-settings").css('margin-top', '0px');
$(target).on('load', function(){
$('#target').Jcrop({
boxWidth: limitsW,
boxHeight: limitsH,
allowSelect: false,
bgOpacity: 0.3,
onSelect: updateCoords
}, function(){
$("#submitCrop").click(function(e){
e.preventDefault();
$(".fo_confirm").css('margin-top', '0');
});
$("#confirm_abort").click(function() {
$(".fo_confirm").css('margin-top', '-120px');
});
$("#confirm_confirmation").click(function() {
form_data = $(".fo_submit_crop").serialize();
$.post('uploader/ajax_upload_file.php', form_data, function(data){
/*
Here I collect PHP respons, that give me a data with new(croped) image properies. And after this, generate new thumb on page with custom function:*/
createMask($(thumbMaskPlace), orientations, formatRatio, widthless, data[1], data[2], dontCrop, border);
$(target).html(thumbImage);
console.log(data);
});
});
$(".button_cancel").click(function() {
$(".fo_crop-settings").html('');
});
});
});
}
This form can be created several time at single session(may be a lot times). The problem appear then I use it second, third and all next times. Each time, response from PHP increase at 1. So.. second send of form data, take two responses. Third three responses.. Response contains corresponding reiteration of current sended data and look like this(This is console.log(data) at end of function):
controller.js:572 ["0", "700", "469", "hor", "0.67"]
controller.js:572 ["0", "700", "469", "hor", "0.67"]
controller.js:572 ["1", "256", "172", "hor", "0.67"]
controller.js:572 ["1", "256", "172", "hor", "0.67"]
controller.js:572 ["1", "256", "172", "hor", "0.67"]
controller.js:572 ["2", "232", "155", "hor", "0.67"]
controller.js:572 ["2", "231", "155", "hor", "0.67"]
controller.js:572 ["2", "231", "155", "hor", "0.67"]
controller.js:572 ["2", "231", "155", "hor", "0.67"]
And PHP work on it every single iterate... (((
If I use it like this:
$("#submitCrop").click(function() {
e.preventDefault();
form_data = $(".fo_submit_crop").serialize();
$.post('uploader/ajax_upload_file.php', form_data, function(data)
everything work fine... but now I have skiped confirmation from user process.
Please note that I have intentionally removed some lines of code in which a calculated variables used further in form and in code
So... what can I do, to have confirmation and correct response process?
Sorry if all this look not so good.... I was trying.
Problem was solved with: unbind()
$("#confirm_confirmation").unbind() //<===here the problem is solved!
$("#confirm_confirmation").click(function() {
form_data = $(".fo_submit_crop").serialize();
$.post('uploader/ajax_upload_file.php', form_data, function(data)......
Related
Using Elementor to insert custom HTML code.
But it's not working. Many HTML elements are not rendered on the page at all. They seem to dissappear.
As you can see the <form> <input> and <script> tags are ignored
Inserted HTML:
<form name="landingForm" onsubmit="createObject(); return false">
<label for="your_name">För- och efternamn</label>
<input type="text" id="your_name" required=""><br>
<label for="your_email">E-post</label>
<input type="email" id="your_email" required=""><br>
<label for="your_tel">Telefon</label>
<input type="text" id="your_tel" required=""><br>
<label for="your_job">Jobb-titel</label>
<input type="text" id="your_job" required=""><br>
<label for="your_account">Företag</label>
<input type="text" id="your_account" required=""><br>
<label for="agree"> Jag godkänner att mina uppgifter lagras av Chessit</label>
<input type="checkbox" id="agree" name="agree" value="agree" required=""><br>
<input type="submit" id="btnSubmit" value="Registrera">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://webtracking-v01.bpmonline.com/JS/track-cookies.js"></script>
<script src="https://webtracking-v01.bpmonline.com/JS/create-object.js"></script>
<script>
var config = {
fields: {
"Contact": "#your_name", // Name of a contact, registering to the event
"Contact.MobilePhone": "#your_tel", // Contact's mobile phone
"Contact.JobTitle": "#your_job", // Contact's job title
"Contact.Email": "#your_email", // Contact's email
"Contact.Account": "#your_account"
},
contactFields: {
"FullName": "#your_name", // Name of a contact
"Phone": "#your_tel", // Contact's mobile phone
"Email": "#your_email", // Contact's email
"Account": "#your_account"
},
customFields: {},
landingId: "a52586c3-numbers",
serviceUrl: "https://aUrl.com",
redirectUrl: ""
};
function createObject() {
landing.createObjectFromLanding(config);
}
function initLanding() {
landing.initLanding(config)
}
jQuery(document).ready(initLanding)
</script>
Rendered HTML
<div class="elementor-widget-container">
<label for="your_name">För- och efternamn</label>
<br>
<label for="your_email">E-post</label>
<br>
<label for="your_tel">Telefon</label>
<br>
<label for="your_job">Jobb-titel</label>
<br>
<label for="your_account">Företag</label>
<br>
<label for="agree"> Jag godkänner att mina uppgifter lagras av Chessit</label>
<br>
var config = {
fields: {
"Contact": "#your_name", // Name of a contact, registering to the event
"Contact.MobilePhone": "#your_tel", // Contact's mobile phone
"Contact.JobTitle": "#your_job", // Contact's job title
"Contact.Email": "#your_email", // Contact's email
"Contact.Account": "#your_account"
},
contactFields: {
"FullName": "#your_name", // Name of a contact
"Phone": "#your_tel", // Contact's mobile phone
"Email": "#your_email", // Contact's email
"Account": "#your_account"
},
customFields: {},
landingId: "a52586c3-numbers",
serviceUrl: "https://aUrl.com",
redirectUrl: ""
};
function createObject() {
landing.createObjectFromLanding(config);
}
function initLanding() {
landing.initLanding(config)
}
jQuery(document).ready(initLanding)
</div>
Why aren't my script tags rendered? It's so strange.
Is Elementor supposed to honor my custom html or is it forcing me to use WordPress-form or something else other than basic HTML form?
you have to use html widgets for custom html so your whole code was rendered with form, js
I am new in SilverStripe. I want to create a custom HTML form in SilverStripe.
<form class="form-inline" $HelloForm.FormAttributes>
<p id="{$HelloForm.FormName}_success" class="message" style="">$HelloForm.Message</p>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
</div>
$HelloForm.fields
<input type="hidden" value="{$AbsoluteLink}" name="redirectURL" class="action" id="{$HelloForm.FormName}_action_doSayHello"/>
And in my controller
public function HelloForm()
{
$form = Form::create(
$this,
'HelloForm'
);
$actions = new FieldList(
FormAction::create('doSayHello', 'Submit')->setAttribute('class', 'btn btn-success')
);
$form = new Form($this, 'HelloForm',$actions);
return $form;
}
public function doSayHello($data,$form)
{
$form->sessionMessage('thanks for contact us','good');
return $this->redirectBack();
//i am not getting success message after submit
}
Can I get a success message after submitting in this case?
When I use standard SilverStripe form it's working but when using custom HTML form like above I am stuck
You could submit the form via ajax, which would have many advantages.
The page does not have to refresh itself
You can animate the form after submitting, by sliding up or some kind of similar animation.
You can handle form states like success or error
Some example code (in jQuery):
let form = $('.form-inline');
$(form).ajaxSubmit({
success: function() {
$(form).slideUp();
$('#form-state').text("Successfully submitted form.");
}
})
I have been given the following POST instruction, and I am trying to translate it into httr:
<form method="POST" action="https://this.website.com/foldername>
<input type="hidden" name="ExternalAction" value="AgetAscii">
File Type <input type="text" name="filechar" value="0">
<input type="submit" value="Click here to Retrieve the File"/>
</form>
I am having trouble getting the right syntax for httr. I would welcome suggestions. The initial input type, name and value seem straight forward, but I don't see how I bring the File Type arguments into httr, nor am I confident I am handling the final "submit" and value items properly.
I'd welcome suggestions.
Many thanks
If I paste that example html into an local html file and substitute the action to be http://bin.org/post like so:
<form method="POST" action="http://httpbin.org/post">
<input type="hidden" name="ExternalAction" value="AgetAscii">
File Type <input type="text" name="filechar" value="0">
<input type="submit" value="Click here to Retrieve the File"/>
</form>
Then the only form data reported back by httpbin.org as having been received are for ExternalAction and filechar. Therefore, to send this data via httr::POST() you would do:
library(httr)
action <- "https://this.website.com/foldername"
body <- list(ExternalAction = "AgetAscii",
filechar = "0")
POST(url = action, body = body)
I am having issues trying to bind data on a simple form. I am using a mock server and have successfully bind data to a list/table
My manifest.json looks like this
"mock": {
"dataSource": "mainService"
}
My mockdata(UserDetailsSet.json) looks like this
[{
"ID_PassNum": "cu001",
"Title": "Mr",
"Name": "Don",
"Surname": "Ownery",
"ResType": "SA",
"Country": "South Africa"
}]
My SimpleForm fields looks like this
<Label text="Name" />
<Input value="{mock>/UserDetailsSet/0/Name}" />
<Label text="Surname" />
<Input value="{mock>/UserDetailsSet/0/Surname}"/>
What am I missing?
You seem to be using an ODataModel. In ODataModels binding against collections/aggregations is not as easy as it is with a JSONModel. You can't access/bind properties with the collection/index/property syntax.
How ODataModels store data
If you load an entity set like your UserDetailSet the data stored in you ODataModel like look somewhat like this:
{
UserDetailSet('00001'): { ... },
UserDetailSet('00002'): { ... },
UserDetailSet('00003'): { ... },
UserDetailSet('00004'): { ... }
}
Whereas '00001' and so forth is the entities key. If you create an aggregation binding on UserDetailSet the ODataListBinding will handle translating the above data into a context per item.
Property Binding on ODataModel
Your binding would have to look like this:
<Label text="Name" />
<Input value="{mock>/UserDetailSet('00001')/Name}" />
<Label text="Surname" />
<Input value="{mock>/UserDetailSet('00001')/Surname}"/>
Dynamic Property Binding on ODataModel
Or - to be a little more dynamic - bind like this (Note: the bindings are relative now, no leading /):
<SimpleForm id="MyForm">
<Label text="Name" />
<Input value="{mock>Name}" />
<Label text="Surname" />
<Input value="{mock>Surname}"/>
</SimpleForm>
and dynamically use bindElement on the SimpleForm itself:
this.getView().byId("MyForm").bindElement({
path: "/UserDetailSet('"+ sUserID +"')",
model: "MyOdataModelID",
// use OData parameters here if needed
parameters: {
"expand": "UserAdress"
},
// react on binding events here
events: {
change: function (oEv) { },
dataRequested: function (oEv) { },
dataReceived: function (oEv) {}
}
});
BR
Chris
binding should be like this
<Label text="Name" />
<Input value="{mock>Name}" />
<Label text="Surname" />
<Input value="{mock>Surname}"/>
if its only one object in the mock. if not working put the controller code where you setting model to the view
I'm using laravel/phpunit tests and I would like to test a multidimensional form, this fields below works well except when I'm testing.
<input type="number" class="form-control" name="practice_options[{{$diff}}][tries]">
<input type="number" class="form-control" name="practice_options[{{$diff}}][questions][easy]">
<input type="number" class="form-control" name="practice_options[{{$diff}}][questions][easy]">
<input type="number" class="form-control" name="practice_options[{{$diff}}][questions][easy]">
<input type="number" class="form-control" name="practice_options[{{$diff}}][time_limit]">
This is my test:
$input = [
'practice_options[easy][tries]' => "1",
'practice_options[easy][questions][easy]' => "10",
'practice_options[easy][questions][medium]' => "7",
'practice_options[easy][questions][hard]' => "3",
'practice_options[easy][time_limit]' => "300"
];
$this->actingAsAdmin()
->visit('/courses/1/practice')
->submitForm(trans('admin::layout.save'), $input);
But dont works I get this error in tests
InvalidArgumentException: Unreachable field "practice_options"
Please help how to make test with multidimensional fields to pass
Thanks in advance!
I solved this, the crawler dont recognizes if you open a form in #section and close in another #section in same page.
In my specific case, because of layout I open a form in Header #section and my submit button was also in this section, and I create my fields in the below section and close the form.
I put all in the same section and worked, crawler founds all !