Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Ok so I first editted your JS. (edit on original question)</p> <p>About your PHP. Where it should be $_POST, you're writing $POST_ in here:</p> <pre><code>return mysql_query("INSERT INTO options(option) VALUES('". $POST_['optionName'] ."');"); </code></pre> <p>It should be</p> <pre><code>return mysql_query("INSERT INTO options(option) VALUES('". $_POST['optionName'] ."');"); </code></pre> <p>Also, please use <a href="http://php.net/manual/en/function.mysql-real-escape-string.php" rel="nofollow">mysql_real_escape_string</a> to avoid having any sort of SQLi vulnerabilities.</p> <p>As for the "checkboxes", you are NOT generating checkboxes, but dropdowns by using a select tag with options. For allowing multiple selections, you can either go ahead and change it into checkboxes (using <code>&lt;input type="checkbox"&gt;</code>) or add the multiple attribute to your select (<code>&lt;select name="options[]" multiple="multiple"&gt;</code>). Both will be fine; personally, I prefer checkboxes.</p> <p>About saving what values were selected. You will have to make a "cache". You can do something like the following:</p> <pre><code>$("#FormOptions").submit(function(e) { //if you stick to select&gt;option, then selector should be: // $('.options option:selected') var savedOptions = $('.options input:checked'); $.ajax({ type: "POST", url: "./php/addOption.php", data: { optionName : this.optionName }, dataType: "json", success: function(data) { var _savedOptions = savedOptions; $('.options').load('./php/reloadOptions.php', function () { //if you stick to select&gt;option, then selector should be: // $('.options option:selected') $('.options input:checked').each(function() { for (var i in _savedOptions) { if (_savedOptions[i].value == this.value) { $(this).prop("checked", true); } } }) }); } }); return false; }); </code></pre> <p>Please notice in the comments I specified both selectors, for either checkboxes or for select>option</p> <p>I think that should do the job. However, be careful with XSS vulnerabilities. If you will keep doing it this way, you better use htmlentities when you generate the HTML, like this:</p> <pre><code>&lt;select name="mydropdown" selected="selected"&gt; &lt;?php $options = ...... connect with DB and select all the options while($row = mysql_fetch_assoc($options)) { echo ("&lt;option value='" . $row['Id'] . "'&gt;" . htmlentities($row['optionName']) . "&lt;/option&gt;"); } ?&gt; &lt;/select&gt; </code></pre> <p>If your client is running on utf8, then just add the parameter for it (this is no longer required if you're running on PHP 5.4):</p> <pre><code>htmlentities($someStringInThisCaseOptionName, ENT_COMPAT | ENT_HTML401, "UTF-8"); </code></pre> <p>However, allow me to say your approach of reloading the entire form is not optimal. You need only a single POST request for this: Make the addOption.php script return JSON like this: <code>{ valueGenerated : "some id"}</code>. Then proceed by taking the data and just add the option. To do this you will have to make your PHP script <a href="http://php.net/manual/en/function.mysql-insert-id.php" rel="nofollow">query MySQL to check what ID was generated</a> and return just this:</p> <pre><code>echo "{ \"valueGenerated\" : \"$generatedID\" }"; </code></pre> <p>Then do something like this on JS side:</p> <pre><code>$("#FormOptions").submit(function(e) { var optionName = this.optionName; $.ajax({ type: "POST", url: "./php/addOption.php", data: { optionName : optionName }, dataType: "json", success: function(data) { var optionValue = data.valueGenerated; $('#formChecks select[name="dropdown"]').append( "&lt;option value='" + optionValue + "'&gt;" + optionName + "&lt;/option&gt;" ); } }); return false; }); </code></pre> <p>Please denote something: following the code I did, <code>optionName</code> must be escaped or it will cause an XSS vulnerability. You can do that from either the PHP side or by doing proper JS instead of the quick append I just showed.</p> <p>I think it is easier to do it from the PHP side (just use <a href="http://php.net/manual/en/function.htmlentities.php" rel="nofollow">htmlentities</a>) but then if you ever wanted other clients to use the same web request, they would "suffer" from it. So, ignore the previous JS code and better use:</p> <pre><code>$("#FormOptions").submit(function(e) { var optionName = this.optionName; $.ajax({ type: "POST", url: "./php/addOption.php", data: { optionName : optionName }, dataType: "json", success: function(data) { var optionValue = data.valueGenerated; var newOpt = $("&lt;option&gt;&lt;/option&gt;").val(optionValue).text(optionName); $('#formChecks select[name="dropdown"]').append(newOpt); } }); return false; }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload