Databases
StackOverflow2013
Postsdbo
POPass variable from Javascript/JQuery to PHP
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPass variable from Javascript/JQuery to PHP
    text
    copied!<p>I'm still new to JQuery and trying to learn how to submit form without page refresh... What I want is, when the form is submitted, the value of what I type on "headline" and "subheadline" can be passed into php variable (So I can echo/insert data to database, etc)</p> <p>So, I put </p> <pre><code>"&lt;? echo $_POST['headline']; ?&gt;" </code></pre> <p>on </p> <pre><code>&lt;span class="save-notice"&gt;Your change has been saved! &lt;? echo $_POST['headline']; ?&gt;&lt;/span&gt; </code></pre> <p>but when I fill the form and click the submit button, it only shows "Your change has been saved!". Which means, the variable can't be passed to PHP.</p> <p>The HTML and the JS is combined into 1 file. I left the URL method on .ajax because it is processed in the same file.</p> <p><strong>HTML FORM</strong></p> <pre><code>&lt;div id="submit-form"&gt; &lt;form action="" id="select-block" class="general-form"&gt; &lt;div class="input-wrap"&gt; &lt;input class="clearme" name="Headline" value="Your headline here" id="headline"/&gt; &lt;/div&gt; &lt;div class="input-wrap"&gt; &lt;textarea class="clearme" name="Sub-Headline" id="subheadline"&gt;Sub Headline Here&lt;/textarea&gt; &lt;/div&gt; &lt;input type="submit" class="submit-btn" value="SAVE" /&gt; &lt;span class="save-notice"&gt;Your change has been saved! &lt;? echo $_POST['headline']; ?&gt;&lt;/span&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p><strong>And the JQUERY CODE</strong></p> <pre><code>&lt;script type="text/javascript"&gt; $(function() { $(".save-notice").hide(); $(".submit-btn").click(function() { var headline = $("input#headline").val(); var subheadline = $("textarea#subheadline").val(); var dataString = 'headline='+ headline + '&amp;subheadline=' + subheadline; alert(dataString) $(".save-notice").hide(); $.ajax({ type: "POST", url: "", data: dataString, success: function() { $(".save-notice").show(); } }); return false; }); }); &lt;/script&gt; </code></pre> <p>I saw on several example/tutorial on the internet if it can be done like that. Can you advise?</p>
 

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