CODEWITHSUNDEEP
javascriptphpjqueryarraysajax
shaun
shaun

Reputation: 1017

Would I use Ajax or PHP to change var value?

I am trying to make a little drop down survey for new visitors (using cookies), so I can collect data and I am a little confused on how to compile it.

If one button is clicked, onClick it goes var answer1 = answer1 +1, or something of that matter.

The thing I am having trouble with is pointing to where it should change the variable. Considering that javascript is ran locally, it can't update server values.

Can someone walk me through on what to add to button onClick to add one to the answer variable whether it be PHP or ajax, and what to add to the server itself?

If you need an example of the little survey itself, here is the fiddle.

Here is the original code:

HTML:

<body>
<div class="poll-box">
    <div class="poll-text">
            <h1>Sorry, quick question!</h1>
            <h2>Insert Question Here</h2>
        <p>
            <button onClick=""></button>&nbsp;&nbsp;&nbsp;&nbsp;Answer 1
            <br />
            <br />
            <button onClick=""></button>&nbsp;&nbsp;&nbsp;&nbsp;Answer 2
            <br />
        </p>
    </div>
</body>

CSS:

html {
    font-family:Lato, sans-serif;
}
.poll-box {
    width:60%;
    background-color:#648FBD;
    height:40%;
    margin-left:auto;
    margin-right:auto;
    vertical-align:middle;
    position:absolute;
    border-radius: 16px 16px 16px 16px;
    -moz-border-radius: 16px 16px 16px 16px;
    -webkit-border-radius: 16px 16px 16px 16px;
    border: 0px solid #000000;
}
.poll-box h1 {
    padding-top:2%;
    font-size:24px;
}
.poll-box h2 {
    padding-top:2%;
    font-size:18px;
}
.poll-box p {
    padding-top:2%;
    font-size:14px;
}
.poll-text {
    left:5%;
    position:absolute;
}
.poll-text button {
    padding-right:3%;
    padding-top:3%;
}

Upvotes: 0

Views: 78

Answers (1)

serjoscha
serjoscha

Reputation: 520

Instead of using buttons and counting up a JavaScript variable you better use HTML checkboxes for these do not trigger background actions (if not explicit desired this way) as they were needed when working with buttons. When you keep working with buttons here you need to have a little more complicated logic behind all this stuff or otherwise just save every user decision/change instantly to the database.

When using a form you will be send the user decision/choice after his submit-action summed up in one result instead of enforcing you handling every click again and again. This will save you some traffic, calculation time and perhaps DB queries.

To use checkboxes just put some "form"-DOM around these fresh new checkbox elements and a submit button below resulting in something like this:

<form class="poll-box" method="post" action="handler.php">
   <div class="poll-text">
           <h1>Sorry, quick question!</h1>
           <h2>Insert Question Here</h2>
           <p>
               <input type="checkbox" name="some_var_name_to_use"> Answer 1
               <hr />
               <input type="checkbox" name="some_var_name_to_use_2"> Answer 2
           </p>
   </div>
   <input type="submit" value="send" />
</form>

PS. you missed closing one of your div layers before the body ends.

Upvotes: 1

Related Questions