I have seen this functionality on multiple websites but not able to implement.
1) I have a text box.
2) I enter any E Mail ID into it.
3) If E Mail ID is valid ( validation done from database using AJAX) , a new textbox must be create dynamically on next line and this initial textbox must get converted into a non editable textbox with closing button in it. if I click on this closing button, the textbox must be removed.
Please help.
If you already know what textboxes you want after ajax success, why not just have them on the hidden on the page, then show them on your ajax success?
HTML
<div>
Name:<input type='text' id='name' onblur='checkValidEmail();'/>
</div>
<div id='emailSection'>
Email:<input type='text' id='email'/>
</div>
SCRIPT
function checkValidEmail()
{
//ajax here. On success, show our textbox
//since you're not asking about ajax, we will assume success
$('#emailSection').fadeIn();
}
CSS
#emailSection
{
display:none;
}
https://jsfiddle.net/t66b6ebL/2/
you can create any html element dynamically using javascript. And it is simple.
Example
<div id="container">
<input type="text" name="txt1" />
<!-- Here you want to insert a textbox dynamically -->
</div>
JQuery
var elementString = "<input type="text" name="txt2" />";
$('#container').append(elementString);
Related
I need to know if its possible to send email (in c#) with html content of a text box and <a> tag.
<a> tag will have a redirect address.
Clicking the <a> tag should take the data from text box and pass it as an argument.
The main problem is I am not able to get the value of the text box, because Java Script is not allowed in the mail content.
Anybody has any thoughts or views about this?
This should not be possible because an email cannot process user events. You can only reply to email, you need a landing page or something else that the user can interact on.
I was able to solve my problem with form without using java script.
<form id='RejectFeedbackForm' method='get' action="http://localhost:49309/Controller/Action">
Reason for rejection<br />
<input type='text' name='comment' id='comment' /><br />
<input type='submit' value='Submit'>
</form>
v-ajax is a directive I have that automatically submits the form when you press submit. The form grabs all my input, serializes them and submits them via ajax. Now for one of my forms, instead of using a TextArea I want to allow bolds and italics so I'm using a div with the contenteditable attribute.
Here's a stripped down version of what I'm trying to accomplish.
<form v-ajax action="someurl">
<div contenteditable>{{ message }}</div>
<input name="content" type="hidden" value="{{ message}}">
... bunch of other inputs...
<input type="submit" value="Save">
</form>
My question is, how can I make it so that whatever the person types in the div automatically populates the value of the input with the name of content.
Here's one way to populate the hidden input with whatever's typed into the div:
First, so you can access them, give the div and hidden input unique IDs:
<div id="contenteditable" contenteditable>...</div>
...
<input id="content" name="content" type="hidden" value="{{ message}}">
Then use JavaScript to listen for keyup events on the div, and set the input's value to the text in the div:
var editDiv = document.getElementById('contenteditable');
editDiv.addEventListener( 'keyup', function () {
var hiddenInput = document.getElementById('content');
hiddenInput.value = this.textContent;
});
Here's a jsfiddle.
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
Got a problem with my program. Need help. I unhide a div element on a click of a button. The div contains a form. And of course, the form needs validating before using ajax to post something in the database. However, my main problem is that whenever I push submit to validate, using javascript, the page reloads, causing the div to hide again. I am having trouble with jquery, too. I mean, I am still learning jquery.
css
.divform{
visibility: hidden;
}
javascript
function unhide(){
document.getElementById("divform").style.visibility = "visible";
}
function validateform(){
//validation with focus() on if false
}
html
<input type='button' onclick='unhide()' value='unhide'/>
<div class='divform' id='divform'>
<form method='post' id='formid' name='formid' onsubmit='validateform();'>
<label>Name: </label> <input type='text' name='name' id='name'/>
<!-- more input type here-->
<input type='submit' name='submit' value='submit'/>
</form>
</div>
How do i submit the form successfully without reloading the page and not causing the div to hide again? thanks, really need help on this one.
Anything that haapens without reloading the page is using AJAX ....
Learn here AJAX TUTORIALS
Another Specific Example is Given here : AJAX FORM SUBMISSION EXAPMLE
I have an input box
<input type="text" name="search" id="search" />
<img src="icon.png" alt="" id="doSearch" />
I use Jquery and I have onclick event for "doSearch". So when I enter some words like "ab" .. and click on "icon" It sends an ajax request to php file and gets results back appended to dom.
$('#doSearch').click(function() {
$(".showResults").show("fast");
var input_text = $('input[name="search"]').val(); //retrieve text
$.ajax({
method: "get" ...
... some more lines
}) etc etc
I am wondering how can I trigger onclick function automatically, when some characters are entered in the input box so that users dont have to click on image icon to get the results. Also, how I can set focus on the image icon when I press tab key while in the input box.
Thanks a lot for your help.
EDIT:
I have some other input boxes in the same form as well. So this input acts as somewhat similar to stack overflow tags input.
Something like that?
$('#doSearch').keyPress(function(e){
if($(this).val()=='??') $('#doSearch').trigger('click')
});
The proper way to do it would be to do this:
<form id='search'>
<input type="text" name="search" id="search" />
<input type="image" src="icon.png" />
</form>
That way the image will be the submit button of the form, and whenever a user presses enter the form's submit event will be fired and you can do what you want.
This is how you could do the jQuery:
$('#search').submit(function() {
// do what you were doing
return false; // prevent form submission
});
This will also have the upside of being friendly to people with Javascript disabled, as you could then check in the server if it is not an AJAX request and perhaps display the full page with the requested content instead. I am pretty sure this will also make it so that TAB goes to the image as well.