I get data of the form using this:
form = $(this).parents('form');
And then using jQuery form I send it via:
form.ajaxSubmit()
But prior to that, I want to append a value to my form. How should I do this?
It is worth mentioning that I cannot access the form html markup to add a hidden input field
and that's why I need to do it in jquery.
By value I mean a key&value pair, as if belongs to an input.
You can pass it in the url string like
form.ajaxSubmit({
url: 'controllers/orders.php?mykey=' + encodeURIComponent('myvalue')
})
Or use a dynamic hidden field like
var input = form.find('input[name="mykey"]');
if (!input.length) {
input = $('<input />', {
name: 'mykey',
type: 'hidden'
}).appendTo(form);
}
input.val(myvalue)
Related
I created a form using Elementor Pro Form widget. Now I want to write some code and I need to get the value of the input fields from the Elementor Pro Form. How can I do that?
Here is what I did:
Created a form with the Elementor Pro Form widget. Fields: Email, Website URL. I added ID to both of them.
Email input field id: email
Website URL input field ID: websiteurl
Submit button ID: analysee
Imported HTML widget to my page and tried to DOM the value of the Website URL input field. I added an Event Listener to the button (that works). When the button is clicked it should alert the value of the Website URL input field.
When I do that I get the following error:
Uncaught TypeError: Cannot read properties of null (reading 'value')
at HTMLButtonElement.<anonymous>
Here is my code:
<script>
let analyse_dugme = document.getElementById("analysee");
let website_url = document.getElementById("websiteurl");
analyse_dugme.addEventListener("click", function(){
alert(website_url.value);
});
</script>
How can I solve this?
Thank you for your time.
You can use the val() property to retrieve the input's value, by doing something like this:
jQuery(document).ready(function($) {
$('#theForm').submit(function() { // #theForm to select the whole form
let analyse_dugme = $("#email").val(); // get the email value
let website_url = $("#websiteurl").val(); // get the website url value
});
});
Or you can do something like this and get an associative array with just the values:
$('#theForm').submit(function() {
var $inputs = $('#theForm :input');
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
});
I'm using X-Editable to give users the possibility to edit values inline. This works great, but I now want to use it for some money values which are localized in a "European way" (e.g.: € 12.000.000,00). When I click edit, I want the input to only contain 12000000 though.
Is there a way that I can sanitize the value in X-editable before it gets displayed in the X-Editable input? All tips are welcome!
See the plunker http://plnkr.co/edit/Vu78gRmlKzxrAGwCFy0b. From X-editable documentation it is evident you can use value property of configuration to format the value you want to send to the editor as shown below.
Element displaying money value in your HTML:
12.000.000,00
Javascript code in your HTML:
<script type="text/javascript">
$(document).ready(function() {
$.fn.editable.defaults.mode = 'inline';
$('#money').editable({
type: 'text',
pk: 1, //Whatever is pk of the data
url: '/post', //Post URL
title: 'Enter money', //The title you want to display when editing
value:function(input) {
return $('#money').text().replace(/\./g, '').replace(/,00$/,'');
}
});
});
</script>
If you want to format the value back for display after editing you can do that in display property of the configuration hash like this:
$('#money').editable({
type: 'text',
pk: 1, //Whatever is pk of the data
url: '/post', //Post URL
title: 'Enter money', //The title you want to display when editing
value:function() {
return $('#money').text().replace(/\./g, '').replace(/,00$/,'');
},
display:function(value) {
//var formattedValue = formatTheValueAsYouWant(value);
//$('#money').text(formattedValue);
}
});
Seems like there is no callback function available for what you want.
so You need to make it outside of the library.
here is how to do it.
$(document).on("focus",".form-control.input-sm",function(){
//remove all characters but numbers
var _val = $(this).val().match(/\d/g).join("");
//set it.
$(this).val(_val);
});
replace the part of .form-control.input-sm into your case.
I just tested this on the library's demo site's first demo fieled named "Simple text field" with chrome developper tools
http://vitalets.github.io/x-editable/demo-bs3.html
Since x-editable form would be generated right before showing up.You need to hook an event to document and wait for input field inside of x-editable form gets focus which is the time x-editable shows up and edit the value into whatever you want.
and Yes, This method works AFTER the input field shows up but It's hardly possible to notice that value is changing after it gets displayed.
I'm currently working a page that lists a lot of users inside a table using a role id.
The role id value is gathered using the select dropdown and then pressing submit. This shows the table below with all the users with that specific role. The way this is done is that when the form is submitted, the id is returned inside the $_POST of my select box. What i want to do is not use a submit button at all, I want to be able to scroll through the different roles, and when I click on a different role within the select, it update the table below automatically without needing to post.
Let's say my select box is called role:
<select id="role">
And the options are:
id: 1, name: blah1
id: 2, name: blah2
I have been working on trying to get this work using ajax and posting the data back to PHP using the change function. Here is my code:
$(document).ready(function() {
$('#role').change(function(){
var role_id = $('#role').val();
$.ajax({
url: 'assign-roles-2.php',
data: {"roleID":role_id},
type: 'post',
success:function(data){
$('#section').slideDown();
}
});
});
$('#role').trigger("change");
});
I have this in PHP also:
$role_id = trim($_POST["roleID"]);
But this returns as null. How would I go about getting the value I get from the select input and use it to set this role_id variable in PHP without submitting a form?
I am assuming that your description of your option elements: id: 1, name: blah1 does not reflect their markup and that they are defined like so...
<option value="1">blah1</option>
If so, then the following should work fine.
var role_id = $('#role').find('option:selected').val();
I'd like to find any generic method to change data before sending forms. It is, if I have a <form> that contains a <input> of certain type (class) and user press send button, I'd like to transform this input value to another format so it arrive to server in a corrected format.
I know I can set a submit() handler to process data, but I need a generic solution that setup this mechanism on load on all page forms and forgets about it (perhaps some forms are sent by AJAX, other use Jquery.validate to send, etc)
Use jQuery's to select all form elements: $('form') and register a handler for the form submit event. Something like this:
$('form').submit(function(e){
e.preventDefault()
var $this = $(this)
var formData = $this.serialize()
// do some thing to it
var yourData = transform(formData)
$.ajax({
post: $this.attr('action'),
data: yourData,
...
})
})
References
submit()
jQuery CSS Selector
Form serialize()
Perhaps this
$(document).ready(function() {
$("form").on("submit",function() {
var form = $(this);
var field = form.find("input[name=first_name]");
if (field.length()>0) field.val(field.val().replace("a","b"));
});
});
Yes, why not?
Have an onclick on the form submit button and there you can do whatever you like before you invoke submit(). To add a same function to all input type submit, then iterate over all input elements with the type=buttons and add your onclick handler function to it.
All your forms need to be of the same kind, or if some use input type=submit while others use a button element with your own javascript then you will have to adjust for that.
Is there a way to can access and manipulate the POST params after a form submit has been made. To be more specific, in my submit event handler, how can I do something like
$("#form").submit()
{
//access the request params and manipulate them here
return true;
}
instead of the following hack which I find to be not that elegant.
$("#submit_button").click()
{
// Construct the Request 'params' manually
$.post("/foo/action", params, redirectIfSuccess);
}
You can do it before form submit. Just check the variables in the form on submit event change one or more of them and submit with new data.
$("#form").submit(function() {
$("#form #myInputField").val("Some text here");
return true;
});
With ("#myInputField") you select the input field or you can use ("input[name='myInputField']") to select a input on its name attribute.
After that you can use val() to get or val("Some text") to set the value of the appropriate input. That's all.
To add new input or DOM element you have to use .append(),
Ex:
$("#form").append("<input type="hidden" name="myNewInput" value="1" />");
Have a look here: http://api.jquery.com/append/