I want to make a page that allows the user to enter his Minecraft name, the entered name will be changed in this link:
http://www.minecraft-skin-viewer.net/3d.php?layers=true&aa=true&a=0&w=330&wt=10&abg=330&abd=40&ajg=340&ajd=20&ratio=13&format=png&login=<NAME>&headOnly=false&displayHairs=true&randomness=708
How can i do this?
You can do that with jQuery.
For example, you have this html code:
<input type="text" id="name">
<input type="button" id="dostuff" value="View your Skin!">
<hr>
<iframe width="290" height="433" id="SkinViewer"></iframe>
Where the tags used only contain relevant information for the script to work.
And the following jQuery code will work when the button is pressed. It create's the url with the value of the input field in it. And then sets the source of the iframe with the created url.
$(document).ready(function(){
$('#dostuff').click(function(){
var url = 'http://www.minecraft-skin-viewer.net/3d.php?layers=true&aa=true&a=0&w=330&wt=10&abg=330&abd=40&ajg=340&ajd=20&ratio=13&format=png&login=' + $('#name').val() + '&headOnly=false&displayHairs=true&randomness=930';
$('#SkinViewer').attr('src',url);
});
});
Keep in mind: for the jQuery to work you should load the jQuery library first!
Related
I have an input like this:
<input value="<?php echo $formdata['title'] ?>" type="text" name="title" id="Editbox2">
This is an edit page, I load database data into fields with echo, replace them, and hit submit to update them.
But when I hit submit it refreshes the old data onto browser's fields, how can I prevent this?
Submit your form using ajax request with jquery submit.
Use action="javascript:;" for the form tag
You need to handle the script with javascript, then prevent the default behaviour, which is refreshing the page. Here is an example:
*I haven't tested this, but from what I recall this is what I used to do. Let me know if it doesn't work, I'll give other suggestions.
<form>
<!-- elements inside -->
<input type="submit" id="submit-btn" value="Submit"/>
</form>
and in your javascript have the following:
<script>
$("#submit-btn").click(function(e){
e.preventDefault();
// handle form here with your JS
});
</script>
I have problem that my page refreshes when form is submitted. I have checked other questions on stack but they worked fine when type of input is button like <input type="button"> I have also checked javescript and jquery techniques but they doesn't work for me. Kindly can you please guide me that how to stop page refresh on form submission when its type is image.
<form action="userOwnProfile.php" method="post">
<input type="image" src="messageicon.jpg">
</form>
You don't have an id, input name or form name, you don't have a submit button. If you wish to use Ajax you need to identify the element with an id, class or name. What you have cannot work.
Try (add tags)
<img id='somename' src='messageicon.png' />
Or
<button id='somename'>messageicon.png </button>
You don't need a form
Then in jquery
$("#somename").click(function(e){
e.preventDefault();
Do something like send data to php
});
I have created a wall like this in facebook using php and jquery. There is a textarea and an input type=button, and using jquery when the user posts something it is displayed under the text area without renew the page. I want to enable my script using an image loader named "loader.gif", so that after press submit button the loader start working until the new post appear. Any idea hot to do this?
<?php
<textarea rows="3" id="comment_text" placeholder="share an update..." style="font-size:11pt; color:#363636; resize:none; "> </textarea>
<input type="button" id="comment_process" style=""/>
?>
You want to place the loader image where it should ultimately be, but with display:none; in its CSS. Then, when the form is submitted, simply toggle it on.
HTML
<img class='loader' src='images/loader.gif' style='display:none;' />
jQuery
$('form').submit(function(){
$('.loader').show();
});
If you are submitting the form using ajax, you may need to hide it again if a success/error is returned. If you are doing a true form submission, the page will load to a different location anyway and there is no need to re-hide the image.
As opposed to Dropbox Chooser V2, V1 used a hidden input field making it easy for PHP to get POSTed data from form.
Using V2, however, the input fiels is gone. How do I get the POST data to further process it?
Basically two main options:
You could make an AJAX call and include the URL in there.
You can include a hidden input tag in your form and put the URL in there.
Rough example of the latter (completely untested, sorry for typos/bugs):
<form method="POST" action="...">
<input id="url" name="url" type="hidden" />
<div id="container"></div>
</form>
<script>
var button = Dropbox.createChooseButton({
linkType: 'direct',
success: function (files) {
document.getElementById('url').value = files[0].link;
}
});
document.getElementById('container').appendChild(button);
</script>
I have a bunch of links with ID's 1 - n, and I want to pass that ID to a hidden input in my form (I have numerous links but want to only have one form rather than generating thousands of extra lines of HTML making a form for each ID).
The link looks like this:
Remove
The form with hidden input looks like this:
<form action="/php/removeSave.php" method="POST" id="removeSave">
<input type="hidden" name="ID" value=""/>
</form>
Any help?
This sets the value of the hidden input with the id ID to the id of the a element before it submits the form.
<a href='#' id='n' onclick='$("#ID").val(this.id);$("#removeSave").submit();'>Remove</a>
<form action="/php/removeSave.php" method="POST" id="removeSave">
<input type="hidden" name="ID" id="ID" value=""/>
</form>
You haven't provided the full context of the "Remove" link, wherein the ID would be noted, so I will presume a format, and you can adapt from there.
<!-- HTML //-->
<!-- Format for Each Element. "123" is the ID here //-->
<div id="element123">
This is Element 123 (ID#123)
Remove
</div>
<!-- The Form at the Bottom of the Page //-->
<form id="removeSave" method="POST" action="/php/removeSave.php">
<input type="hidden" name="ID" value="" />
</form>
The jQuery Segment
<script type="text/javascript">
$(document).ready(function(){
// Clicks of Links starting with "/php/removeSave.php?ID="
$('a[href^="/php/removeSave.php?ID="]').click(function(e){
// Don't let the Link act as a basic link
e.preventDefault();
// Get the Link HREF attribute
href = $(this).attr('href');
// Derive the Form ID and ID Value
bits = href.match(/^\/php\/([^\.]+)\.php\?ID=(\d+)/);
formID = bits[1];
elementID = bits[2];
// Set the Field Values and Submit the Form
$form = $('#'+formID);
$form.find('input[name="ID"]').val(elementID);
$form.submit();
});
});
</script>
Benefits of this method?
Graceful Degradation - so long as your PHP scripts can also handle GET variables, if this page is loaded from a browser which does not have Javascruipt enabled, or is unable to load jQuery, clicking on the "Remove" links will still perform the expected action.
Opportunity for AJAX-ification - instead of all those other actions inside the .click(function(e){ section, you could use jQuery's $.post() function and the query string segment of the link's HREF to pass this request straight to the handler and manipulate the page without having to do a full-page reload.