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.
Related
I have three inputs in the following form. Two inputs type is text and another one input type is hidden. Now when I click the submit button then two input values need to set the hidden input before run the ajax query. Because, ajax will get the data from the hidden input only. I have tried it myself but, it's not working for me. Now, when I click the submit ajax working first then set the both values to hidden input.
<form>
<input type="text" class="date" value="2018-11-09">
<input type="text" class="time" value="15:00:00">
<input type="hidden" class="date-time" value="">
<button type="button" class="button">Submit</button>
</form>
For the following code I am assuming that the 'Submit' button has its type changed to 'submit' as this will give you more control of when the form is submitted:
$('form').submit(function(event) {
event.preventDefault(); // stop the form from automatically submitting
$('.date-time').val($('.date').val() + $('.time').val());
console.log($('input[type=hidden').val());
// call your ajax here
});
The important line here for your question is:
$('.date-time').val($('.date').val() + $('.time').val());
This sets the value of the input .date-time to the input of .date and .time, although I would recommend using ids instead of classes as they are unique
I have a form on a Website, and then another form inside of a Bootstrap modal.
The main form has certain fields e.g "Neck, Chest, Waist" while the form inside of the modal has only one e-mail field.
I'm planning to add some "hidden" inputs into the secondary form named "chest, waist" etc and I would like the main form field's value to be passed into the secondary form's hidden inputs as that's the one which is actually going to be submitted.
Is it possible without javascript? If not, I'd prefer some jQuery solution as it must be something pretty minor but I just can't figure it out.
Just copy the values of the form to the form with hidden inputs when it is submitted. Copying on keyup is unnecessary.
<form id="form1">
Input
<input type="text" id="input"/>
<button type="submit">Submit</button>
</form>
<form id="form2">
<input type="text" id="input2"/>
</form>
<script>
document.getElementById("form1").addEventListener("submit", (e)=>{
e.preventDefault();
document.getElementById("input2").value = document.getElementById("input").value;
document.getElementById("form2").submit();
});
</script>
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);
I have a html form that has a hidden field. Upon hitting submit, I want the hidden field to be populated with the value entered in another field before it gets to form validation.Is there a way I can do that in Javascript?
HTML code:
<form>
Email: <input type="text" name="email"><br>
<input type="hidden" name="retype-email">
<input type="submit" value="Submit">
</form>
JSfiddle: http://jsfiddle.net/x1r8sunh/
Given the HTML you posted, this should work:
$('form').on('submit', function(e){
$('[name="retype-email"]').val($('[name="email"]').val());
});
Example Here
Pure JS option:
document.forms[0].addEventListener('submit', function(){
document.querySelector('[name="retype-email"]').value = document.querySelector('[name="email"]').value;
});
Example Here
You will probably want to use ids or classes to select the elements. The above JS will probably conflict with other elements - change accordingly.
I would like to have an Add another field button that creates a text field <input type="text" name="pet"> each time that button is pressed.
I currently have this code:
<html>
<head>
<script>
function add_field()
{
document.write( '<input type="text" name="pet">' );
};
</script>
</head>
<body>
<form name="input" method="get">
Favourite pets:<br>
<input type="text" name="pet">
<button type="button" onclick="add_field()">Add another field</button><br>
<input type="submit" value="Submit"><br>
</form>
</body>
</html>
But when I press the Add another field button I just get a page with only a text field, all my other content disappears. How do I still keep my other html content while adding another text field?
This line:
document.write( '<input type="text" name="pet">' );
Will replace the entire document with the inserted markup. If you want to append the input field, you need to find the form you want to append to, create the input field and append it. Try something like:
var form = document.getElementsByTagName('form')[0],
input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('name', 'pet');
form.appendChild(input);
This will insert the input in the end of the form. You can use other methods, such as insertBefore to place the input field where you want it.
Or use jQuery.