I want to convert the text from the textarea of form with js markdown converter before post
Now I have this code:
var message_textarea = $("#message_text");
...
$('#message-form').submit(function()
{
message_textarea.val(converter.makeHtml(message_textarea.val()));
})
It works, but I would like to change it so that the form isn't display changes in the text box before sending.
How can I do it?
Add a new input of hidden type to your form :
<input type='hidden' id='hidden_message_text' />
Then on submit fill it with converted data :
var hidden_message_textarea = $("#hidden_message_text");
hidden_message_textarea.val(converter.makeHtml(message_textarea.val()));
Hope this helps.
Changing the content of a textarea will display it on the DOM. You could try to use a separate hidden textarea. Meaning the displayed area contains the normal text and the hidden area contains the markdown.
You also could try to serialize the form, change the content and submit it using ajax all inside the submit event.
You can avoid Form submission and send data to server via AJAX call.
Here is example from Jquery docs
<pre>
<form>
<div><input type="text" name="a" value="1" id="a"></div>
<div><input type="text" name="b" value="2" id="b"></div>
<div><input type="hidden" name="c" value="3" id="c"></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f">
</div>
<div>
<input type="submit" name="g" value="Submit" id="g">
</div>
</form>
<script>
$( "form" ).submit(function( event ) {
var data = $( this ).serializeArray() ;
event.preventDefault();
$.ajax({
type: "POST",
url: '--some-url--',
data: data,
success: function(){/* callback*/}
});
});
</script>
</pre>
Related
I'm new to php and javascript /jquery.. and I'm italian, so forgive my english.
I want to use only one funcion in button (onclick) to use it in different form in the same page, and after I want to get the data of the form using serialize funcion. So i can't use the selector $(form#myform) because the different form have differen id.
This is the html
<form id="myform_1">
<select class="form-control" name="tipo">
<option value="standard">standard</option>
</select>
<input type="number" name="giorni" value="90"/>
<input type="number" name="attesa" value="1"/>
<button type="button" onclick="FormManipulator()">Crea</button>
</form>
This is the function i'v tried
function FormManipulator(){
var form_new = $(this).parents("form");
var data = form_new.serialize();
alert("data: " + data);
}
But i cant get the data of th input... the alert is empty. Where is my error? Can someone explain and give the solution?
I don't know $(this) on a function refers to what .. but I think its not referring to the exact element you want so you need to pass FormManipulator(ThisForm) in your function and use it like FormManipulator(this)
You can use something like this
function FormManipulator(ThisForm){
var form_new = $(ThisForm).closest("form");
var data = form_new.serialize();
alert("data: " + data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform_1">
<select class="form-control" name="tipo">
<option value="standard">standard</option>
</select>
<input type="number" name="giorni" value="90"/>
<input type="number" name="attesa" value="1"/>
<button type="button" onclick="FormManipulator(this)">Crea</button>
</form>
<form id="myform_2">
<select class="form-control" name="tipo">
<option value="standard">standard</option>
</select>
<input type="number" name="giorni" value="90"/>
<input type="number" name="attesa" value="1"/>
<button type="button" onclick="FormManipulator(this)">Crea</button>
</form>
I use jQuery and ajax.
In the first. it is my html.
<form id="frm" name='frm' action="." method="post">
<div style="position: absolute; top:270px;">
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
</div>
<input id="hidden-qid" type="hidden" name="set" value="hoge" />
</div>
</form>
And, I create submit function like below in JS.
$('#frm').submit(function() {
var serialized_date = $('form#frm').serialize();
console.log(serialized_date);
However, the "console.log" logged "set" paramater.
but, btn1 or btn2 can't show the log.
I guess it is child of the mybuttons div tag.
I don't want to remove the tag. because, I create dynamically the html by javascript.
$('#mybuttons').innerHTML = "<input type="\submit\" class="\buttonbig3\" name=\"btn1\" value=\"1\" /><br />";
Could you tell me how to serialize child tag.
I hope will be helpful , just find the button that does submit and added to the serialized
$('#frm').submit(function() {
var serialized_date = $('form#frm').serialize();
var btn = $(document.activeElement);
serialized_date += "&" + btn.attr("name") + "=" + btn.val();
console.log(serialized_date);
});
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm" name='frm' action="." method="post">
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
</div>
<input id="hidden-qid" type="hidden" name="set" value="hoge" />
</form>
Serialize don't add submit button values to the data as submit buttons should be used only to submit the form, not to send specific data. You have to change the type="submit" to something else if there is specific data you want to get out of it.
serialize() docs
The .serialize() method creates a text string in standard URL-encoded
notation. It can act on a jQuery object that has selected individual
form controls, such as , , and : $( "input,
textarea, select" ).serialize();
Buttons can't be serialized. Only the elements with user inputs can be serialized like textbox, radio button, etc
If you place an input box inside the div, you will find it in your console.log.
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
<input id="hidden-qid" type="hidden" name="rias" value="hoge" />
</div>
Now if you try submitting the form, you will get that input text inside the div element. So it's not about child elements here.
I need to update the form divs after an ajax was successfully called via jQuery. There're some form elements on my page. And I'd like to fill it with the values sent back from ajax call. Which is in json format.
While #inst_name is an input[type=text] in which doing 2 things.
As an autocomplete input via jquery autocomplete.
As a name reference for mysql query in this script.
HTML :
<input type="text" name="inst_name" id="inst_name" />
<form method="post" action="">
<textarea name="inst_addr" id="inst_addr"></textarea>
<select name="inst_prov" id="inst_prov">
<option value="1">Bangkok</option>
<option value="2">Chiang Mai</option>
<option value="3">Samui</option>
<option value="4">Phuket</option>
</select>
<input type="text" name="inst_tel" id="inst_tel" />
<input type="text" name="inst_fax" id="inst_fax" />
<label><input type="radio" name="inst_dep" id="inst_dep1" value="1" />Dep 1</label>
<label><input type="radio" name="inst_dep" id="inst_dep2" value="2" />Dep 2</label>
<label><input type="radio" name="inst_dep" id="inst_dep3" value="3" />Dep 3</label>
</form>
jQuery :
$('#inst_name').keyDown(function(){
$.ajax({
url: 'inc/form_institute.json.php',
dataType:'json',
data: {name:$('#inst_name').val()},
success: function(data){
$('#inst_addr').html(data.addr);
$('#inst_prov').val(data.prov);
$('#inst_zip').val(data.zip);
$('#inst_tel').val(data.tel);
$('#inst_fax').val(data.fax);
$('#inst_dep').val(data.dep);
}
});
});
JSON :
{
"addr":"123/4 Kitty Ave.",
"prov":"80",
"zip":"12345",
"tel":"0753245675",
"fax":"075123456",
"dep":"2"
}
Try using:
$(document).on("keyup", "#inst_name", function(){
//you're ajax here
}
That way the more you type the more specific the response will be.
Good luck :)
I have a HTML form with various different types of fields. Input, select, hidden and textarea. I have tried attaching all the form data to the ajax request but the POST data isn't sending. The reason for getting all form data rather than just naming the individual fields is the user can add more fields if the need to.
function saveProductEdits(f){
var url = 'func/editProduct.php?func=saveEdits';
$.ajax({
url:url,
data:$('#edit_form').serialize(),
type:'POST',
beforeSend:function(){
},
success:function(e){
alert(e);
}
});
}
PHP:
if(isset($_GET['func'])){
if($_GET['func'] == 'saveEdits'){
if(!empty($_POST)){
}else{
echo 'Post data not sent';
}
}else{
echo 'unknown function';
}
print_r($_POST); //shows empty array
}else{
}
HTML:
<form id="edit_form">
//various inputs generated at run time
<input type="button" value="Save Changes" onclick="saveProductEdits(this)" /> //button to submit
</form>
I keep getting 'Post data not sent'.
UPDATE:
screen shot of network tab
Im entirly sure but I presume by that the data isn't sending.
UPDATE FORM
<p>
<label for="product_name">Product Name: </label>
<input id="product_name" type="text" placeholder="Product Name" class="basic_field" value="Product Name PHP" />
</p>
<label for="main_cat">Main Catagory: </label>
<select id="main_cat">
php generated options
</select>
<div id="cats_list">
<p>
<label for="sub_cat_1">Sub Catagory 1: </label>
php generated options
</select>
</p>
</div>
<br/>
<a onclick="newCatField('2','Hair Pieces','6')">Add another Catagory</a>
<input type="hidden" id="count_cats" value="2" />
<div id="sizes">
<p>
<label>Size: </label>
<input type="text" id="size_1" value="1" />
<label>Quantity: </label>
<input type="number" id="quant_1" value="100" />
</p>
</div>
<a onclick="newSizeField('1')">Add another Size</a>
<input type="hidden" id="size_count" value="1" />
<p>
<label for="keywords">Keywords: </label>
Link a catagory:
<select onChange="addCatToKeywords(this,'keywords')" class="basic_field">
<option>Add...</option>
php generated options
</select>
<textarea id="keywords" class="basic_field">php content</textarea>
</p>
<p>
<label for="desc">Description: </label>
<textarea id="desc" style="">php content</textarea>
</p>
example of adding fields at runtime:
this does work and adds 1 to the id of each on and to a hidden value that counts the added fields.
function newCatField(c,u,m){
$.ajax({
url:'func/getCats.php',
type:'POST',
data:{used:u},
success:function(e){
if(count === parseInt(m)){
}else{
document.getElementById('cats_list').innerHTML += '<p><label for="sub_cat_'+count+'">Sub Catagory '+count+': </label><select id="sub_cat_'+count+'"><option>Please Select</option>'+e+'</select></p>';
count++;
document.getElementById('count_cats').value = parseInt($('#count_cats').val()) + 1;
}
}
});
}
$.serialize()
Probably this function is what you're looking for.
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
I have a problem with jQuery Blur Function
I code it like this:
<head>
<script src="_js/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#l').blur(function(){
if($(this).val()=='')
alert('Invalid');
});
});
</script>
</head>
I am using this to identify if the input field is empty or not. If I run this code then if I leave it empty and click somewhere else, the Blur function is not called and no alert is generated
I am using Firefox 10.1 to run the code
HTML:
<form method="post" action="Login.php" id="Log">
<select id="Login" name="Type">
<option value="Sel" selected="selected">Select Login type</option>
<option value="Student">Student</option>
<option value="Faculity">Faculity</option>
</select>
<div id="type">
<p id="Ch">Group Id: <input id="l" name="log" type="text"/></p>
<p id="Pass">Password: <input id="p" name="Pass" type="password" /></p>
<input id="Cond" type="Text" />
<input type="submit" value="Login" />
</div>
<p id="Invalid" style="padding-top:.75em; color:#FF0000;">Login Field Empty </p>
</form>
The content of code changes through selection and code is this
The Group id And Password Are Hidden At The Beginning And Changes When The Option Is Selected In Below Code
$('#Login').change(function() {
if($(this).val()=='Sel')
$('#type').hide();
else if($(this).val()=='Student')
{
$('#Ch').html('<p id="Ch">Group Id: <input id="l" name=" log" type="text" /></p>')
$('#type').show(10);
}
else
{
$('#Ch').html('<p id="Ch">Faculity Id: <input id="l" name="log" type="text" /></p>')
$('#type').show(10);
}
});
I Think It Is Causing Problem Kindly Check And Tell Me What's It Alternative If It Causes Some Problem Or I Am Doing It Wrong??
$('#input') the # is for ID selector, try the $('input') tag name selector.
Unless your input has an ID of "input", you should be referencing your input as $('input'). This will create a jQuery object with all the elements of type "input".
In your post, you have this chunk of JavaScript code:
$('#Login').change(function() {
if($(this).val()=='Sel')
$('#type').hide();
else if($(this).val()=='Student')
{
$('#Ch').html('<p id="Ch">Group Id: <input id="l" name=" log" type="text" /></p>')
$('#type').show(10);
}
else
{
$('#Ch').html('<p id="Ch">Faculity Id: <input id="l" name="log" type="text" /></p>')
$('#type').show(10);
}
Can I ask where this code is placed within the page? There may be an issue with the order of execution.