I'm using Jquery to allow users to upload an image via Ajax in a form (the image uploads before the form is actually submitted). I've added the ability to add a watermark to each image that is uploaded (this is done in upload_image.php) this part works fine.
The user can select where they want the watermark to be placed on their image via a form select. I'm using Jquery's .val() to grab the value of the id="watermark" select and add it as a query string value to be passed to upload_image.php.
The problem is that it always passes the first select value no matter what I actually select in the form. I tried putting it in a function (thought it was grabbing the value on page load) no luck there. I changed the select to radio buttons. It still grabs the value of the first radio button on the page; no matter what you select.
Here is the portion of the script that handles this:
<script type="text/javascript" >
$(function(){
// build URL to php upload script with watermark placement
function setWatermark() {
var uploadUrl = 'http://www.mysite.com/upload_image.php?w=';
var watermarkValue = $('#watermark').val();
var watermarkUrl = uploadUrl + watermarkValue;
return watermarkUrl;
}
var btnUpload=$('#upload');
new AjaxUpload(btnUpload, {
action: setWatermark(),
name: 'uploadfile',
});
});
</script>
This is the form (with irrelevant fields removed):
<form id="image_form" action="this_form.php" method="post" enctype="multipart/form-data">
<select id="watermark">
<option value="top_left">Top Left</option>
<option value="top_right">Top Right</option>
<option value="center">Center</option>
<option value="bottom_left">Bottom Left</option>
<option value="bottom_right">Bottom Right</option>
</select>
<div id="upload" ><span><img src="upload_button.jpg" /></span></div>
</form>
To execute this code:
new AjaxUpload(btnUpload, {
action: setWatermark(),
name: 'uploadfile',
});
The browser must first construct the arguments to pass to the constructor. To construct the second argument, the object, it must call setWatermark to get the value for the action property. This is where your problem is; setWatermark is being called when the AjaxUpload object is created.
I don't know what AjaxUpload is, but you'll have to find a way to get it to call a function when it needs the action rather than it being provided as a constant in the options.
Related
I have an Index.html file in which I am giving two options two different values (Yes or No).
Issue:
I want to validate with those values in JS but when I am doing it can't hold the value of that.
What I Have:
Index.html:
<select id="sel">
<option value="yes" >Yes</option>
<option value="no" >No</option>
</select>
Valid.js:
var sel=document.getElementById("sel").value;
localStorage.setItem("sel", sel);
Calculate.js:
I have to validated here I have connected Confirm.html with form action in Index.html.
In confirm.html I am loading init() method of calculate.js
var sel = localStorage.getItem("sel");
Assuming that the code for the validation and calculation are both in different files I would highly recommend checking the order in which you load the scripts in your HTML file, alternatively you could just attach an event listener to the selection tag which would trigger each time the user changes the selection like so;
document
.getElementById('sel')
.addEventListener('change', function(event) {
localStorage.setItem("sel", this.value);
})
and then when validating input check whether the "sel" value is present within the localStorage just as you originally planned.
I am creating a page that needs to send post data using Ajax (JQuery).
The (most relevant) HTML code is the following:
<div class="command-list">
<form action="app_page.php" method="post">
<select name="TYPE" class="form-control">
<option vaule="VALUE 1">DISPLAYED TEXT 1</option>
<option vaule="VALUE 2">DISPLAYED TEXT 2</option>
</select>
<input type="button" class="ibtnSave" value="Salvar">
</form>
</div>
The JQuery function that is being used to send the form data is:
$(document).ready(function () {
$(".command-list").on("click", ".ibtnSave", function (event) {
var tosave = $(this).closest("form"); // Gets the form that the button belongs to
var r = $.post('app_page.php', tosave.serialize()); // Sends the form data via POST to my application page
});
On the server-side (PHP application), when the POST data is retreived, the values received are either 'DISPLAYED TEXT 1' or 'DISPLAYED TEXT 2' instead of 'VALUE 1' or 'VALUE 2' as expected in a normal form sent via html.
How can I send only the data inside value attribute instead of the text displayed between the option tags?
Summarizing:
Current data being sent: TYPE=DISPLAYED TEXT 1
What I really want to send: TYPE=VALUE 1
EDIT
Status: Problem Solved
I've misspelled 'value' attribute on my HTML code.
On the code above, it says 'vaule' instead of 'value'.
Thanks.
Typo:
<option vaule="VALUE 1">DISPLAYED TEXT 1</option>
^^^ should be value
If an option has no value (in your case due to the typo), the displayed text is used instead.
I have the following HTML code:
<html>
<!-- assume jquery is loaded -->
<body>
<form id="sform" method="get" style="display:none;">
<input type="hidden" name="eid" />
<input type="hidden" name="returnURL" />
<input type="hidden" name="returnID" value="ieid" />
<select id="dropdownlist" name="ieid">
<option selected="selected"></option>
</select>
</form>
</body>
</html>
What happens is the user enters an email address, it checks (server-side with PHP) the credentials and if valid, returns the following JSON object (in this case, assume that the values are valid urls (ie. http://sitehere.com/somethingelse):
{
"get_action" : "geturl",
"eid" : "eidurl",
"return_url" : "returnurl",
"option_url" : "optionurl"
}
This is retrieved when the user hits the login button on the home page. This button triggers a POST request which retrieves the results and parses the JSON into the form above. I then change the values of the form from the original code and the action of the form itself before submitting the form. This is shown below.
$.post('/?c=controller&a=method', {'email' : $('input[name="email"]').val() }, function(data){
var result = $.parseJSON(data);
$('#sform').change_action(result.get_action);
$('input[name="eid"]').change_val(result.eid);
$('input[name="returnURL"]').change_val(result.return_url);
$('select[name="ieid"]').find('option:selected').change_val(result.option_url);
$('#sform').submit();
};
Where change_val() and change_action() are defined like this:
$.fn.change_val = function(v){
return $(this).val(v).trigger("change");
}
$.fn.change_action = function(v){
return $(this).attr('action', v).trigger("change");
}
The reason why I defined these functions was because originally, I had just been calling val('new value'); and the form seemed to not be updating at all. I read that I had to trigger a change when using jQuery to update the form before submitting it.
However, even after triggering a change, it seems like the HTML still isn't updated (at least in Chrome) and the form is not being submitted correctly because none of the values are actually changing.
So, I need to be able to take a parsed result, update the values in the form (with specific id's), and then submit the form so that it re-directs somewhere. Is there a way to do this correctly?
I need some help with sequencing (not sure if this is the right term) two jQuery functions so that both can co-exist together.
What I am trying to do is to add a new functionality that makes a field uneditable to the users, like disabled="disabled". Catch is that if I only apply disabled="disabled" to the filed the form will not send its value with the form submit.
Therefore, I have written some JS code, which enables the fields prior submitting and permits that their values are sent when form is submitted.
All works fine once the page is loaded.
Problem is when the user leaves one of the mandatory fields blank and tries to submit the form. Then there is another jQuery that fires - to validate the field contents.
This second validation function triggers the enable field function and all fields become editable again.
Need some help on how to prevent the second function to override the enable one.
Here is the code - the enable function is placed right before the form like this:
<script>
jQuery(function($) {
$('form').bind('submit', function() {
$(this).find(':input').removeAttr('disabled');
});
});
</script>
<form name="RegFrm" id="RegFrm" action="" method="post">
<select class="validate[required] text-input" disabled="disabled">
<option value="">Please Select</option>
</select>
<input name="sbtFrm" type="submit" value="Submit" />
</form>
And here is the second field validation function that is placed on a separate file. It is being invoked from files_include.php every time the page loads:
var genVar = jQuery.noConflict();
genVar(document).ready(function(){
genVar("#RegFrm").validationEngine();
});
How can I prevent the second function triggers the first one?
Thank you?
Thank you all for the comments. Although, no solution proposed you guys gave me an idea how to fix it.
I basically decided to check on form submit if form validates and only if true, then the enable function triggers.
This is the code:
jQuery(function($) {
$('form').bind('submit', function() {
if($("#RegFrm").validationEngine('validate')){
$(this).find(':input').removeAttr('disabled');
};
});
});
Is there a way to pass a "blank" value to a hidden input type? And when I say blank, I mean an actual whitespace character or something?
For example, I have this select:
<select name="Sample">
<option value="BB515_Hu_CD3" >BB515, Human CD3</option>
</select>
On one form, it's a drop down where a user selects the option. Upon submission, the value of the option gets written to the "Sample" database field.
On another web form that writes to the same database and doesn't have Sample select, I would like to pass a blank value so that the current value in the database field is deleted and empty.
<input type="hidden" value="" name="Sample" />
I can add a dash '-' in the value and then it will overwrite the BB515_Hu_CD3 value with a dash, but I would rather have a blank field then a dash in it. Keeping value="" will just keep the original data which I don't want.
Each form has contact matching enabled on it via email address. So if I use the same email for both forms, the original form submission data will be updated with the second form submission data.
Any ideas on how I can accomplish this?
Thanks in advance.
That hidden field should be in the post array as an empty variable.
On the server side you can just insert into the database whatever value is given for Sample.
For example if you have this:
<select name="Sample">
<option value="" >Choose Sample</option>
<option value="BB515_Hu_CD3" >BB515, Human CD3</option>
</select>
or this
<input type="hidden" value="" name="Sample" />
Then server side:
$data['Sample'] = $_POST['Sample'];//if it is empty it will update the database with an empty string if not then it will update with the value
You can also use a value like - if so, then do this:
if(!empty($_POST['Sample']) && $_POST['Sample'] == '-')
{
$data['Sample'] = "";
}
For the javascript/jquery portion:
// this is the id of the form
$("#idForm").submit(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements automatically
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
alert(data); is where you would handle the response from the server
If it does not work like this in your current code we may need to see the code. Validation libraries or javascript may do some strange things.