Would I use Ajax or PHP to change var value?

Question

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%;
}

I don't think your css code is necessary here, your js code would be more helpful. — Daan
– Daan, Commented Feb 10, 2015 at 15:00
You can build the array in js then send via ajax, or send the pieces via ajax and build in php. — Waxi
– Waxi, Commented Feb 10, 2015 at 15:07

serjoscha · Accepted Answer · 2015-02-10 15:19:30Z

1

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.

edited Feb 10, 2015 at 15:19

answered Feb 10, 2015 at 15:07

serjoscha

5301 gold badge4 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shaun Over a year ago

Would I have to make a separate submit form?

serjoscha Over a year ago

@ShaunLoftin: Guess no, but I am not quite sure what your question exactly aims on. You just need this single form. Every thing a user inputs to that form will be send to the handler.php using the DOM "name" attribute as variable name in PHP when the user submits. Does this somehow answer your question?

Collectives™ on Stack Overflow

Would I use Ajax or PHP to change var value?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related