can anybody tell me how to make preview before submit in one form using javascript in php
i have an example like
<script type="text/javascript">
$(document).ready(function() {
`$('#db').hide();
});
function preview()
{
var add=document.getElementById('Address_Street').value;
if(add.trim()!="")
{
$('#db').show();
document.getElementById('p_Address_Street').value=add;
}
}
<body>
<form name="approval" id="approval" method="post" enctype="multipart/form-data" action="">
<input type="text" name="Address_Street" id="Address_Street" size="36" value="">
<input type="submit" value="Submit" >`
<input type="button" value="Preview" onclick="preview()">
</form>
<div id="db">
Address Street: <input type="text" name="p_Address_Street" id="p_Address_Street" size="36" value="" readonly="readonly">
</div>
</body>
can everybody tell me the right one please :(
Add id to your Preview button
<input id="Preview" type="button" value="Preview">
Then try this Js
$(document).ready(function() {
$('#db').hide();
$('#Preview').on('click', function(){
var add=$("#Address_Street").val();
if(add.trim()!="")
{
$('#db').show();
$('#p_Address_Street').val(add);
}
});
});
You have an error on this line
`$('#db').hide(); try to remove the ` char
And then, if you're using JQuery, stick to it.
var add = $('#Address_Street').val();
To debug, remove the if statement. Maybe the error is there.
The example:
http://jsfiddle.net/fa295/
Related
How can I know which form I clicked? Is it possible with a button class instead of buttons with id?
$(document).ready(function () {
$(".form-buttons").click(function () {
//I only want the form which corresponds to the button I clicked
var formDates = $(form).serialize()
alert ("You clicked "+formDates)
})
})
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
Yes use class instead of id for similar elements. Please try this.
Note: form-button is the class name in your HTML and not form-buttons
$(document).ready(function () {
$(".form-button").click(function () {
var formDates = $(this).closest('form').serialize();
alert ("You clicked "+formDates)
})
})
I think you be looking for
$('.form-button').on('click', function () {
alert($(this).parents('form').attr('id')); // Check the ID of the form clicked
});
something Maybe Like mentioned above.
You can get the name of the element by using the this keyword which refer, in a DOM event, to the cibled element :
$(document).ready(function () {
$(".form-buttons").click(function () {
alert('You clicked the form' + this.parentElement.getAttribute('id'));
})
})
You can do this in a few different ways. You can traverse up the DOM and see which form is used or -and this is my favorite- you can submit the form!
Solution 1: Traversing up the DOM
<script>
$(document).ready(function () {
$(".form-button").click(function () {
var clicked_form = $(this).parent();
var formDates = clicked_form.serialize();
alert ("You clicked "+formDates);
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
</body>
Solution 2: Submit the form
You already are using the form, so why not submit it? Change the buttons to input elements with type submit and intercept the submit event, like this. This is how I think it should be done. It is also better for user experience because the user can just submit the form by pressing enter.
<script>
$(document).ready(function () {
$("form").on('submit', function (e) {
e.preventDefault();
var formDates = $(this).serialize()
alert ("You clicked "+formDates)
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
</body>
Check this fiddle on how I would do it.
https://jsfiddle.net/xtfeugav/
Simple use
$("form").submit(function(e) {
to listen for every submit on all the forms you have. To get the ID of the form you use
var formid = $(this).attr('id');
I used e.preventDefault(); to prevent the form don't update the page.
Remember to use <input type="submit" value="Submit"> on your forms to make this work.
Its a simple code, hope it helps.
I want to create a form for my blog visitors like this:
<form name="myform" id="test">
<input type="text" name="url"/>
<input type="submit" value="submit"/>
</form>
If someone enters a URL: https://demo.website.com/page/blablabla.html
It will generate a URL: https://newwebsite.com/page/blablabla.html
So the point is: just change demo.website be newwebsite
Is this possible with javascript or jQuery?
Try this approach:
$("input[name='url']").on('change', function(e){
$(this).val($(this).val().replace("demo.website.","newwebsite."));
})
Working code would be somewhat like this
<form name="myform" id="test">
<input type="text" name="url" onblur="func(this)" />
<input type="submit" value="submit"/>
</form>
<script>
function func(elem){
var _url = elem.value;
var finUrl = _url.replace('demo.website','newwebsite');
console.log(finUrl);
}
</script>
Why this JavaScript code is not redirecting to the URL ? What is wrong with this code?
function submitform() {
var hiddenFieldValue = document.getElementById('course').value;
alert("inindonesia.org/marketplace/tags/"+hiddenFieldValue);
window.location.href= "inindonesia.org/marketplace/tags/"+hiddenFieldValue);
return false;
}
HTML code
<form autocomplete="off" method="POST">
<p>
Course Name <label>:</label>
<input type="text" name="course" id="course" />
<!--input type="button" value="Get Value" /-->
<input type="text" name="course_val" id="course_val" />
</p>
<input type="submit" value="Submit" onClick="submitform()"/>
</form>
As you are relying on button click, what is the need of the form??
As you put that in <form &rt; it is not working. remove form, it will work
<p>
Course Name <label>:</label>
<input type="text" name="course" id="course" />
<!--input type="button" value="Get Value" /-->
<input type="text" name="course_val" id="course_val" />
</p>
<input type="submit" value="Submit" onClick="submitform()"/>
Remove form.
You need http:// on the URL. You code updated:
function submitform(){
var hiddenFieldValue = document.getElementById('course').value;
alert("inindonesia.org/marketplace/tags/"+hiddenFieldValue);
window.location.href= "http://inindonesia.org/marketplace/tags/"+hiddenFieldValue);
return false;
}
You should use only
window.location = url;
or
window.location.replace = url;
instead off
window.location.href
cause that simulates a link
here is the discussion
How to redirect to another webpage in JavaScript/jQuery?
you are doing this :
window.location.href= "inindonesia.org/marketplace/tags/"+hiddenFieldValue);
change it to this :
window.location.href= "inindonesia.org/marketplace/tags/"+hiddenFieldValue;
NOTE THE ')' that i deleted at the end of the line.
HTML:
I want to pass the value from the gsearch to the q parameter. The following is the ways I make but it couldn't work. How should I do it?
action="http://test.com/search.php?q=<script type="text/javascript">document.getElementById('gsearch').value;</script>">
updated:
in my site. i want to make a google custom search: so i put the following code in the homepage. 0156290304977:8texhu0mrk the google search value. gsearch.php page which i put the google custom search code in and show the searched result
<form method="get" action="http://test.com/gsearch.php?cx=0156290304977:8texhu0mrk&cof=FORID:11&ie=UTF-8&q=..." >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>
now, i want to when the user input the searched text in the gsearch text box, if he click the submit button,. then on the gsearch.php page shows the searched result.
if you want to submit to this: http://test.com/search.php?q=theinput
just do this:
<form target="_top" method="get" action="http://www.cnn.com/search.php" >
<input type="text" title="" value="theinput" name="q" class="search-input" id="gsearch" />
<input type="submit" value="submit" id="search-button"/>
</form>
the entire idea behind the <form> element is that it is making sure that all of the inputs from the user will be sent to the action.
the form will take the input from the q and add it to the action automatically.
so in your simple case. no manipulation is required.
Test it here
http://jsfiddle.net/L4rHG/1/
this will be submitted to http://edition.cnn.com/search.php?q=theinput
Or you need over javascritpt
<script>
function SubmitForm(){
window.open("http://test.com/search.php?q="+document.getElementById('gsearch').value)
return false;
}
</script>
<form method="get" action="http://test.com/search.php" onSubmit="SubmitForm();false" >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>
<form action="http://test.com/search.php?q=">
<script>
document.forms[0].action += 'new_action.html';
</script>
I have an input which searcher's google web and another input to search google images. For each input i have buttons to fadeIn either. Can the search input be the same but search different sites?
Here is a fiddle of what I currently have: http://jsfiddle.net/kwC36/
To search the web I use:
<form action="http://google.com/search" method="get" class="websearch">
and to search images I use:
<form action="http://www.google.com/images?hl=en&q=" method="get" class="imagesearch">
Thanks alot
Yeah, you can switch action on the form:
$('.web').click(function(){
$('form')[0].action = "http://google.com/search";
// do something
$('.websearch').fadeIn();
});
$('.image').click(function(){
$('form')[0].action = "http://www.google.com/images?hl=en&q=";
// do something
$('.websearch').fadeIn();
});
Assign custom data attributes to the button so the form action can be dynamic:
HTML:
<form id="search-form" action="" method="get" class="websearch">
<input id="search-field" type="text" class="searcher" name="" />
</form>
<input type="button" value="Search the web" class="search-btn" data-action="http://google.com/search" data-field-name="" />
<input type="button" value="Search images" class="search-btn" data-action="http://www.google.com/images?hl=en&q=" data-field-name="q" />
JQuery:
$('.search-btn').click(function(e){
e.preventDefault();
$('#search-field').attr('name',$(this).data('field-name'));
$('#search-form').attr('action',$(this).data('action')).submit();
});
<input type="submit" name="srch_images" value="Search Images">
<input type="submit" name="srch_google" value="Search Google">
if( isset($_POST['srch_images'] )
{
something();
}
else if( isset($_POST['srch_google']) )
{
something_else();
}
You can use the same textbox to search for web and image. Also there is no need to have two form tags. Try this
$('.web').click(function(){
$('form').attr('action', "http://google.com/search").submit();
});
$('.image').click(function(){
$('form').attr('action', "http://www.google.com/images?hl=en&q=").submit();
});
HTML:
<form action="http://google.com/search" method="get" class="websearch">
<input type="text" class="searcher">
<input type="submit" value="Web Search" class="web">
<input type="submit" value="Image Search" class="image">
</form>
Javascript:
$('.image').click(function() {
$(this).parent()
.attr('action', 'http://www.google.com/images?hl=en&q=');
});
That should do it.