I would like to custom input files upload from CF7 in WP.
There are many ways to custom the button, but I need to display the file name once it has been uploaded.
I found one way to do it with this code :
<input type="file" class="custom-file-input">
<label class="custom-file-label" for="custom-file-input">Your file</label>
And this script :
<script>
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
It works, but with CF7, we use shortcode te create inputs.
And it gives something like :
<span class="wpcf7-form-control-wrap">
<input type="file" name="your-file" size="40" class="wpcf7-form-control wpcf7-file custom-file-input" id="your-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx" aria-invalid="false">
</span>
<label class="custom-file-label" for="your-file">Your file</label></div>
And it doesn't work anymore.
JS seems ok with the CF7 code.
Maybe it doesn't work because of CF7's way of generating code ?
I don't know.. Do you have an idea ?
Thank in advance for your help :)
[file file-265 id:fileuploadfield class:fileuploadfield limit:120000 filetypes:.jpg .png 1/]
[text uploadtextfield id:uploadtextfield class:uploadtextfield]
<input type="button" id="uploadfile" value="select">
As CF7 wraps the field inside <span> first you need to look for the parent container (assuming .custom-file), and then look for the .custom-file-label.
$(".custom-file-input").on("change", function() {
var filename = $(this).val().split("\\").pop();
$(this).parents(".custom-file").find(".custom-file-label").addClass("selected").html(filename);
});
This is kind of a late answer, but I was having this same issue today and this question helped me find the solution.
Related
I have the following structure on wordpress:
<form method="post" action="https://gateway.payulatam.com/ppp-web-gateway/pb.zul" accept-charset="UTF-8">
<...>
<input name="amount" type="hidden" value="5000.00"/>
<...>
</form>
I need to change the value of the input name amount dinamically..
I have a variable that displays my price:
<span class="tourmaster-tour-booking-bar-total-price">$1,745,000</span>
But the "tourmaster-tour-booking-bar-total-price" changes in some web pages.
I want to read the "tourmaster-tour-booking-bar-total-price" variable and give this variable to the 'value' in my input amount.
Thank you very much!
I've been struggling with this. Please take a moment to help me, I'll appreciate
You can do this easily using jquery!
$(document).ready(function() {
var formPrice = $('.tourmaster-tour-booking-bar-total-price').html().replace(/[$,]/g, '');
$('form #input-price').val(formPrice);
});
About a week ago i posted a question but couldn't get it answer because i didn't know how to use jsfiddle or codepen but i figured it out.
my problem is that the button doesn't work now if you click around it it will display the file search box this is the sample:
https://codepen.io/anon/pen/bWaYzJ
<label> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</label>
now if i detached the plugin from element then button works again.
change your outer label to div seems to solve your problem like this codepen
<div> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</div>
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
And make your javascript:
$(document).ready(function(){
$('#exampleFileUpload').onClick({
MultiFile();
});
});
First, remove the reference to the MultiFile source file - that's what causes the "MultiFile is not a function" error. You will need to include the MultiFile directly in the source for the codepen (as you already have).
Second, the label needs to wrap the input, and it cannot use the for attribute (since that relies on the name attribute for the target, which you have not set):
<div> Uploads
<label class="button">Upload File
<input type="file" id="exampleFileUpload" class="show-for-sr" multiple>
</label>
</div>
I have a site that has 2 forms - a short form and a long form. If you look at http://dforbesinsuranceagency.com you'll see the short form next to the masthead photo. The long form is at http://dforbesinsuranceagency.com/request-free-insurance-quotes/
When the user hits Submit on the short form, it kicks them over to the long form page, so that part works fine. The part that gives me fits is that I need the values entered into the short form fields First Name, Last Name, Email Address and Telephone passed to their equivalent fields on the long form.
How do I do this?
This is how I am redirecting the short form to the long form (I added it to the Additional Settings section for the short form):
on_sent_ok: "location = 'http://dforbesinsuranceagency.com//request-free-insurance-quotes';"
Any help would be appreciated.
Hack, hack, hackety, hack hack hack... Without suggesting "not using a form-builder" I don't think there is an elegant solution - you can't use the other PHP method suggested without modifying the plugin itself (and that is a can of worms). I will propose a Javascript solution but there are some caveats (below):
jQuery(document).ready(function($){
$('#quick-quote form:first').submit(function(){
var foo = {};
$(this).find('input[type=text], select').each(function(){
foo[$(this).attr('name')] = $(this).val();
});
document.cookie = 'formData='+JSON.stringify(foo);
});
var ff = $('#container form:first');
if(ff.length){
var data = $.parseJSON(
document.cookie.match('(^|;) ?formData=([^;]*)(;|$)')[2]
);
if(data){
for(var name in data){
ff.find('input[name='+name+'], select[name='+name+']').val(data[name]);
}
}
}
});
What this will essentially do is: on submission, store your mini-form options in a cookie. On page load it will then look for a form in the main body of the page and apply any stored cookie data.
Notes
The jQuery selectors are deliberately ambiguous to avoid any future changes in your admin panel/plugin that will likely screw with the form IDs (thus breaking the script).
I'm not faffing about pairing field/option names - for example the select box in your mini-form is named insurance-type however the matching box in the main form is named ins-type - you will have to ensure they are of the same name.
This also applies to select box values - if there is no matching value, it will be ignored (eg. some of your values in the main form have » » characters in front (and so don't match).
try this.
set the action of our first form to a php file named xyz.php
<form method="post" action="xyz.php">
<input type="text" name="name">
<input type="text" name="email_address">
<input type="submit" value="Go To Step 2">
</form>
the file xyz.php will create a new form for you which in this case is your second form (the big one). Set the action of the form as required. the code of your xyz.php will look something like this.
<form method="post" action="form3.php">
<input type="text" name="name" value="<?php echo $_POST['name']; ?>">
<input type="text" name="email_address" value="<?php echo $_POST['email_address']; ?>">
<input type="radio" group="membership_type" value="Free">
<input type="radio" group="membership_type" value="Normal">
<input type="radio" group="membership_type" value="Deluxe">
<input type="checkbox" name="terms_and_conditions">
<input type="submit" value="Go To Step 3">
</form>
where the input fields of the first form will already be filled with the details given by the user in the first form.
You can create the first form by yourself and let the contact form create the second form for you providing the default values using the method above.
Hope this helps!
Problem solved after I found an other template. Seems the previous one is incompatible.
I'm using the Plugin Foxycomplete (advanced autocomplete search with images) - more specifically: I want to use it. I installed and enabled it. The developer explains one step like this:
Enter the ID of the Form Input Field WITHOUT THE '#' on which you wish to apply the Autocomplete functionaliy. Defaults to the Regular "s".
I've even looked at the file foxycomplete.js, but I don't get it:
(function($) {
$(document).ready(function() {
var inputField = site_data.inputField;
var inputWidth = 0;
var absPath = "";
if(site_data.inputField == ""){
inputField = "s";
}
After this I took a look at the search form with firebug and this is the HTML-code:
<form action="http://localhost/sites/wordpress/" class="searchform" method="get">
<input type="text" value="" name="s" class="field">
<input type="submit" value="" name="submit" class="submit">
</form>
Now I'm assuming that I have to change class = "field" to id = "s", but I also do not know in which document I find the HTML part, I am a little stuck. If I do the change in firebug, it doesn't work.
all you need to do is to add following to your "input type" - name="s", id="s". This worked for me on a Canvas theme, by woothemes, and should be cool with any other
as an example for your code:
<input type="text" name="s" id="s" value="" class="field">
edit: search form code location really different to each theme template. but in most cases it's in header or sidebar.
I am trying to customise the output code of
<?php comment_form(); ?>
At the moment the submit button outputs the following:
<p class="form-submit">
<input name="submit" type="submit" id="submit" value="Post Comment">
<input type="hidden" name="comment_post_ID" value="486" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p>
I would like it to output the following:
<div class="darkbutton" onclick="document.commentform.submit()">
<span class="darkbutton-left"></span>Log In
<span class="darkbutton-right"></span>
</div>
so as the completely restyle the button. Now I know it could be done by editing the core Wordpress files in comment-template.php but I really don't want to have to do this if there is any other way.
Any suggestions greatly appreciated! :)
Have a trick
.form-submit{display: none;}
You can following after
$args = array(
'comment_notes_after' => '<button type="submit" id="submit-new"><span>'.__('Post Comment').'</span></button>'
);
comment_form($args);
I needed to add a class to form tag and the submit button. I don't know where I found it, but this solution helped me out. You have to modify the str_replace to suite your needs.
ob_start();
comment_form($comments_args, $post_id);
$form = ob_get_clean();
$form = str_replace('class="comment-form"','class="comment-form my-class"', $form);
echo str_replace('id="submit"','class="btn btn-warning"', $form);
Wrodpress has "Pluggable Functions" That allow you to overwrite some core functions. This is useful because they won't overwrite your changes when upgrading and such. However, it does not look like the comment_form() is one of them.
If you're looking to avoid modifying core files, why not just edit your template file to output your desired code instead of calling the comment_form() function? Otherwise, I'm pretty sure you're just going to have to modify that file.
You can read some discussion about this issue here, but it doesn't look like any fixes have been made to the WP codebase.
For now, I'm making style changes to my button on client side with jQuery. You could generate your <div> block with jQuery, and then hide their form-submit block by doing this:
.form-submit {
display: none;
}
This isn't foolproof code, but it's a hack that will work until they implement something better.