I am trying to fetch the whole innerHtml of a DIV to a PHP variable.
For this what I have done is to put the whole of the innerHtml into a Hidden field, and then call the Hidden field into php.
My code is:
<form method="post">
<div class="container" id="content">
<h1>Header1</h1>
<p>this is the para</p>
<textarea id="address" name="address"></textarea>
</div>
<input type="hidden" id="hidhtm" name="hidhtm"/>
</form>
In my JS file I have:
document.getElementById('hidhtm').value = document.getElementById('content').innerHTML;
In my PHP I have:
$test = $_POST['hidhtm'];
echo $test;
Can anyone please help me on this.
I wanted to do the same thing, and tried your method and it works.
In my test, the Javascript function which extracts the innerHMTL and places it in the hidden field of the form is called upon the user clicking a button which enabled the "submit" button (eg. acceptance of terms and conditions) but which does not actually submit the form. Therefore the hidden field was populated before the form was submitted. I haven't tried doing the same thing "onSubmit" but I suspect it might be too late to do so then.
I found that the material which could be inserted into the hidden field included all the values inserted by the user onto the form as well as things inserted by Javascript itself. All this could be picked up from the $_POST variable for the hidden field.
I needed to do this so that the PHP server could create a new form dynamically and send it back to the user.
function add_question(){
var count=document.getElementById("nofquest").value;
var container = document.getElementById("container");
// Clear previous contents of the container
while (container.hasChildNodes())
{
container.removeChild(container.lastChild);
}
for (i=1;i
please find text boxes in center how to align
Related
I basically have a search box, I am trying to get the value inserted and use on a separate /results.htm screen via the submit button. I've been able to get and process the results within the same page; but I am trying to do this after redirecting to a new page
/search.html
<script>
jQuery(document).ready(function() {
jQuery("#submit").click(function() {
var ZipSearch = jQuery("#Zipcode").val();
});
});
</script>
<div class="search_bar">
<form action=""><input type="text" name="Zipcode" id="Zipcode" value="" maxlength="5" placeholder="Zipcode">
<input type="button" name="submit" id="submit" value="Submit"/></form>
</div>
Want to keep input value content from /search.htm within a variable on next page, separate, /results.htm
How can I keep the user input value and use on my separate 'results' page?
Remove all the JavaScript from search.htm. There's no point in writing custom software to do things HTML has built-in.
Set the action of the form to the URL of the second page (action="/results.htm").
Change the button to a submit button (type="submit")
Read the data from the query string (location.search in JavaScript or $_GET in PHP).
Please 2 divs are placed side by side, a form is created in the one on the left hand, when the form is filled and submitted the information appears on div on the right hand a line is role, the form is reset, filled and submitted again...
Here something
<div id="d1">
<form>
<input id="myTx" type="text">
</form>
</div>
<div id="d2"></div>
function for passing values to div 2
$("#myTx").change(function(){
var bla = $("#myTx").val();
$("#d2").html(bla);
});
If u want to copy form data to another div then page should not refresh on submit. So u need to use Ajax to submit form without refresh then u can use Javascript to copy data to another div.
I'm using struts 1.2 with angular js to send a jsp form, I am having problems setting the value of an input field. Here's the javascript code to set the default value of the field "city" that comes from the server into the jsp when the page loads, this is because i cannot use the html struts tag to pre-populated because it does not support the angularjs attributes i need to use in the input field:
<script>
$(function() {
var defaultCity = $("[name='city']").val();
$('#city').val(defaultCity);
});
</script>
here's the jsp section:
<body ng-controller="TypeaheadCtrl">
<form name = "LocationForm" method="POST" action="someaction.do">
<div class='container-fluid typeahead-demo' >
<div class="section">
<label class="field prepend-icon">
<input type="text" ng-model="asyncSelected" uib-typeahead="address for address in getLocation($viewValue)" id="city" class="gui-input" placeholder="City">
<span class="field-icon"><i class="fa fa-envelope"></i></span>
<html:hidden property="city"/>
</label>
</div><!-- end section -->
</div>
......
</form>
The problem with this is that once i input something in that field to override what's pre-populated, the text doesn't take, the struts action gets the original value the page loaded with only. So i tried to add the following in the jsp to see if at the time of submitting the form, the value can be changed, here's the code:
//Needed to override load value at submition time
$("[name='LocationForm']").submit(function(e) {
var cityValue= $("[name='city']").val();
$('#city').val(cityValue);
});
However it didn't work either, debugging into it would still return the original value even though i can see in the browser the new value i typed.
If on the other hand, i remove all the javascripts, then the jsp will send the newly typed value, however, it won't set the default value of the field at load time, i need both things to happen, load the default value and if i type something different in the input field, then the new value should be submitted.
Can someone please tell me what am i missing to be able to submit whatever is typed on the field on submission and not have always the default value sent over?
Thanks in advance
Resolved, apparently the problem was the binding, i put the submit function of the javascript code at the bottom of the page and it picked it up.
EDIT 3: Ahha... some progress. The problem was actually in some code below the divs that I left out (updated HTML below to reflect). The second div contains a "required" input, so simply changing the div to display=none via javascript doesn't actually make the page entirely ignore the hidden Div. So a slight change to the angle of my question - how would I adjust the code below to completely ignore the hidden div, so that the required field is not read?
EDIT 2:I have tried removing the 2nd block of JS code below and inserting the dynamic PHP code directly into the input and div tags to change the display - still no luck.
EDIT 1: Just to confirm, the solution to a similar question doesn't work in this case: Auto checked radio buttons and php form processing - How to avoid blank field? it seems that the Chrome team have made changes in later versions that make this solution redundant.
A user on the website can select either Points or Stamps - I get the value from the Database via PHP and the form should have the relevant radio button checked and only show the Div related to that radio button.
Everything works fine, however, unless I manually change the radio button it will not let me POST the form i.e. I cannot post with value selected automatically from the DB - it seems a similar problem to this (Chrome Browser Ignoring AutoComplete=Off) - but no matter what I do with Chrome autocomplete it doesn't work. Also the page is recognising the radio as checked because it shows my dot in the right place. (EDIT 3: still unsure why this works in Mozilla but not Chrome - but latest Edits make this less important)
Heres my JS that shows the right Div if a radio button is changed:
$(function () {
var $divs = $('#option > div');
$('input[type=radio]').change(function() {
$divs.hide();
$divs.eq( $('input[type=radio]').index( this ) ).show();
});
});
This JS sets the correct radio button based on DB and shows the correct div when the page loads:
$(function() {
var $radios = $('input:radio[name=selection]');
var $type = "<?php echo $type; ?>";
if($type === 'points') {
$radios.filter('[value=points]').prop('checked', true);
document.getElementById('pointsdiv').style.display = 'block';
document.getElementById('stampdiv').style.display = 'none';
}
else if($type === 'stamp') {
$radios.filter('[value=stamp]').prop('checked', true);
document.getElementById('stampdiv').style.display = 'block';
document.getElementById('pointsdiv').style.display = 'none';
}
});
My HTML and PHP:
$type = $_SESSION['user']['type']; //Note: This is actually set at the very top of the page i.e. before the JS
<form autocomplete="off" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST" role="form">
<input type="radio" id="selection" name="selection" value="points"></input><label>Points</label>
<input type="radio" id="selection" name="selection" value="stamp"></input><label>Stamps</label><br></br>
<div id="option">
<div id="pointsdiv">
//Points related information here
<input type="text" required="required"/>
</div>
<div id="stampdiv">
//Stamp related information here - below input is required so when pointsdiv is displayed, this entire div should not even load
<input type="text" required="required"/>
</div>
</div>
<button type="submit" class="button">Save</button>
</form>
Anyone have any ideas how I can load this page and post the form if I don't change the radio button - i.e. if it loads with "Points" checked and I click the Save button?
Input radio groups must have the same name but not the same id,
so you should change id="selection" for one of them.
If everything is in the same page and the page is in php,
then you have to wait for dom ready before setting input values.
There is a dynamic way without using javascript :
<input type="radio" <?=$type =='points'?='checked="checked"':''?> id="selection" name="selection" value="points">
The same thing you can do with the other radiobutton
and also with the divs pointsdiv and stampdivs
I am working in django and i want to set a value to a hidden field in html and use it in django view file
html file
<input type="hidden" id="t" name="t" />
<script>
document.getElementById('t').value = $('#SelectBox').selectit('t').join(', ');
</script>
My views.py is :
pos= request.POST.get('t')
this is how i am calling in the view file.
I also tried using
pos=request.POST('t')
but it does not seems to work. How can i do it? Am i doing it wrong?
Thanks in advance
In your html file, you have written java-script without any event so how it will give any value to the hidden input field.
at the time of submitting Form, if there is not any value in your hidden input then it will not come in your view file and you will not get this "t" value.
so first check at the time of event function, value is coming in your hidden input field then you can submit form and u will get t value in view file.