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.
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 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!
The idea is to preview (this part works fine) the form somewhere so, if corrections are needed we can go back to the unrefreshed form to make corrections.
I have this form:
<form action="../../../../sendmail.php" id="Formulaire" method="post" name="Formulaire" onsubmit="return checkform()" target="_self">
I have a submit button to preview:
<input id="captcha" name="_Preview" type="submit" value="Preview" />
And here is my php code (from sendmail.php)
if(isset($_POST['_Preview'])) { echo $text; ?>
As stated above the preview (content of array $text) works well although it is presented on a blank page.
I like it to be presented either in a div on the form page or in a popup Window so when I close the popup I am back on the non-refreshed form.
I tryed different ways, my problem is everytime, after submitting the preview button I endup having the sendmail.php form in the background (blank of course or with the preview data). I don't know what approach to take. Thank you for your help.
I have deigned a simple HTML form but i want to submit it to a PHP to process but I want to submit the form not with the help of Button / Submit but with the help of anchor Tag
Submit
how to do it
the form is like
<form action="" method="post">
<input type="text" name="name" />
<input type="email" name="email" />
Submit
</form>
I want to post this form to the same page
In my opinion, I would keep using a button of type submit and just style it to look like a link with CSS.
button#submit {
background:none;
border:none;
padding:0;
color:#069;
text-decoration:underline;
cursor:pointer;
}
<button id="submit" type="submit">Submit</button>
Javascript can help you.
Submit
But of course you can style your submit button with CSS
if you REALLY want to do it this way you have to use javascript to submit the form in some way.
You can either add an onclick event to the link or you can add an onkeypress to the text fields so when the user hits ENTER it submits the form.
However, this is typically bad practice. Why not just use the button or input[type="submit"] tag? If the clients disable javascript then they'll never be able to submit your form, unless that's your goal.
Is there a particular reason where you need to have the form submit via an anchor tag?
As has been stated above, you can use JavaScript to submit the form, but if you run into the rare case of a user having JavaScript off, the form becomes unusable. I'd stick with the suggestion of styling the button to look like a link using CSS.