How to implement the dislike-like button [closed] - html

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am developing a web page with rating mechanism, so I need two buttons called "dislike" and "like", once clicked, the rating information would be sent to the server to update the related rating information. What html code should I use, could you give a little code for doing this?

erm... you can't really do that with html alone, mate. You need a server-side script to handle that. Suggest Php.
After that, use a GET or POST method to carry your like or dislike vote to the server-side script.

I am leaving this answer in case if someone else faces this problem in future :
As said by Kaleb , this functionality can not be achieved by html itself, database is must for this because once you close the html page your upvote and downvote counter will be gone.
What you need to do is :
In your database , make a table say "votes" .
This table should have following columns
voteup - this should be filled with two options either yes or no
votedown - this should also be filled with two values "yes" or "no"
voteup_count -This will count the total of upvotes
vote_down - This will count the total of downvotes
Working
Before rendering your html page , check the corresponding entries into database whether the particular post is already upvoted or downvoted
If the post is upvoted and you again click the upvoted button the button text should change from upvoted to upvote and the counter should be decremented by 1 in the database as well under the voteup_count column
If the post is neither upvoted nor downvoted whenever the button is clicked it should increment the respective counter and then again change the button text either to upvoted or downvoted
of course your like and dislike button should also be dynamically created for each form.

<form name="ratings">
<input type="button" name="btnLike" value="Like">
<input type="button" name="btnDislike" value="Dislike">
</form>
Then whatever code you use to check the answer should accept the value of the button as a parameter for the update.

You should use a form. Here is an example I've copied from the Internet.
<form action="mulsub.asp" method="post">
First name: <input type="text" name="fname"><br/>
<input type="submit" name="bsubmit" value="Submit 1">
<input type="submit" name="bsubmit" value="Submit 2">
<input type="submit" name="bsubmit" value="Submit 3">
</form>
Check it out on this webpage. Programmed in ASP, I hate that language by the way :)

Related

Is there a need to state type="submit" for a button when the button is used in a form?

I am new to programming please forgive me if my question is out of place or if it does not follow community guidelines.
I was following a youtube tutorial and this is the simplified code:
<form class="form" id="form">
<input type="text" id="input" autocomplete="off"/>
<button type="submit" class="btn">Submit</button>
</form>
My question is why is there a need to state type="submit" ? I tried removing the type and it seems to work fine.
Also, I saw another question on StackOverflow that states the default for button when it is used in a form is already submit.
Is the person in the tutorial just being thorough or is there another reason as to why it needs to be stated?
You don't need to because button's default type is submit.
But, you have to because your purpose is not writing something that "just works". You read code 90% of time and write code 10% of time, so readability is essential. (though there are some weird places where the purpose is exactly the opposite, but that's an edge case)
If the form is so large that you don't know if your submit button is inside the form or not, simply stating type="submit" will give you a clear idea that it's inside a form.
There are many more examples in coding that you simply write "unnecessary" code for documentation purpose, such as naming a function catchButterfly() instead of f().
In general, it's always a good practice to be VERY verbose and explicit about every piece of code you write because it's just a few extra lines of code but the advantage is HUGE.
<button type="submit"> and <button> are the same thing.
The reason is the default type of a button is submit.
So you can leave it off if you want. If you do not want the button to submit the form, then you want to use type="button".
It is explained in the docs on MDN or www.w3.org
It works fine when removed because submit is the default type :
https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type

Use of Disabled fields in HTML [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I came across a text that data inside disabled fields is not submitted along with the form. So i don't see why we even need to use disabled fields while writing code. Please explain the scenario in which it becomes inevitable to use disabled field.
A field that is disabled in an HTML form is unusable, unclickable and will not submit data.
The point about such a field is that something else has to happen before that field is no longer disabled - and then it becomes a normal HTML form field.
eg.
var otherReasonRadio = document.querySelector('input[value="reason-other"]');
var otherReasonInput = document.querySelector('input[name="other-reason"]');
function enableOtherReasonInput() {
otherReasonInput.removeAttribute('disabled');
}
otherReasonRadio.addEventListener('change',enableOtherReasonInput,false);
label {
display: block;
}
<form>
<label><input type="radio" name="reason" value="reason-a" />Reason A</label>
<label><input type="radio" name="reason" value="reason-b" />Reason B</label>
<label><input type="radio" name="reason" value="reason-other" />Other Reason</label>
<p><label>Please State Other Reason: <input type="text" name="other-reason" disabled></label></p>
</form>
Let's say, we have user with name, username, email and type. Now we need a single html form for both editing existing user and adding new user. While editing we don't want the email of the user to be modified. So, we can disable this field when you are editing user. Because, we actually don't want it to be submitted to the server or any other form processor. On the other hand, while adding the user, we need the email field to be added. So, while adding, we shouldn't disable the email field. That's just an example why we need to disable a field. Same form, but while editing, no email will be submitted, while adding email will be submitted.
Conditions in which you want to show the field but do not want to be submitted along the rest form fields

Can I set two values for a submit button? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Note: This is a rewrite of an old post to clarify what was being asked.
Let's suppose I have a single form that displays a set of rows (for example, lines in an order), and I want to place a "delete" button besides each row, but unfortunately I can't create a single form for every row.
In addition let's say that the form goes to a "generic action route" that is the "editCart" controller.
For the sake of the example, let's assume in the form there are several other actions, like for example adding one to the quantity.
This has to be done with multiple submit buttons within the same form.
If it was only one single row, it is easy, just add a name/value to the button and boom! done!.
<form action="/process-edition" method="post">
<div>My nice things</div>
<button type="submit" name="subAction" value="delete">Delete</button>
<button type="submit" name="subAction" value="addOne">+1</button>
</form>
This is saying "hey, controller of the action /process-edition, I'm going to make the subAction delete". Or "the subAction addOne".
But when we have multiple rows, you need to say something like "delete THIS product" or "add one of THIS product".
In this case you need that the button submits like two values: a) the subAction, b) the id of the product to be edited.
<form action="/process-edition" method="post">
<ul>
<li>
Product 1234: 'orange'
<button type="submit" name="subAction" value1???="delete" value2???=1234>Delete</button>
<button type="submit" name="subAction" value1???="addOne" value2???=1234>+1</button>
</li>
<li>
Product 6789: 'lemmon'
<button type="submit" name="subAction" value1???="delete" value2???=6789>Delete</button>
<button type="submit" name="subAction" value1???="addOne" value2???=6789>+1</button>
</li>
</ul>
</form>
I think in this case delete and addOne is what the original post was asking as a "statically assigned value" and the 1234 and 6789 would be the "hidden" values that come from the database. The button "knows" about the Id but does not display the Id itself.
Of course this could be resolved by setting multiple forms to several different controllers with hidden fields in each form. But let's assume you are constricted to a layout that already has the form and you cannot create several forms in it, thus forbidding you to isolate hidden fields to be sent or not sent.
ORIGINAL TEXT OF THE POST:
one value has to be hidden from the user and another has to be displayed.The hidden value is retrieved from the database and the displayed one is statically assigned value?
You can use data- attr
<button type="submit" name="buttonname" data-value="value2" value="Value1">value</button>
then use Element.getAttribute() live DEMO
var buttom = document.querySelector("button");
var dataValue = buttom.getAttribute("data-value");
alert(dataValue);
this way you can set as much value as you want just by add data-*
the best part is you can use
<input type="submit" name="buttonname" data-value3="value3" data-value="value2" value="Value1" />
Demo if you don't like button
Yes, by using a different tool.
<button type="submit" name="buttonname" value="hiddenvalue">Shown Value</button>

href with form button [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have tried many different ways to go about this however i cant get this to work properly.
Im trying simply to make a "styled" button link to a certain page.
Current code:
<input type="submit" href="aim:goim?screenname=Element18592&message=Hey, Im interested in one of your services." class="btn btn-default" value="Contact">
A link to the page containing this example is: http://www.themodshop.co/shop/test.html
Also when a button is clicked and the cursor is moved away why does it stay black?
When you click on the button titled contact, you will notice it simply does nothing, where im trying to make it link to a certain url the href in the code above. You can go visit the link below and click on "Visit our store" to see a clear example of what im trying to accomplish when the button is clicked
http://www.themodshop.co/shop/
Thank you greatly for any help.
Only <a> elements can have a href attribute. Inputs and buttons are used for forms only.
Try this instead:
Contact
maybe you're trying this, perhaps?:
<form action="aim:goim?screenname=Element18592&message=Hey, Im interested in one of your services." method="POST">
<input type="submit" class="btn btn-default" value="Contact">
</form>
only applies if you have some information to submit, otherwise i suggest you use a like the other answer suggested.

Create Link "Subscribe" [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have magento commerce, and I am creating in html an automatic e-mail that is going to be sent when someone signs up (in Dreamweaver).
In the HTML code I have a button that is about subscribing in our newsletter. What is the code that I have to link to this image, so if someone clicks on it he will subscribe to the newsletter.
Thanks in advance,
Frank
The call goes to:
http://yourdomain.de/index.php/newsletter/subscriber/new/
But form data is sent via post as you can see in the Mage_Newsletter_SubscriberController newAction, where you find the following line of code.
$this->getRequest()->isPost() && $this->getRequest()->getPost('email')
So you need to name your form field 'email'
Good luck!
Edit:
Just use something like this:
<form action="http://yourdomain.com/index.php/newsletter/subscriber/new/" method="POST" id="newsletter-validate-detail">
<input type="text" class="input-text required-entry validate-email" name="email" id="newsletter">
<input type="image" src="path to image" name="submit" />
</form>