Accessing img src with javascript - javascript

function validate(form) {
while ($('#img').attr('src')=="../static/img/placeholder.png") {
return false;
}
return true;
}
^This code does not work for me. I want to have a form that does not submit while the placeholder img still exists. What mistake am I making with my code?
HTML:
<form method="post" action="/{{ curr_user }}" enctype="multipart/form-data" onSubmit="return validate(this);" >
<div class="submit-image">
<img id="img" src="../static/img/placeholder.png" onerror="this.src = '../static/img/placeholder.png'" alt="submitted image" />
</div>
<span class="input-url text">
<input type="text" id="url" placeholder="http://" maxlength="320"/>
</span>
<div class="form-actions">
<input type="submit" id="submit" name="op" value="Submit" class="form-submit"/
</div>
</form>

From your current example, this should be enough:
function validate() {
return $('#img').attr('src') != '../static/img/placeholder.png';
}
$('#submit').on('click', function() {
return validate();
});
See a more detailed example here: http://jsfiddle.net/ENnLC/

Maybe use a Regex to confirm that src contains the placeholder.png
if( ( /placeholder\.png$/.test( $('#img').attr('src') ) ) {
return false;
}
Just one other point. Your code here
<img id="img" src="../static/img/placeholder.png" onerror="this.src = '../static/img/placeholder.png'" alt="submitted image" />
You are loading the same image on the onerror event which will attempt to load the same image and trigger the onerror event again and lead you to enter an infinite loop.

Related

removeChild not working

Hi all i am just trying to remove my form when i click on a button but i have no results. I am sure that function "sign()" was called but with no effect on my layout:
<body>
<div id="divSign">
<form action="#" method="post">
<div class="header">
<p>All Together</p>
</div>
<div class="description">
<p>Hi friend</p>
</div>
<div class="input">
<input type="text" class="button" id="chiave" placeholder="Chiave Segreta">
<input type="submit" class="button" id="submit" value="ENTRA" onclick="sign();">
</div>
</form>
</div>
</body>
<script>
function sign() {
document.body.removeChild(document.getElementById("divSign"));
// OR THIS
var f = document.getElementById("divSign");
while (f.hasChildNodes()) {
f.removeChild(f.lastChild);
}
// OR THIS
var f = document.getElementById("divSign").style.visibility = "hidden";
}
</script>
Nothing seems affect my page, i just to clear my page after click.
On clicking, your form get submitted and the page refreshs.
Use this onclick instead, the return false; will prevent the form from being submitted and your page will not be refreshed anymore :
<input type="submit" class="button" id="submit" value="ENTRA" onclick="sign(); return false;">
It's not removed because the page is reloaded after your click on the button, because it's a form. To prevent that, you can use return false; at the end of your function.
function sign() {
/*********
Your code
**********/
return false; //add this line
}
With jquery you can do by using empty
$("#divSign").empty()
or
$("#divSign form").remove()

WebcamJS overriding return button in HTML 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 Image Form Validation

$('#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

Appending to div and being unable to bind the added buttons

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.

How to disable submit action

Hi i have have this form that i do no want to perform an action when the submit button is clicked. All i want to do is perform the a function that loads data into a div. Any Ideas??
<form method="POST" action="" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>
onclick="loadXMLDoc('file.xml'); return false;"
or even better:
<script>
window.onload = function() {
document.getElementById("search-form").onsubmit = function() {
loadXMLDoc('file.xml');
return false;
};
};
</script>
To implement loadXMLDoc, you can use the ajax module in jQuery. for example:
function loadXMLDoc() {
$("div").load("file.xml");
}
Final code using jQuery:
<script>
$(function() {
$("#search-form").submit(function() {
$("div").load("file.xml");
return false;
});
});
</script>
I think you need ajax function to load data with in div without page reload
Change input type submit to button
<input type="button" value="Search" id="sButton" onclick="AjaxSend()" />
Ajax CAll:
<script type="text/javascript">
function AjaxSend(){
$.get('file.xml', function(data) {
$('div').html(data);
});
}
</script>
use prevent defaults to avoid form action.please refer the code below it might help you
function createRecord(){
event.preventDefault();
}
<form>
<input type="text"/>
<input type="submit" onclick="createRecord()"/>
</form>
just remove action param from form and add onsubmit="return false". It will return false everytime you click on any button in your form.
Try like this:
<form method="POST" onsubmit="return false" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>

Categories

Resources