Using javascript/jquery, pass form variables to iframe src parameters - javascript

I have an iframe like this:
<iframe name="report-iframe" id="report-iframe" src="https://reporting.com/embed" width="100%" height="300" frameborder="0"></iframe>
I want to replace the src value using values from a form
<form method="post" target="report-iframe">
<input id="form-type" name="form-type" type="text" />
<input id="form-date" name="form-date" type="date" />
<input type="button" value="Update Report" onclick="javascript_function()"/>
</form>
so the resulting source of the iframe is:
src="https://reporting.com/embed?param_type=form-type&param_date=form-date"
Then reload the iframe with the passed parameters.
I want to do this using only javascript/jquery if possible.

Here's a jQuery approach.
function javascript_function() {
$('#report-iframe').attr('src','https://reporting.com/embed?param_type=' + $('#form-type').val() + '&param_date=' + $('#form-date').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe name="report-iframe" id="report-iframe" src="https://reporting.com/embed" width="100%" height="300" frameborder="0"></iframe>
<form method="post" target="report-iframe">
<input id="form-type" name="form-type" type="text" />
<input id="form-date" name="form-date" type="date" />
<input type="button" value="Update Report" onclick="javascript_function()"/>
</form>

This JSFiddle accomplishes what you're asking. You'll want to tweak it for robustness, but basically you can target the form (I used $('form') but for a real-world scenario you might want to be more specific.) and use .serialize() to turn its values into a query string, then append that to the src attribute of your iframe.
Edit: Note that for your specific example to work with .serialize(), you'd want the name attribute of #form-type to be "param_type" and the name attribute of #form-date to be "param_date"

Related

Using JavaScript to send input to a url and control a iframe until submit?

I have a basic html setup:
<input id="input_data" type="text" />
<input id="submit_data" type="submit" value="submit" />
<br />
<iframe name="Frame1" id="Frame1" src="~/d/Test.php?DataId=(This is where I need input data)" ></iframe>
I've looked over some similar titles and the methods didn't work. Prehaps I'm doing something wrong completely as the iframe shouldn't even do anything until submit is pressed.
Try with form tag for submit and use return for prevent the page refresh .And set the src attribute via dom .The iframe was loaded after the src added
function add() {
var url = document.getElementById('input_data').value
document.getElementById('Frame1').src = "~/d/Test.php?DataId=" + url
console.log(document.getElementById('Frame1').src);
return false;
}
<form onsubmit="return add()">
<input id="input_data" type="text" />
<input id="submit_data" type="submit" value="submit" />
<br />
</form>
<iframe name="Frame1" id="Frame1"></iframe>
The iFrame is being loaded as soon as the parent page is rendered, because you set the src attribute within the html tag.
If you wish to load it later you can do so by setting the src attribute in JavaScript then:
document.getElementById("Frame1").src = "/d/Test.php?DataId=" + data;

Looking to Add a variable inside an HTML link

excuse my ignorance but i would really appreciate your help.
I am new to HTML and i am just trying to add a variable inside an HTML link (ex. http://www.google.com/variable/).
The variable will be text type and i want to replace the text when i type something in a search bar.
(ex. search for "cars" and have www.google.com/cars)
Any thoughts how i can start this?
Much appreciated.
Write following javascript function:
function set(me)
{
var link = 'http://www.google.com/';
document.getElementById('result').value = link + me.value;
}
I have written following HTML lines to illustrate:
<div>
<input type="text" id="test" onkeyup="set(this);" />
<input type="text" id="result" />
</div>
You can call this function on onkeyup or onchange events as required.
Include in your Html.
<form method="get" action="http://www.google.com/search">
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Search in Google" />
</td>
</tr>
<tr>
<td align="center" style="font-size:75%">
<input type="checkbox" name="sitesearch" value="rotinadigital.net"/>Only my site<br />
</td>
</tr>
</table>
</div>
</form>
If you want variables in strings then take a look at template literals. You can use them like so:
var variable = document.getElementsByTagName('input')[0].value;
var url = `https://www.google.com/${variable}/`;
// same as 'https://www.google.com/' + variable + '/'
It sounds like you're trying to achieve an effect similar to Google Instant though. Afaik that's just done through standard anchor links and using javascript to (rather radically) manipulate the contents of the page. Actually navigating to a different page would cause a rather noticeable delay.

Capture html tag value to Smarty

Im not so good in smarty so I need help,
When I submit this form using ajax :
<form accept-charset="UTF-8" method="post" onSubmit="return validate()">
<input type="text" name="code" maxlength="15" class="input-text" id="code" value="" placeholder="code">
<input type="submit" class="button-alt-gray top1px" name="code" value="Apply" onClick="search_code()"> <br>
</form>
<div id="cool_number" />
this <div id="cool_number" /> gives me (prints on screen) a value lets say 10
and I want to pass or capture this value to a an smarty tag , I tried this:
does not work
{$p.total = "<div id="cool_number" />"}
does not work
{$p.total = "<div id='cool_number' />"}
does not work
{$p.total = "<div id=\"cool_number\" />\n"}
if you want to catch cool_number's value on the page rendered after form submit,
try {$smarty.post.cool_number}
documentation: http://www.smarty.net/docsv2/en/language.variables.smarty.tpl
if you need it's value already on current page (before submitting the form), you have to use javascript, because smarty is server side language

How do I make the action of my form the src of my iframe

<form id="submit" action="" method="post">
I need my form to submit data to the src of the iframe. This src is constantly changing depending on user action.
<iframe id="iframe" src="math_iframe.php" width="100%" height="100%"></iframe>
So I would like it to do something like
<form id="submit" action="<iframe src="math_iframe.php"" method="post">
Please note : I would like the stay on the current page.
Use jQuery:
$('#submit').on('submit',function(e){
$(this).attr('action',$('#iframe').attr('src'));
});
DEMO: http://jsfiddle.net/M6wHa/

Focusing a textbox using javascript in a google-chrome extension

How do you focus a textbox in a google-chrome extension? I have tried this javascript:
<script type="text/javascript">
function setFocus()
{
document.getElementById("Target").focus();
}
</script>
</head>
<body onload="setFocus()">
<div style="float:left">
<table cellpadding="3" cellspacing="0" id="mytable" style="float:left;">
<tbody><tr><td>Target:</td> <td><input type="text" name="Target" size="25" value="" /></td></tr>
</tbody></table>
I found this code on multiple code forum websites, so I am not sure if the javascript is not working or if chrome prevents it from running.
You're using getElementById(), but in your example Target is the name attribute, not the ID.
Add id="Target", like this:
<input type="text" id="Target" name="Target" size="25" value="" />
The reason the code you gave doesn't work is because your input doesn't have an ID of "target", it only has a name. Add the correct ID and it will work.
you want to get an element by ID, when you don't have one. You must add id="Target" to the input.

Categories