I have a php function that echos code of a form that has a button. when that button is click it will append a file field and a another button that if clicked would repeat the above. however when the added button is clicked nothing happened.
I am thinking it has something to do with binding the button.
Here is the code:
$formtoreturn = '
<div class="form_holder">
<form action="'.site_url().'xxxxx" method="post" enctype="multipart/form-data" >
<div id="fields_holder">
<span class="form_holder-label" id="fileC">Select image or images</span>
<div class="fields" id="field1">
<input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input">
<a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a>
</div>
</div>
<div class="clear"></div>
<input type="hidden" value="'.$u_id.'" name="user_id" id="user_id">
<input type="submit" name="submittestimonial" value="Submit Testimonial">
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</div>
<script>
var filecount = 1;
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(\'#fields_holder\').on(\'click\', \'.add_file\', function() {
var toappend = \'<div class="fields" id="field1"><input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input"><a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a></div>\';
if($j(this).attr("rel") == "add"){
$j(this).attr("rel", "ded");
$j("#fields_holder").append(toappend);
filecount++;
}
});
});
</script>
';
echo $formtoreturn;
Hope the code and my question is clear.
Thanks in advanced.
I would suggest you to change your JavaScript code from
$j('#fields_holder').on('click', '.add_file', function() {
// ...
});
to
$j(document).on('click', '#fields_holder .add_file', function() {
// ...
});
Then the event will bubble up and handled in click handler of a document.
UPDATE
Though I've made a test and it's working well for me in both variants.
Related
Below is my HTML and js code, i want when write_post_text (id) get focus then write_post_upload (id) div should show and when write_post_container (id ) div lose the foucus then it should get hide, actually its working fine but the problem is. when user click the upload_post_img (id) button then it lose focus and the write_post_upload got hide with slideUp function but when. I want to keep the focus even when this button is clicked.
<div class="upload_post" id="write_post_container" tabindex='-1'>
<form method="post">
<div class="upload_div">
<textarea class="form-control" rows="1" cols="30" id="write_post_text" placeholder="Write what in your mind"></textarea>
</div>
<div class="upload" id="write_post_upload">
<input type="hidden" name="post_img">
<ul>
<li><button type="button" id="upload_post_img"><i class="fa fa-camera" ></i>Image</button></li>
</ul>
<input type="file" name="file" id="bTimelineFile" onchange="readURL(this);" />
<div class="post">
<button>Post</button>
</div>
</div>
</form>
Here is my JS code :
<script type="text/javascript">
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
$("#write_post_upload").slideUp();
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
</script>
you can create a variable and change it whenever Choose file is clicked
like this
don't forget to reset it
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
var blur = false;
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
if(!blur){
$("#write_post_upload").slideUp();
}
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
$("#bTimelineFile").click(function () {
blur = true;
});
None of the current questions asked about this topic seem to help me, I am fairly new to this and I need some help. Currently I have a form, and on submit (currently do not have any validation) it shows a hidden div using this function.
function showDiv() {
document.getElementById('showme').style.display = "block";
}
I would like to add a loading gif, that shows for around 2 seconds after clicking the button and then carries on to show the hidden div.
My form is as shown -
<form action="" method="POST" id="hello" onsubmit="showDiv(); return false;">
The button to log in is here
<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">
function showDiv() {
document.getElementById('Login').style.display = "none";
document.getElementById('loadingGif').style.display = "block";
setTimeout(function() {
document.getElementById('loadingGif').style.display = "none";
document.getElementById('showme').style.display = "block";
},2000);
}
<div id="showme" style="display:none;">You are signed in now.</div>
<div id="loadingGif" style="display:none"><img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"></div>
<form action="#" method="POST" id="hello" onsubmit="return false;">
<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">
</form>
The issue is that you have return false in your code that executes when you submit the form, effectively cancelling the submit, so your function doesn't get called.
You should not use inline HTML event attributes in the first place and do all your JavaScript separately. Here's why.
Additionally, if you aren't actually capturing data and sending it anywhere, then you shouldn't have a form, a submit button or deal with submit events, you just need a regular button and its click event.
Also, don't name your form submit as this will prevent you from programmatically calling the submit() method on it.
Here's what that should be:
// Get references to the DOM elements you'll need:
var button = document.getElementById('Login');
var special = document.getElementById("special");
var pleaseWait = document.querySelector(".hidden");
// Set up your event handlers in JavaScript, not with HTML attributes
button.addEventListener("click", function(evt){
// Show the message by removing the class that hides it:
pleaseWait.classList.remove("hidden");
// Wait 2 seconds and then run a function that re-hides the message and
// submits the form.
setTimeout(function(){
pleaseWait.classList.add("hidden");
special.classList.remove("hidden");
}, 2000);
});
.hidden {
display:none;
}
.img {
width:50%;
position:absolute;
}
<form action="#" method="POST" id="myForm">
<input class="btn_green_white_innerfade btn_medium"
type="button" name="Login" id="Login" value="Sign in"
width="104" height="25" border="0" tabindex="5">
<img class="hidden img" src="https://www.cluecon.com/theme/img/pleasewait.gif">
<div class="hidden" id="special">Here I am</div>
</form>
I cannot get my head around how to do this, but I was wondering how I would hide text that is showing on page load when a button is clicked.
This is what I currently have:
$(document).ready(function() {
var $p = $('p#menu_title');
$("input#save_first_prod").click(function() {
$p.css('visibility', 'hidden');
});
});
<div id="red_head">
<p id="menu_title" onclick="hideText('text1')" > Add your first menu item</p>
</div>
<form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >
<input type="Submit" id="save_first_prod" name="save_first_prod" value=" + ADD">
</form>
Use display:none; instead of visibility
Change $p.css('visibility', 'hidden'); to $p.css('display', 'none');
This works fine for me
$(document).ready(function() {
var $p = $('p#menu_title');
$("input#save_first_prod").click(function() {
$p.css('display', 'none');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="red_head">
<p id="menu_title" onclick="hideText('text1')" > Add your first menu item</p>
</div>
<form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >
<input type="Submit" id="save_first_prod" name="save_first_prod" value=" + ADD">
</form>
For a community site, I created an HTML form to add new users. If a new user wants to make a profile photo right away, this is possible with WebcamJS (using v1.0.2, already got this working).
However, when I want to add a new user and filled in all data (with or without a picture) and press Return, instead of submitting the form, a new webcam div is opened.
I tried a lot of different things, even disabling the default behavior of the return key, but still the problem persists.
Hope anyone can help!
Simplified HTML example:
Webcam.set({
width: 400,
height: 300,
//dest_width: 400,
//dest_height: 300,
image_format: 'jpeg',
jpeg_quality: 80
});
$("#maak_foto").hide();
$("#foto_maken").click(function() {
Webcam.attach('#my_camera');
$("#maak_foto").show();
$("#my_camera").show();
$("#foto_form").show();
});
$("input#foto_gebruiken").click(function() {
$("#my_camera").hide();
$("#pre_take_buttons").hide();
});
function preview_snapshot() {
Webcam.freeze();
// swap button sets
document.getElementById('pre_take_buttons').style.display = 'none';
document.getElementById('post_take_buttons').style.display = '';
}
function cancel_preview() {
Webcam.unfreeze();
// swap buttons back
document.getElementById('pre_take_buttons').style.display = '';
document.getElementById('post_take_buttons').style.display = 'none';
}
function save_photo() {
// actually snap photo (from preview freeze) and display it
Webcam.snap(function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'Jouw foto:<br>' +
'<img src="' + data_uri + '"/>';
// swap buttons back
document.getElementById('pre_take_buttons').style.display = '';
document.getElementById('post_take_buttons').style.display = 'none';
var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
document.getElementById('webcam').value = raw_image_data;
//document.getElementById('wijzigen').submit();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://intern.ifmsa.nl/leden/webcam/webcam.js"></script>
<form name="htmlform" method="post" enctype="multipart/form-data" action="<?php $_SERVER['PHP_SELF'] ?>">
<label>Voornaam</label>
<input type="text" name="voornaam">
<br>
<label>Email</label>
<input type="email" name="email">
<br>
<label>Photo</label>
<div>
<input name="foto" type="file">
<button id="foto_maken" onclick="return false" ;>Or make another one</button>
<input id="webcam" type="hidden" name="webcam" value="">
</div>
<br>
<div id="results"></div>
<div id="my_camera" style="display: none; clear: left;"></div>
<div id="pre_take_buttons">
<input type="button" id="maak_foto" value="Take photo" onClick="preview_snapshot(); return false;">
</div>
<div id="post_take_buttons" style="display:none;">
<input type="button" value="Another photo" onClick="cancel_preview(); return false;">
<input name="webcamdefi" id="foto_gebruiken" type="button" value="Use photo" onClick="save_photo(); return false;">
</div>
<label>Confirm password</label>
<input name="pass" type="password" required>
<input class="submit" type="submit" name="submit" value="Wijzigen">
</form>
Simple magic (the first tag button#foto_maken is interpreted as the submit button and fire when the enter press):
change this:
<button id="foto_maken" onclick="return false" ;>Or make another one</button>
to this:
<input type="button" id="foto_maken" value="Or make another one"/>
[ http://jsfiddle.net/2es2yf0y/ ]
More clear example: http://jsfiddle.net/stdob/tfss0sz2/2/
$('#submit-img').on('click', function() {
$('#img').attr('src', $('#url').val());
});
function validate() {
if ($('#img').attr('src') === '../static/img/placeholder.png'){
return false;
}
}
<form method="post" action="/{{ curr_user }}" enctype="multipart/form-data" onSubmit="return validate(this);" >
<div class="imagey">
<img id="img" src="../static/img/placeholder.png" onerror="this.src = '../static/img/placeholder.png'" alt="image" />
</div>
<span class="input-url">
<input type="text" name = "url" id="url" placeholder="http://" maxlength="320"/>
</span>
<input type="submit" id="submit-img" name="op" value="Submit" class="form-submit"/>
</form>
This validation code does not work for me. Any guesses why?
Also, if replace the if statement in the validate function with just alert($('#img').attr('src'))
The alert says Undefined
There's mulitple errors in your code.
First of all this creates an endless loops of 404s in the browser
<img id="img" src="../static/img/placeholder.png" onerror="this.src = '../static/img/placeholder.png'" alt="image" />
Second, it should be $('.submit-img'), not $('#submit-img'), since you've set the class attribute, not the id attribute.
Thirdly, you need to wrap jQuery code into $(document).ready(function() { ... });
After fixing that, the code works for me on jsfiddle
[Edit:]
Ok, probably this is what you are looking for:
$(document).ready(function() {
$('#url').on('keyup', function() {
$('#img').attr('src', $('#url').val());
});
});
When the users enters a URL, the image is shown.
Example on jsfiddle